/* The original canvas stays 320×180. Touch controls live outside the artwork, as the painter's things on the desk:
   the page taped down, notebook tabs for the menus, a palette pad whose drop follows the thumb, a paint pan for A and
   an eraser for B. Anything that cannot be used right now is only sketched in graphite. */
html,body { overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%; }
/* en modo táctil nada hace zoom: ni la hoja, ni los márgenes, ni el estuche */
.touch-mode,.touch-mode * { touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none; }
.touch-mode #pwa-note,.touch-mode #pwa-note * { touch-action:manipulation; }
#game-shell,#game-screen { display:flex;align-items:center;justify-content:center; }
#game-shell { width:100%;height:100%; }
#game-screen { min-width:0;min-height:0; }
#page { position:relative;line-height:0; }
#c { display:block;touch-action:none; }
.touch-only { display:none; }
body.touch-mode {
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
  --paper:#f4e7c8;--paper-dk:#e1cca2;--ink:#392c3f;--graphite:#6f6680;--lead:#d84a4a;--pad:118px;
  background:
    repeating-linear-gradient(93deg,rgba(255,240,220,.018) 0 2px,transparent 2px 9px),
    radial-gradient(ellipse 90% 80% at 50% 38%,#2a2135 0%,#17121f 58%,#0b0912 100%);
}
.touch-mode #game-shell {
  box-sizing:border-box;width:100%;height:100vh;height:100dvh;
  padding:max(4px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  display:grid;grid-template-columns:118px minmax(0,1fr) 88px;grid-template-rows:44px minmax(0,1fr);gap:2px 6px;
}
.touch-mode #game-screen { width:100%;height:100%;grid-column:2;grid-row:2; }
.touch-mode #hint { display:none; }
/* la hoja, pegada con cinta a la mesa */
.touch-mode #page { box-shadow:0 0 0 2px #221b2b,0 5px 0 2px #07060c,0 14px 30px rgba(0,0,0,.55); }
.touch-mode #page::before,.touch-mode #page::after {
  content:'';position:absolute;top:-7px;width:46px;height:15px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(236,222,178,.88),rgba(214,196,150,.82));box-shadow:0 1px 0 rgba(0,0,0,.25);
  -webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent calc(100% - 2px)),repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 3px);
}
.touch-mode #page::before { left:-14px;transform:rotate(-24deg); }
.touch-mode #page::after { right:-14px;transform:rotate(21deg); }
.touch-mode button { -webkit-tap-highlight-color:transparent;touch-action:none;cursor:pointer; }
.touch-mode .touch-only { display:flex; }
.touch-mode .touch-only button {
  --paint:#d6b474;position:relative;box-sizing:border-box;min-height:44px;border:1px solid #b7a07c;border-radius:3px 6px 4px 3px;
  background:linear-gradient(174deg,var(--paper) 0%,var(--paper-dk) 92%,#bca17a 93%);color:var(--ink);font:16px/1.15 'Chromara Cuaderno',system-ui,sans-serif;-webkit-font-smoothing:none;
  padding:6px 10px;box-shadow:1px 3px 0 #07060c,inset 0 2px 0 #fff2d6;
  transition:transform 190ms cubic-bezier(.3,1.7,.5,1),box-shadow 120ms ease,filter 120ms ease,opacity 160ms ease;
}
/* lo que ahora no se puede usar queda solo bocetado a lápiz */
.touch-mode .touch-only button:disabled {
  color:var(--graphite);border:1px dashed #5b5468;background:rgba(40,34,50,.35);box-shadow:none;filter:none;
}
.touch-mode .touch-only button.is-held,.touch-mode .touch-only button:active:not(:disabled) {
  filter:brightness(1.1);transform:translateY(3px) scale(.94) rotate(-1.5deg);box-shadow:0 0 0 #07060c,inset 0 2px 0 #fff2d6;transition-duration:60ms;
}
.touch-mode .touch-only button:focus-visible { outline:2px solid #edcd79;outline-offset:2px; }
/* salpicadura al tocar */
.touch-splat {
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:52% 48% 55% 45%;pointer-events:none;z-index:3;
  background:var(--splat,var(--paint));opacity:.85;
  box-shadow:17px -8px 0 -3px var(--paint),-15px 10px 0 -3px var(--paint),6px 17px 0 -4px var(--splat,var(--paint)),-9px -15px 0 -4px var(--paint),20px 9px 0 -5px var(--splat,var(--paint));
  animation:touch-splat 420ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes touch-splat { from { transform:scale(.2);opacity:.95; } 60% { opacity:.55; } to { transform:scale(3.2) rotate(25deg);opacity:0; } }
.touch-icon { width:18px;height:18px;flex:none;image-rendering:pixelated; }
.is-relabel span,.is-relabel { animation:touch-relabel 260ms cubic-bezier(.3,1.8,.5,1); }
@keyframes touch-relabel { from { transform:scale(.7);opacity:.3; } to { transform:none;opacity:1; } }

/* ---- pestañas del cuaderno ---- */
.touch-mode #touch-toolbar { grid-column:1/-1;grid-row:1;justify-content:center;align-items:flex-end;gap:5px;min-width:0; }
.touch-mode #touch-toolbar button {
  display:flex;align-items:center;gap:5px;min-height:40px;padding:4px 10px 3px;border-radius:9px 11px 0 0;border-bottom:none;
  border-top:5px solid var(--paint);box-shadow:inset 0 2px 0 #fff2d6,0 -1px 0 #07060c;transform-origin:50% 100%;
}
.touch-mode #touch-toolbar button .touch-icon { color:var(--paint);filter:brightness(.72) saturate(1.3); }
.touch-mode #touch-toolbar button:disabled { border-top:5px dashed #5b5468;border-bottom:none; }
.touch-mode #touch-toolbar button:disabled .touch-icon { color:var(--graphite);filter:none; }
.touch-mode #touch-toolbar button.is-held,.touch-mode #touch-toolbar button:active:not(:disabled) { transform:translateY(3px) scaleY(.9); }
.touch-mode #touch-toolbar [data-touch-menu=equipment] { --paint:#c08a4c; }
.touch-mode #touch-toolbar [data-touch-action=ring] { --paint:#d8505a; }
.touch-mode #touch-toolbar [data-touch-action=journal] { --paint:#4f9a6c; }
.touch-mode #touch-toolbar [data-touch-action=help] { --paint:#5d86cc; }
.touch-mode #touch-toolbar [data-touch-action=options] { --paint:#9c7cc0; }
.touch-mode #touch-toolbar #touch-sound { --paint:#6fa89a; }
.touch-mode #touch-fullscreen { --paint:#8c8ab0;padding:4px 11px 3px; }

/* ---- la cruceta: una paleta de madera con cuatro flechas pintadas y una gota del color del líder ---- */
.touch-mode #touch-movement { grid-column:1;grid-row:2;flex-direction:column;align-items:center;justify-content:center;gap:10px; }
#touch-pad {
  position:relative;width:var(--pad);height:var(--pad);touch-action:none;border-radius:47% 53% 49% 51%;
  background:radial-gradient(circle at 34% 28%,#a07a4e 0 8%,transparent 30%),repeating-linear-gradient(14deg,#6f5033 0 11px,#7c5b3b 12px 14px);
  box-shadow:inset 0 3px 0 #b28d5d,inset 0 -4px 0 #4d3522,0 5px 0 #1a121f,0 10px 18px rgba(0,0,0,.45);
}
.touch-mode #touch-pad button { position:absolute;width:40%;height:40%;padding:0;z-index:1;border-radius:32% 38% 30% 36%;display:flex;align-items:center;justify-content:center; }
#touch-pad [data-touch-direction=up] { left:30%;top:0; }
#touch-pad [data-touch-direction=left] { left:0;top:30%; }
#touch-pad [data-touch-direction=right] { right:0;top:30%; }
#touch-pad [data-touch-direction=down] { left:30%;bottom:0; }
#touch-pad button i { display:block;width:0;height:0;border:8px solid transparent;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
#touch-pad [data-touch-direction=up] i { border-bottom:11px solid #4b3a4e;border-top:0;margin-top:-4px; }
#touch-pad [data-touch-direction=down] i { border-top:11px solid #4b3a4e;border-bottom:0;margin-top:4px; }
#touch-pad [data-touch-direction=left] i { border-right:11px solid #4b3a4e;border-left:0;margin-left:-4px; }
#touch-pad [data-touch-direction=right] i { border-left:11px solid #4b3a4e;border-right:0;margin-left:4px; }
#touch-pad button.is-held i { border-color:transparent; }
#touch-pad [data-touch-direction=up].is-held i { border-bottom-color:var(--lead); }
#touch-pad [data-touch-direction=down].is-held i { border-top-color:var(--lead); }
#touch-pad [data-touch-direction=left].is-held i { border-right-color:var(--lead); }
#touch-pad [data-touch-direction=right].is-held i { border-left-color:var(--lead); }
.pad-center { position:absolute;left:36%;top:36%;width:28%;height:28%;border-radius:48% 42% 50% 46%;background:#2a2033;box-shadow:inset 2px 3px 0 #140f1a,0 1px 0 #a07a4e;pointer-events:none;z-index:2; }
.pad-nub {
  position:absolute;left:12%;top:8%;width:76%;height:80%;border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.75) 0 10%,transparent 12%),radial-gradient(circle at 50% 62%,var(--lead) 0 58%,color-mix(in srgb,var(--lead) 60%,#14121c) 100%);
  box-shadow:0 2px 0 #140f1a;transition:transform 220ms cubic-bezier(.3,1.9,.5,1);
}
.pad-nub.is-dragged { transition:transform 40ms linear; }
.touch-caption { color:#9b8f9f;font:16px/1 'Chromara Cuaderno',system-ui,sans-serif;text-align:center; }

/* ---- acciones: A es un godet de pintura, B una goma, Y y X dos pastillas de acuarela ---- */
.touch-mode #touch-actions { grid-column:3;grid-row:2;flex-direction:column;align-items:center;justify-content:center;gap:9px; }
.touch-mode #touch-actions button { width:84px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.touch-mode #touch-actions button b { display:block;font:28px/1 'Chromara Rotulo','Chromara Cuaderno',system-ui,sans-serif; }
.touch-mode #touch-actions button span { display:block;margin-top:2px;font-size:16px;white-space:nowrap; }
.touch-mode #touch-actions #touch-confirm {
  --paint:#c98a2a;--splat:#fff0c0;width:84px;height:84px;min-height:84px;border-radius:50%;border:3px solid #5d4126;color:#3a2a1c;
  background:radial-gradient(circle at 33% 28%,#fff1c4 0 9%,transparent 11%),radial-gradient(circle at 50% 55%,#f2c160 0 52%,#d49b3c 72%,#a77326 100%);
  box-shadow:inset 0 -5px 0 rgba(92,58,24,.35),inset 0 3px 0 rgba(255,244,210,.6),0 5px 0 #1a121f,0 9px 16px rgba(0,0,0,.4);
}
.touch-mode #touch-actions #touch-confirm b { font-size:34px;text-shadow:0 2px 0 rgba(255,240,200,.6); }
.touch-mode #touch-actions #touch-confirm.is-ready { animation:touch-ready 1.1s ease-in-out infinite; }
@keyframes touch-ready {
  0%,100% { box-shadow:inset 0 -5px 0 rgba(92,58,24,.35),inset 0 3px 0 rgba(255,244,210,.6),0 5px 0 #1a121f,0 0 0 0 rgba(240,192,96,.55); }
  50% { box-shadow:inset 0 -5px 0 rgba(92,58,24,.35),inset 0 3px 0 rgba(255,244,210,.6),0 5px 0 #1a121f,0 0 0 9px rgba(240,192,96,0); }
}
.touch-mode #touch-actions #touch-confirm.is-held,.touch-mode #touch-actions #touch-confirm:active { transform:translateY(4px) scale(.92,.88);box-shadow:inset 0 -2px 0 rgba(92,58,24,.35),0 1px 0 #1a121f; }
.touch-mode #touch-actions #touch-back {
  --paint:#e88a9a;--splat:#fbe3e6;min-height:48px;border-radius:9px 8px 10px 9px;border:2px solid #6a4b58;color:#3d2533;
  background:linear-gradient(90deg,#f7c7cd 0 62%,#6f8fc9 62% 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(90,40,60,.25),0 4px 0 #1a121f;
}
.touch-mode #touch-actions #touch-back b { font-size:22px; }
.touch-mode #touch-actions [data-touch-action=swap],.touch-mode #touch-actions [data-touch-action=release] { min-height:44px;flex-direction:row;gap:5px;border-radius:14px 12px 15px 12px;border-width:2px; }
.touch-mode #touch-actions [data-touch-action=swap] b,.touch-mode #touch-actions [data-touch-action=release] b { font-size:18px; }
.touch-mode #touch-actions [data-touch-action=swap] span,.touch-mode #touch-actions [data-touch-action=release] span { margin:0; }
.touch-mode #touch-actions [data-touch-action=swap]:not(:disabled) { --paint:#6a91d8;border-color:#27427a;background:radial-gradient(circle at 30% 30%,#b6cdf3 0 10%,transparent 12%),linear-gradient(170deg,#85a8e6,#4e74c0);color:#12203f; }
.touch-mode #touch-actions [data-touch-action=release]:not(:disabled) { --paint:#e07068;border-color:#7a2a2a;background:radial-gradient(circle at 30% 30%,#f7c0b8 0 10%,transparent 12%),linear-gradient(170deg,#ea8a80,#c0504a);color:#3a1212; }

/* ---- retrato: la hoja arriba y, debajo, el estuche con los controles a mano de los pulgares ---- */
#rotate-device { display:none; }
.touch-mode.is-portrait #game-shell {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,.45fr) auto auto minmax(12px,1fr) auto;gap:0 8px;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.touch-mode.is-portrait #game-shell::before {
  content:'';grid-column:1/-1;grid-row:5;align-self:end;height:calc(var(--pad) + 64px);border-radius:22px 26px 20px 24px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.06),transparent 60%),repeating-linear-gradient(45deg,#2c2338 0 3px,#292033 3px 6px);
  box-shadow:inset 0 0 0 2px #3b2f49,inset 0 0 0 7px #2a2134,inset 0 2px 18px rgba(0,0,0,.5),0 6px 0 #0b0912;
  outline:2px dashed rgba(170,150,190,.22);outline-offset:-12px;
}
body.touch-mode.is-portrait { --pad:min(44vw,190px,30vh); }
.touch-mode.is-portrait #game-screen { grid-column:1/-1;grid-row:2;width:100%;height:auto;aspect-ratio:16/9;margin-top:8px; }
.touch-mode.is-portrait #touch-toolbar { grid-column:1/-1;grid-row:3;align-items:flex-start;gap:4px;margin-top:9px;flex-wrap:nowrap; }
.touch-mode.is-portrait #touch-toolbar button {
  flex:1 1 0;min-width:0;max-width:64px;min-height:46px;padding:5px 2px 4px;justify-content:center;
  border-radius:0 0 11px 9px;border-top:none;border-bottom:5px solid var(--paint);box-shadow:inset 0 -2px 0 rgba(255,255,255,.3),0 3px 0 #07060c;transform-origin:50% 0;
}
.touch-mode.is-portrait #touch-toolbar button:disabled { border-bottom:5px dashed #5b5468;border-top:none; }
.touch-mode.is-portrait #touch-toolbar button .touch-icon { width:22px;height:22px; }
.touch-mode.is-portrait #touch-toolbar button span { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
.touch-mode.is-portrait #touch-toolbar button.is-held,.touch-mode.is-portrait #touch-toolbar button:active:not(:disabled) { transform:translateY(-2px) scaleY(.9); }
.touch-mode.is-portrait #touch-movement { grid-column:1;grid-row:5;align-self:end;position:relative;z-index:1;height:calc(var(--pad) + 64px);box-sizing:border-box;padding-top:14px;gap:8px; }
.touch-mode.is-portrait #touch-pad button i { border-width:10px;transform:scale(1.2); }
.touch-mode.is-portrait #touch-actions {
  grid-column:2;grid-row:5;align-self:end;position:relative;z-index:1;min-width:0;height:calc(var(--pad) + 64px);box-sizing:border-box;padding:18px 14px 20px 0;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;gap:8px 8px;align-content:stretch;align-items:center;justify-items:center;
}
.touch-mode.is-portrait #touch-actions #touch-confirm { grid-column:2;grid-row:1/3;align-self:center;--a:min(27vw,118px,19vh);width:var(--a);height:var(--a);min-height:0;margin-top:-18px; }
.touch-mode.is-portrait #touch-actions #touch-confirm b { font-size:40px; }
.touch-mode.is-portrait #touch-actions #touch-back { grid-column:1;grid-row:2;align-self:start;width:100%;max-width:88px;min-height:60px;margin-top:-6px; }
.touch-mode.is-portrait #touch-actions [data-touch-action=swap] { grid-column:1;grid-row:1;align-self:end;width:100%;max-width:88px; }
.touch-mode.is-portrait #touch-actions [data-touch-action=release] { position:absolute;right:10px;bottom:6px;width:auto;min-height:40px;padding:2px 10px; }

.touch-mode.ui-still .touch-only button,.touch-mode.ui-still .pad-nub { transition:none; }
.touch-mode.ui-still .touch-only button.is-held,.touch-mode.ui-still .touch-only button:active:not(:disabled) { transform:none; }
.touch-mode.ui-still #touch-confirm.is-ready,.touch-mode.ui-still .is-relabel,.touch-mode.ui-still .is-relabel span { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .touch-mode .touch-only button,.pad-nub { transition:none; }
  .touch-mode .touch-only button.is-held,.touch-mode .touch-only button:active:not(:disabled) { transform:none; }
  #touch-confirm.is-ready,.is-relabel,.is-relabel span,.touch-splat { animation:none; }
  .touch-splat { display:none; }
}
/* ---- horizontal: la hoja ocupa todo el alto y los útiles flotan sobre los márgenes, al alcance de los pulgares ---- */
body.touch-mode:not(.is-portrait) { --side:72px;--pad:112px;--edge-l:max(8px,env(safe-area-inset-left));--edge-r:max(8px,env(safe-area-inset-right)); }
.touch-mode:not(.is-portrait) #game-shell { display:block;position:relative;padding:0; }
.touch-mode:not(.is-portrait) #game-screen {
  position:absolute;width:auto;height:auto;top:max(4px,env(safe-area-inset-top));bottom:max(4px,env(safe-area-inset-bottom));
  left:calc(var(--edge-l) + var(--side));right:calc(var(--edge-r) + var(--side));
}
.touch-mode:not(.is-portrait) #touch-movement {
  position:absolute;z-index:6;left:0;top:30%;bottom:0;width:calc(var(--edge-l) + var(--side) + 24px);
  flex-direction:column;align-items:flex-start;justify-content:center;padding-left:var(--edge-l);box-sizing:border-box;
}
.touch-mode:not(.is-portrait) .touch-caption { display:none; }
.touch-mode:not(.is-portrait) #touch-pad { opacity:.84;transition:opacity 160ms ease,transform 200ms cubic-bezier(.3,1.6,.5,1); }
.touch-mode:not(.is-portrait) #touch-pad.is-floating,.touch-mode:not(.is-portrait) #touch-pad:has(.is-held) { opacity:1; }
#touch-pad.is-floating { transition:opacity 120ms ease !important; }
/* en combate, las fichas de las gotas ocupan el pie de la página: la cruceta y los botones suben por encima y la cruceta
   en reposo se aclara para no tapar el campo */
