improve: better use of screen space on all pages

- Larger book spines on desktop (w-64 h-96)
- Wider spacing between books on shelf
- Game cover page: two-column layout on large screens
- Chapter reader: wider content area (800px on lg)
- Larger typography on desktop breakpoints

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/BookCover.tsx

@@ -5,7 +5,7 @@ export default function BookCover({ game }: { game: GameWithChapters }) {
   return (
     <div className="min-h-screen bg-parchment text-stone-800">
       {/* Back to shelf */}
-      <div className="p-4 md:p-6">
+      <div className="p-4 md:p-6 lg:px-12">
         <Link
           href="/"
           className="inline-flex items-center text-stone-500 hover:text-stone-700 font-lora text-sm transition-colors"
@@ -14,45 +14,48 @@ export default function BookCover({ game }: { game: GameWithChapters }) {
         </Link>
       </div>
 
-      {/* Cover */}
-      <div className="max-w-2xl mx-auto px-6 py-12 text-center">
-        {/* Decorative top */}
-        <div
-          className="w-24 h-1 mx-auto mb-8 rounded"
-          style={{ backgroundColor: game.accentColor }}
-        />
-
-        <h1
-          className="font-playfair text-4xl md:text-5xl font-bold mb-3"
-          style={{ color: game.colorDark }}
-        >
-          {game.title}
-        </h1>
-
-        <p
-          className="font-lora italic text-lg mb-8"
-          style={{ color: game.color }}
-        >
-          {game.subtitle}
-        </p>
-
-        {/* Decorative divider */}
-        <div className="flex items-center justify-center gap-4 mb-8">
-          <div className="w-16 h-px bg-stone-300" />
+      {/* Cover - two column layout on large screens */}
+      <div className="max-w-6xl mx-auto px-6 py-8 md:py-12 lg:grid lg:grid-cols-2 lg:gap-16 lg:items-start">
+        {/* Left: Title and description */}
+        <div className="text-center lg:text-left lg:sticky lg:top-8">
+          {/* Decorative top */}
           <div
-            className="w-2 h-2 rotate-45"
+            className="w-24 h-1 mx-auto lg:mx-0 mb-8 rounded"
             style={{ backgroundColor: game.accentColor }}
           />
-          <div className="w-16 h-px bg-stone-300" />
+
+          <h1
+            className="font-playfair text-4xl md:text-5xl lg:text-6xl font-bold mb-3"
+            style={{ color: game.colorDark }}
+          >
+            {game.title}
+          </h1>
+
+          <p
+            className="font-lora italic text-lg md:text-xl mb-8"
+            style={{ color: game.color }}
+          >
+            {game.subtitle}
+          </p>
+
+          {/* Decorative divider */}
+          <div className="flex items-center justify-center lg:justify-start gap-4 mb-8">
+            <div className="w-16 h-px bg-stone-300" />
+            <div
+              className="w-2 h-2 rotate-45"
+              style={{ backgroundColor: game.accentColor }}
+            />
+            <div className="w-16 h-px bg-stone-300" />
+          </div>
+
+          <p className="font-lora text-stone-600 text-base md:text-lg leading-relaxed max-w-lg mx-auto lg:mx-0 mb-12 lg:mb-0">
+            {game.description}
+          </p>
         </div>
 
-        <p className="font-lora text-stone-600 text-base leading-relaxed max-w-lg mx-auto mb-16">
-          {game.description}
-        </p>
-
-        {/* Table of Contents */}
-        <div className="text-left max-w-md mx-auto">
-          <h2 className="font-playfair text-xl font-semibold text-stone-700 mb-6 text-center tracking-wide uppercase">
+        {/* Right: Table of Contents */}
+        <div>
+          <h2 className="font-playfair text-xl md:text-2xl font-semibold text-stone-700 mb-6 text-center lg:text-left tracking-wide uppercase">
             Indice
           </h2>
 
@@ -61,30 +64,30 @@ export default function BookCover({ game }: { game: GameWithChapters }) {
               <Link
                 key={chapter.slug}
                 href={`/${game.slug}/${chapter.slug}`}
-                className="flex items-baseline gap-3 py-3 px-2 rounded hover:bg-parchment-dark transition-colors group"
+                className="flex items-baseline gap-4 py-4 px-4 rounded-lg hover:bg-parchment-dark transition-colors group"
               >
                 <span
-                  className="font-playfair text-sm font-bold min-w-[2rem]"
+                  className="font-playfair text-base md:text-lg font-bold min-w-[2.5rem]"
                   style={{ color: game.color }}
                 >
                   {String(chapter.number).padStart(2, "0")}
                 </span>
-                <span className="font-lora text-stone-700 group-hover:text-stone-900 flex-1">
+                <span className="font-lora text-stone-700 group-hover:text-stone-900 flex-1 text-base md:text-lg">
                   {chapter.title}
                 </span>
-                <span className="text-stone-300 group-hover:text-stone-500 text-sm">
+                <span className="text-stone-300 group-hover:text-stone-500 text-base">
                   &rarr;
                 </span>
               </Link>
             ))}
           </div>
-        </div>
 
-        {/* Decorative bottom */}
-        <div
-          className="w-24 h-1 mx-auto mt-16 rounded"
-          style={{ backgroundColor: game.accentColor }}
-        />
+          {/* Decorative bottom */}
+          <div
+            className="w-24 h-1 mx-auto lg:mx-0 mt-12 rounded"
+            style={{ backgroundColor: game.accentColor }}
+          />
+        </div>
       </div>
     </div>
   );

