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>

.claude/settings.local.json

@@ -0,0 +1,44 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git init:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git config:*)",
+      "Bash(npx create-next-app@latest:*)",
+      "Bash(npx create-next-app@14:*)",
+      "Bash(npm install:*)",
+      "Bash(timeout 30 npm run dev:*)",
+      "Bash(timeout 20 npm run dev:*)",
+      "Bash(git -C /home/PaginaNovelasYRpg add:*)",
+      "Bash(git -C /home/PaginaNovelasYRpg status)",
+      "Bash(git -C:*)",
+      "Bash(echo:*)",
+      "Bash(npx tsc:*)",
+      "Bash(pkill:*)",
+      "Bash(ls:*)",
+      "Bash(npm run build:*)",
+      "Bash(curl -s -X POST \"https://git.consultoria-as.com/api/v1/user/repos\"  -H \"Content-Type: application/json\"  -u \"consultoria-as:Aasi940812\"  -d '{\"\"name\"\":\"\"cronicas-de-los-reinos\"\",\"\"description\"\":\"\"Las historias epicas de los MMORPGs que marcaron una era\"\",\"\"private\"\":false}')",
+      "Bash(python3:*)",
+      "Bash(git remote add:*)",
+      "Bash(git branch:*)",
+      "Bash(git push:*)",
+      "Bash(git remote set-url:*)",
+      "Bash(ip addr:*)",
+      "Bash(pm2 start:*)",
+      "Bash(pm2 startup:*)",
+      "Bash(pm2 save:*)",
+      "Bash(curl:*)",
+      "Bash(pm2 stop:*)",
+      "Bash(pm2 logs:*)",
+      "Bash(pm2 delete:*)",
+      "Bash(lsof:*)",
+      "Bash(xargs:*)",
+      "Bash(pm2 kill:*)",
+      "Bash(ss:*)",
+      "Bash(kill:*)",
+      "Bash(NODE_ENV=production npx next build:*)",
+      "Bash(pm2 restart:*)"
+    ]
+  }
+}

ecosystem.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  apps: [
+    {
+      name: "cronicas-de-los-reinos",
+      cwd: "/home/PaginaNovelasYRpg",
+      script: "node_modules/.bin/next",
+      args: "start -H 0.0.0.0 -p 3000",
+      env: {
+        NODE_ENV: "production",
+      },
+      max_restarts: 5,
+      restart_delay: 3000,
+    },
+  ],
+};

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 */}
+      {/* Cover - two column layout on large screens */}
-      <div className="max-w-2xl mx-auto px-6 py-12 text-center">
+      <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">
-        {/* Decorative top */}
+        {/* Left: Title and description */}
-        <div
+        <div className="text-center lg:text-left lg:sticky lg:top-8">
-          className="w-24 h-1 mx-auto mb-8 rounded"
+          {/* Decorative top */}
-          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" />
           <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">
+        {/* Right: Table of Contents */}
-          {game.description}
+        <div>
-        </p>
+          <h2 className="font-playfair text-xl md:text-2xl font-semibold text-stone-700 mb-6 text-center lg:text-left tracking-wide uppercase">
-
-        {/* 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">
             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 */}
+          {/* Decorative bottom */}
-        <div
+          <div
-          className="w-24 h-1 mx-auto mt-16 rounded"
+            className="w-24 h-1 mx-auto lg:mx-0 mt-12 rounded"
-          style={{ backgroundColor: game.accentColor }}
+            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">
+      <div className="text-center mb-12 md:mb-16">
-        <h1 className="font-playfair text-4xl md:text-6xl font-bold text-parchment mb-4">
+        <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