.touch-mode.in-battle:not(.is-portrait) #touch-movement { top:8%;bottom:26%; }
.touch-mode.in-battle:not(.is-portrait) #touch-actions { top:6%;bottom:24%;gap:6px; }
.touch-mode.in-battle:not(.is-portrait) #touch-pad:not(.is-floating):not(:has(.is-held)) { opacity:.6; }
.touch-mode:not(.is-portrait) #touch-actions {
  position:absolute;z-index:6;right:var(--edge-r);top:26%;bottom:max(8px,env(safe-area-inset-bottom));width:88px;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.touch-mode:not(.is-portrait) #touch-actions #touch-confirm { width:80px;height:80px;min-height:80px;opacity:.94; }
.touch-mode:not(.is-portrait) #touch-actions #touch-back { width:76px;min-height:52px;opacity:.94; }
.touch-mode:not(.is-portrait) #touch-actions [data-touch-action=swap],.touch-mode:not(.is-portrait) #touch-actions [data-touch-action=release] { width:76px;min-height:42px; }
.touch-mode:not(.is-portrait) #touch-actions button:disabled { opacity:.55; }
/* la pestaña «cuaderno» y el cajón de menús */
#touch-menu-toggle { display:none; }
.touch-mode:not(.is-portrait) #touch-menu-toggle {
  display:flex;align-items:center;justify-content:center;position:absolute;z-index:8;top:max(6px,env(safe-area-inset-top));left:var(--edge-l);
  width:52px;height:52px;padding:0;border:1px solid #b7a07c;border-left:6px solid #c08a4c;border-radius:3px 10px 10px 3px;cursor:pointer;
  background:linear-gradient(174deg,var(--paper) 0%,var(--paper-dk) 92%,#bca17a 93%);color:#6b4a2e;box-shadow:1px 3px 0 #07060c,inset 0 2px 0 #fff2d6;
  -webkit-tap-highlight-color:transparent;transition:transform 180ms cubic-bezier(.3,1.7,.5,1);
}
.touch-mode:not(.is-portrait) #touch-menu-toggle .touch-icon { width:22px;height:22px; }
.touch-mode.drawer-open:not(.is-portrait) #touch-menu-toggle { transform:translateX(4px) rotate(-4deg);color:#c05048; }
.touch-mode:not(.is-portrait) #touch-toolbar {
  position:absolute;z-index:9;top:calc(max(6px,env(safe-area-inset-top)) + 60px);left:var(--edge-l);display:flex;flex-direction:column;align-items:stretch;gap:4px;
  pointer-events:none;opacity:0;transform:translateX(-24px) rotate(-3deg);transform-origin:0 0;transition:opacity 150ms ease,transform 240ms cubic-bezier(.3,1.5,.5,1);
}
.touch-mode.drawer-open:not(.is-portrait) #touch-toolbar { pointer-events:auto;opacity:1;transform:none; }
.touch-mode:not(.is-portrait) #touch-toolbar button {
  min-width:156px;min-height:44px;justify-content:flex-start;padding:4px 12px;border-radius:3px 12px 12px 3px;border-top:1px solid #b7a07c;border-left:6px solid var(--paint);
  box-shadow:1px 3px 0 #07060c,inset 0 2px 0 #fff2d6;transform-origin:0 50%;
}
.touch-mode:not(.is-portrait) #touch-toolbar button:disabled { border-top:1px dashed #5b5468;border-left:6px dashed #5b5468; }
.touch-mode:not(.is-portrait) #touch-toolbar button.is-held,.touch-mode:not(.is-portrait) #touch-toolbar button:active:not(:disabled) { transform:translateX(4px) scale(.97); }
.touch-mode.drawer-open:not(.is-portrait) #game-screen::after { content:'';position:absolute;inset:0;background:rgba(11,9,18,.35);pointer-events:none; }
@media (max-height:360px) and (orientation:landscape) {
  body.touch-mode:not(.is-portrait) { --pad:100px;--side:64px; }
  .touch-mode:not(.is-portrait) #touch-actions #touch-confirm { width:68px;height:68px;min-height:68px; }
  .touch-mode:not(.is-portrait) #touch-actions #touch-confirm b { font-size:26px; }
  .touch-mode:not(.is-portrait) #touch-actions #touch-back { min-height:46px; }
  .touch-mode:not(.is-portrait) #touch-actions button span { font-size:16px; }
}
@media (min-height:420px) and (orientation:landscape) {
  body.touch-mode:not(.is-portrait) { --pad:124px;--side:80px; }
  .touch-mode:not(.is-portrait) #touch-actions #touch-confirm { width:88px;height:88px; }
}
/* primera vez en el mapa: un pulgar que empuja la palanca y un toque que late sobre la hoja */
.coach { display:none;position:absolute;pointer-events:none;z-index:7; }
.touch-coach .coach { display:block; }
.coach i { position:absolute;display:block;border-radius:50%; }
.coach-pad { left:calc(var(--edge-l,8px) + var(--pad) / 2 - 16px);top:50%;width:32px;height:32px;margin-top:-16px; }
.touch-mode.is-portrait .coach-pad { left:calc(50% - 16px); }
.coach-pad i { inset:0;background:radial-gradient(circle at 40% 35%,#fff8e6 0 18%,rgba(255,248,230,.55) 20% 55%,transparent 58%);animation:coach-push 1.6s ease-in-out infinite; }
.coach-tap { left:68%;top:52%;width:34px;height:34px;margin:-17px 0 0 -17px; }
.coach-tap i { inset:0;border:3px solid rgba(255,248,230,.9);box-shadow:0 0 0 2px rgba(11,9,18,.35);animation:coach-tap 1.4s ease-out infinite; }
.coach-tap::after { content:'';position:absolute;left:12px;top:12px;width:10px;height:10px;border-radius:50%;background:#fff8e6;box-shadow:0 0 0 2px rgba(11,9,18,.35);animation:coach-dot 1.4s ease-out infinite; }
@keyframes coach-push { 0%,100% { transform:translate(0,0) scale(1);opacity:.9; } 25% { transform:translate(22px,0) scale(.92); } 50% { transform:translate(0,-22px) scale(.92); } 75% { transform:translate(-22px,0) scale(.92); } }
@keyframes coach-tap { 0% { transform:scale(.4);opacity:0; } 30% { opacity:1; } 100% { transform:scale(1.8);opacity:0; } }
@keyframes coach-dot { 0%,60% { transform:scale(1);opacity:1; } 30% { transform:scale(.7); } 100% { opacity:0; } }
.touch-mode.ui-still .coach i,.touch-mode.ui-still .coach-tap::after { animation:none; }
@media (prefers-reduced-motion:reduce) { .coach i,.coach-tap::after,#touch-toolbar,#touch-pad { animation:none;transition:none; } }

/* ---- PWA: notas de papel pegadas con cinta (instalar, sin conexión, página nueva) y la hoja que se pasa al actualizar ---- */
#pwa-note {
  position:fixed;z-index:30;left:50%;top:max(10px,env(safe-area-inset-top));width:min(360px,calc(100vw - 28px));box-sizing:border-box;
  padding:14px 16px 12px 44px;border-radius:3px 6px 4px 5px;color:#392c3f;font:16px/1.25 'Chromara Cuaderno',system-ui,sans-serif;-webkit-font-smoothing:none;
  background:repeating-linear-gradient(180deg,transparent 0 19px,rgba(104,139,194,.22) 19px 20px) 0 34px/100% 20px,linear-gradient(174deg,#f7ecd0,#e8d6ae);
  box-shadow:0 2px 0 #07060c,0 12px 26px rgba(0,0,0,.5);transform:translate(-50%,-140%) rotate(-2deg);opacity:0;pointer-events:none;
  transition:transform 380ms cubic-bezier(.3,1.5,.5,1),opacity 200ms ease;
}
#pwa-note.is-shown { transform:translate(-50%,0) rotate(-1deg);opacity:1;pointer-events:auto; }
#pwa-note.is-gone { transform:translate(-50%,-30px) rotate(2deg);opacity:0;transition:transform 260ms ease-in,opacity 260ms ease-in; }
#pwa-note::before { content:'';position:absolute;left:50%;top:-8px;width:64px;height:16px;transform:translateX(-50%) rotate(3deg);background:rgba(236,222,178,.85);box-shadow:0 1px 0 rgba(0,0,0,.2); }
#pwa-note::after { content:'';position:absolute;left:30px;top:0;bottom:0;width:1px;background:rgba(216,80,90,.45); }
#pwa-note strong { display:block;font:16px/1.1 'Chromara Rotulo','Chromara Cuaderno',system-ui,sans-serif;margin-bottom:5px;color:#2a1f30; }
#pwa-note p { margin:0;line-height:20px; }
.touch-mode.is-portrait #pwa-note { top:auto;bottom:calc(var(--pad) + 64px + 26px + max(12px,env(safe-area-inset-bottom)));transform:translate(-50%,40px) rotate(-2deg); }
.touch-mode.is-portrait #pwa-note.is-shown { transform:translate(-50%,0) rotate(-1deg); }
.touch-mode.is-portrait #pwa-note.is-gone { transform:translate(-50%,24px) rotate(2deg); }
#pwa-note .pwa-drop { position:absolute;left:10px;top:15px;width:13px;height:16px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:radial-gradient(circle at 35% 35%,#fff4c8 0 14%,transparent 16%),#e8b04a;box-shadow:0 1px 0 #7a5420; }
#pwa-note[data-type=update] .pwa-drop { background:radial-gradient(circle at 35% 35%,#dbe7fb 0 14%,transparent 16%),#5d86cc;box-shadow:0 1px 0 #27427a; }
#pwa-note[data-type=offline] .pwa-drop { background:radial-gradient(circle at 35% 35%,#dff3e4 0 14%,transparent 16%),#4f9a6c;box-shadow:0 1px 0 #24583a; }
#pwa-note .pwa-buttons { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px; }
#pwa-note .pwa-buttons:empty { display:none; }
#pwa-note button {
  min-height:44px;padding:6px 12px;border:1px solid #b7a07c;border-radius:3px 6px 4px 3px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:16px/1.1 'Chromara Cuaderno',system-ui,sans-serif;-webkit-font-smoothing:none;color:#392c3f;background:#efe2c2;box-shadow:1px 3px 0 #8f7a58;
  transition:transform 160ms cubic-bezier(.3,1.7,.5,1);
}
#pwa-note button.is-main { background:linear-gradient(170deg,#f2c160,#d49b3c);border-color:#7a5420;color:#3a2a1c;box-shadow:1px 3px 0 #5d4126; }
#pwa-note button.is-warning { background:linear-gradient(170deg,#ea8a80,#c0504a);border-color:#7a2a2a;color:#fff4ea;box-shadow:1px 3px 0 #5a1a1a; }
#pwa-note button:active { transform:translateY(2px) scale(.96); }
#pwa-note .pwa-share { display:inline-block;width:14px;height:16px;vertical-align:-3px;border:2px solid #5d86cc;border-top:none;border-radius:0 0 2px 2px;position:relative;margin:0 2px; }
#pwa-note .pwa-share::before { content:'';position:absolute;left:4px;top:-8px;width:2px;height:12px;background:#5d86cc; }
#pwa-note .pwa-share::after { content:'';position:absolute;left:1px;top:-8px;width:6px;height:6px;border-left:2px solid #5d86cc;border-top:2px solid #5d86cc;transform:rotate(45deg);box-sizing:border-box;left:2px; }
body.pwa-turning::after {
  content:'';position:fixed;inset:0;z-index:40;pointer-events:all;background:linear-gradient(100deg,#0b0912 0 48%,#1e1828 50%,#f4e7c8 51%,#e1cca2 100%);background-size:260% 100%;
  animation:pwa-turn 700ms cubic-bezier(.6,0,.3,1) forwards;
}
@keyframes pwa-turn { from { background-position:100% 0; } to { background-position:0 0; } }
.is-standalone #touch-fullscreen { display:none !important; }
.ui-still #pwa-note,.ui-still #pwa-note button { transition:none; }
@media (prefers-reduced-motion:reduce) { #pwa-note,#pwa-note button { transition:none; } body.pwa-turning::after { animation:none;background:#0b0912; } }

/* ==== Los útiles pintados (sprites generados en mobile.js con la paleta del juego) ==== */
body.touch-mode .touch-only button[data-touch-action],body.touch-mode #touch-pad button { image-rendering:pixelated;image-rendering:crisp-edges; }
/* A: el godet con la pintura del líder; su palabra va en una tira de cinta de carrocero */
body.touch-mode #touch-actions #touch-confirm {
  border:0;border-radius:50%;background:var(--art-a) center/100% 100% no-repeat;box-shadow:0 6px 0 -1px rgba(7,6,12,.85),0 10px 16px rgba(0,0,0,.45);color:#fff8e6;justify-content:center;
}
body.touch-mode #touch-actions #touch-confirm.is-held,body.touch-mode #touch-actions #touch-confirm:active { background-image:var(--art-a-held);transform:translateY(4px) scale(.94,.9);box-shadow:0 2px 0 -1px rgba(7,6,12,.85); }
body.touch-mode #touch-actions #touch-confirm.is-ready { animation:touch-pan-ready 1.2s ease-in-out infinite; }
@keyframes touch-pan-ready { 0%,100% { filter:none; } 50% { filter:brightness(1.12) drop-shadow(0 0 6px color-mix(in srgb,var(--lead,#f2c160) 70%,transparent)); } }
body.touch-mode #touch-actions button b {
  position:absolute;left:-4px;top:-4px;width:22px;height:22px;display:flex!important;align-items:center;justify-content:center;border-radius:50%;
  font:16px/1 'Chromara Rotulo','Chromara Cuaderno',system-ui,sans-serif!important;color:#241e32;background:#f7efd6;box-shadow:0 0 0 2px #241e32,0 2px 0 2px #07060c;text-shadow:none!important;
}
body.touch-mode #touch-actions button span {
  position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) rotate(-2deg);padding:3px 8px 2px;margin:0!important;font-size:16px;line-height:1;color:#392c3f;white-space:nowrap;
  background:linear-gradient(180deg,rgba(244,232,196,.97),rgba(226,208,164,.97));box-shadow:0 1px 0 rgba(0,0,0,.35);
  -webkit-mask:linear-gradient(90deg,transparent 0 1px,#000 1px calc(100% - 1px),transparent calc(100% - 1px)),repeating-linear-gradient(180deg,#000 0 2px,rgba(0,0,0,.85) 2px 3px);
}
body.touch-mode #touch-actions #touch-confirm span { bottom:-4px; }
/* B: la goma de las magias, rosa y azul con su funda de cartón */
body.touch-mode #touch-actions #touch-back {
  border:0;border-radius:0;background:var(--art-b) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 5px 0 rgba(7,6,12,.85));min-height:56px;aspect-ratio:38/26;height:auto;
}
body.touch-mode #touch-actions #touch-back.is-held,body.touch-mode #touch-actions #touch-back:active { transform:translateY(3px) scale(1.08,.86) rotate(-3deg);filter:drop-shadow(0 2px 0 rgba(7,6,12,.85)); }
/* Y y X: pastillas de acuarela en su bandeja */
body.touch-mode #touch-actions [data-touch-action=swap],body.touch-mode #touch-actions [data-touch-action=release] {
  border:0;border-radius:0;box-shadow:none;background:var(--art-y) center/contain no-repeat;filter:drop-shadow(0 4px 0 rgba(7,6,12,.85));aspect-ratio:26/18;height:auto;min-height:40px;
}
body.touch-mode #touch-actions [data-touch-action=release] { background-image:var(--art-x); }
body.touch-mode #touch-actions [data-touch-action=swap]:not(:disabled),body.touch-mode #touch-actions [data-touch-action=release]:not(:disabled) { background-color:transparent;border:0; }
body.touch-mode #touch-actions [data-touch-action=swap].is-held,body.touch-mode #touch-actions [data-touch-action=release].is-held { transform:translateY(3px) scale(.94);filter:drop-shadow(0 1px 0 rgba(7,6,12,.85)); }
/* lo que no se puede usar: boceto a lápiz */
body.touch-mode #touch-actions button:disabled { filter:grayscale(1) contrast(.55) brightness(1.25) drop-shadow(0 2px 0 rgba(7,6,12,.5));opacity:.5;border:0;background-color:transparent; }
body.touch-mode #touch-actions button:disabled span { color:var(--graphite); }
/* la cruceta: la paleta de madera, cuatro pegotes de pintura y la gota del líder */
body.touch-mode #touch-pad { background:var(--art-pad) center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 6px 0 #1a121f) drop-shadow(0 10px 12px rgba(0,0,0,.4));image-rendering:pixelated; }
body.touch-mode #touch-pad button { border:0;border-radius:50%;background:var(--art-dab) center/100% 100% no-repeat;box-shadow:none;image-rendering:pixelated;min-height:0; }
body.touch-mode #touch-pad button.is-held { background-image:var(--art-dab-held);transform:scale(1.12,.9); }
body.touch-mode #touch-pad button i { filter:none; }
body.touch-mode #touch-pad button.is-held i { border-color:transparent!important; }
body.touch-mode #touch-pad [data-touch-direction=up].is-held i { border-bottom-color:#fff8e6!important; }
body.touch-mode #touch-pad [data-touch-direction=down].is-held i { border-top-color:#fff8e6!important; }
body.touch-mode #touch-pad [data-touch-direction=left].is-held i { border-right-color:#fff8e6!important; }
body.touch-mode #touch-pad [data-touch-direction=right].is-held i { border-left-color:#fff8e6!important; }
body.touch-mode .pad-center { background:radial-gradient(circle at 50% 55%,#3a2a22 0 55%,#241a16 70%);box-shadow:inset 0 2px 0 #140f1a,0 1px 0 #e6be83; }
body.touch-mode .pad-nub { background:var(--art-nub) center/100% 100% no-repeat;box-shadow:none;image-rendering:pixelated;border-radius:0;left:14%;top:4%;width:72%;height:88%;filter:drop-shadow(0 2px 0 #140f1a); }
/* en vertical, el fondo de los controles es el estuche violeta del juego, con su cremallera */
body.touch-mode.is-portrait #game-shell::before {
  background:
    repeating-linear-gradient(90deg,#d8d2e2 0 3px,#8c8ab0 3px 4px,transparent 4px 6px) 26px 11px/calc(100% - 52px) 5px no-repeat,
    linear-gradient(#3b2d4d,#3b2d4d) 22px 10px/calc(100% - 44px) 7px no-repeat,
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.08),transparent 60%),
    repeating-linear-gradient(45deg,#6b4a8c 0 2px,#62447f 2px 4px),repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px);
  box-shadow:inset 0 0 0 2px #2a1e38,inset 0 0 0 6px #7a58a0,inset 0 3px 18px rgba(0,0,0,.45),0 6px 0 #0b0912;
  outline:2px dashed rgba(236,222,250,.28);outline-offset:-13px;
}
body.touch-mode.is-portrait .touch-caption { color:#e8dcf4; }
.touch-mode.ui-still #touch-confirm.is-ready { animation:none; }
@media (prefers-reduced-motion:reduce) { body.touch-mode #touch-actions #touch-confirm.is-ready { animation:none; } }