src/components/BookShelf.tsx

@@ -3,22 +3,22 @@ import BookSpine from "./BookSpine";
 
 export default function BookShelf({ games }: { games: GameMeta[] }) {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center px-4 py-16">
+    <div className="min-h-screen flex flex-col items-center justify-center px-4 py-12 md:py-16">
       {/* Title */}
-      <div className="text-center mb-16">
-        <h1 className="font-playfair text-4xl md:text-6xl font-bold text-parchment mb-4">
+      <div className="text-center mb-12 md:mb-16">
+        <h1 className="font-playfair text-4xl md:text-6xl lg:text-7xl font-bold text-parchment mb-4">
           Cronicas de los Reinos
         </h1>
-        <p className="font-lora text-stone-400 text-lg italic max-w-lg mx-auto">
+        <p className="font-lora text-stone-400 text-lg md:text-xl italic max-w-2xl mx-auto">
           Las historias epicas de los mundos que nos unieron
         </p>
         <div className="w-32 h-0.5 bg-amber-700/50 mx-auto mt-6" />
       </div>
 
       {/* Shelf */}
-      <div className="relative">
+      <div className="relative w-full max-w-6xl mx-auto">
         {/* Books row */}
-        <div className="flex gap-6 md:gap-8 items-end justify-center flex-wrap px-8 pb-4">
+        <div className="flex gap-6 md:gap-10 lg:gap-14 items-end justify-center flex-wrap px-4 md:px-8 pb-4">
           {games.map((game) => (
             <BookSpine key={game.slug} game={game} />
           ))}
@@ -30,7 +30,7 @@ export default function BookShelf({ games }: { games: GameMeta[] }) {
       </div>
 
       {/* Footer */}
-      <p className="mt-16 text-stone-600 text-sm font-lora">
+      <p className="mt-12 md:mt-16 text-stone-600 text-sm font-lora">
         Selecciona un tomo para comenzar a leer
       </p>
     </div>

src/components/BookSpine.tsx

@@ -5,7 +5,7 @@ export default function BookSpine({ game }: { game: GameMeta }) {
   return (
     <Link href={`/${game.slug}`} className="group block">
       <div
-        className="relative w-44 h-64 md:w-48 md:h-72 rounded-r-md shadow-lg cursor-pointer transition-all duration-300 group-hover:-translate-y-3 group-hover:rotate-[-2deg] group-hover:shadow-2xl"
+        className="relative w-44 h-64 md:w-56 md:h-80 lg:w-64 lg:h-96 rounded-r-md shadow-lg cursor-pointer transition-all duration-300 group-hover:-translate-y-3 group-hover:rotate-[-2deg] group-hover:shadow-2xl"
         style={{
           background: `linear-gradient(135deg, ${game.color} 0%, ${game.colorDark} 100%)`,
         }}
@@ -23,12 +23,12 @@ export default function BookSpine({ game }: { game: GameMeta }) {
             style={{ backgroundColor: game.accentColor }}
           />
           <h2
-            className="font-playfair text-lg md:text-xl font-bold leading-tight text-white"
+            className="font-playfair text-lg md:text-2xl lg:text-3xl font-bold leading-tight text-white"
           >
             {game.title}
           </h2>
           <p
-            className="text-xs mt-2 opacity-75 font-lora italic"
+            className="text-xs md:text-sm mt-2 opacity-75 font-lora italic"
             style={{ color: game.accentColor }}
           >
             {game.subtitle}

src/components/ChapterReader.tsx

@@ -23,7 +23,7 @@ export default function ChapterReader({
       <ReadingProgress color={game.accentColor} />
 
       {/* Header */}
-      <header className="max-w-3xl mx-auto px-6 pt-8 pb-4">
+      <header className="max-w-4xl mx-auto px-6 lg:px-12 pt-8 pb-4">
         <Link
           href={`/${game.slug}`}
           className="inline-flex items-center text-stone-500 hover:text-stone-700 font-lora text-sm transition-colors"
@@ -33,33 +33,33 @@ export default function ChapterReader({
       </header>
 
       {/* Chapter heading */}
-      <div className="max-w-3xl mx-auto px-6 pt-8 pb-12 text-center">
+      <div className="max-w-4xl mx-auto px-6 lg:px-12 pt-8 pb-12 text-center">
         <p
-          className="font-playfair text-sm font-semibold tracking-widest uppercase mb-3"
+          className="font-playfair text-sm md:text-base font-semibold tracking-widest uppercase mb-3"
           style={{ color: game.color }}
         >
           Capitulo {chapter.number} de {totalChapters}
         </p>
-        <h1 className="font-playfair text-3xl md:text-4xl font-bold text-stone-800 mb-4">
+        <h1 className="font-playfair text-3xl md:text-4xl lg:text-5xl font-bold text-stone-800 mb-4">
           {chapter.title}
         </h1>
         <div className="flex items-center justify-center gap-4">
-          <div className="w-12 h-px bg-stone-300" />
+          <div className="w-16 h-px bg-stone-300" />
           <div
             className="w-2 h-2 rotate-45"
             style={{ backgroundColor: game.accentColor }}
           />
-          <div className="w-12 h-px bg-stone-300" />
+          <div className="w-16 h-px bg-stone-300" />
         </div>
       </div>
 
       {/* Chapter content */}
-      <article className="max-w-[700px] mx-auto px-6 pb-20 font-lora text-lg leading-relaxed text-stone-700 prose prose-stone prose-lg prose-headings:font-playfair prose-headings:text-stone-800 prose-p:mb-6 prose-p:indent-8 first:prose-p:indent-0">
+      <article className="max-w-[700px] lg:max-w-[800px] mx-auto px-6 lg:px-12 pb-20 font-lora text-lg lg:text-xl leading-relaxed lg:leading-relaxed text-stone-700 prose prose-stone prose-lg lg:prose-xl prose-headings:font-playfair prose-headings:text-stone-800 prose-p:mb-6 prose-p:indent-8 first:prose-p:indent-0">
         <MDXRemote source={chapter.content} />
       </article>
 
       {/* Chapter navigation */}
-      <nav className="max-w-[700px] mx-auto px-6 pb-16">
+      <nav className="max-w-[700px] lg:max-w-[800px] mx-auto px-6 lg:px-12 pb-16">
         <div className="border-t border-stone-300 pt-8 flex justify-between items-center">
           {prevChapter ? (
             <Link