html, body { margin: 0; width: 100%; height: 100%; background: #14100d; overflow: hidden; font-family: Georgia, "Times New Roman", serif; color: #f3e7c8; }
#shell { width: 100vw; height: 100vh; height: 100dvh; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 50% 40%, #352417, #100d0b 70%); }
#gameCanvas { box-sizing: border-box; width: min(calc(100vw - 22px), calc(177.78vh - 39px)); height: min(calc(56.25vw - 12.4px), calc(100vh - 22px)); image-rendering: auto; border: 4px solid #050403; box-shadow: 0 0 0 6px #6b1e19, 0 20px 80px #000; background: #21170f; }
/* "Ink moment" — a high-contrast black-and-white woodcut impact frame snapped on for killing blows
   and special powers (held during hitstop), then snapped back to colour. Brings the cutscene look
   into combat without draining the colour from normal play. */
#gameCanvas.ink { filter: grayscale(1) contrast(1.7) brightness(1.06); }
#helpPanel { position: absolute; left: 18px; bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; max-width: min(900px, calc(100vw - 36px)); padding: 10px 14px; background: rgba(12,8,5,.72); border: 2px solid #9d7b3b; box-shadow: 0 2px 0 #000; font-size: 14px; letter-spacing: .02em; }
#helpPanel strong { color: #f3c464; }
#helpPanel span { white-space: nowrap; }


/* levelrefine1: keep controls from covering chapter/exploration plaque */
#helpPanel{
  bottom: 10px !important;
  left: 610px !important;
  right: 20px !important;
  width: auto !important;
  max-width: 640px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px 12px !important;
  align-items: center !important;
  opacity: .82 !important;
  font-size: 12px !important;
  pointer-events: none !important;
}
#helpPanel strong{ margin-right: 4px !important; }


/* gateaudio1: move browser help away from in-game mission plaque */
#helpPanel{
  top: 14px !important;
  bottom: auto !important;
  left: auto !important;
  right: 14px !important;
  max-width: 410px !important;
  padding: 8px 10px !important;
  opacity: .76 !important;
  font-size: 11px !important;
  gap: 5px 9px !important;
}


/* overnight2: compact external help so it never competes with in-game HUD */
#helpPanel{
  top: 72px !important;
  right: 14px !important;
  bottom: auto !important;
  left: auto !important;
  max-width: 250px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 8px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  opacity: .58 !important;
  padding: 7px 8px !important;
}
#helpPanel strong{ grid-column: 1 / -1 !important; }


/* =====================================================================================
   MOBILE / TOUCH CONTROLS  (rewritten as one coherent, state-driven system)
   Every cluster lives inside #touchControls; the mode controller in input.js sets
   body[data-mode] from the current scene, and the rules below reveal exactly the
   controls that scene needs — so the menu never shows combat buttons, gameplay always
   has pause, and nothing overlaps. Touch UI only appears on touch / small screens.
   ===================================================================================== */
html, body, #shell, #gameCanvas { touch-action: none; -webkit-user-select: none; user-select: none; }

#touchControls{
  position: fixed; inset: 0; z-index: 40; pointer-events: none; display: none;
  font-family: Georgia, "Times New Roman", serif; color: #f7edcf;
}
@media (hover: none), (pointer: coarse), (max-width: 900px){
  #touchControls{ display: block; }
  #helpPanel{ display: none !important; }   /* the desktop key-hint panel is meaningless on touch */
}
#touchControls button, #touchMove{ pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }

/* default: every cluster hidden — the mode rules below reveal the right ones */
#touchStart, #touchLoad, #touchTopHud, #touchMove, #touchButtons, #touchSysMenu, #touchNav{ display: none; }
body[data-mode="menu"]     #touchStart{ display: flex; }
body[data-mode="menu"]     #touchLoad{ display: flex; }
body[data-mode="playing"]  #touchTopHud{ display: flex; }
body[data-mode="playing"]  #touchMove{ display: block; }
body[data-mode="playing"]  #touchButtons{ display: flex; }
body[data-mode="paused"]   #touchSysMenu{ display: flex; }
body[data-mode="gameover"] #touchSysMenu{ display: flex; }
body[data-mode="gameover"] #touchSysMenu .sys-resume,
body[data-mode="gameover"] #touchSysMenu .sys-save{ display: none; }
body[data-mode="dialogue"] #touchNav{ display: flex; }
body[data-mode="menulist"] #touchNav{ display: flex; }
body[data-mode="cutscene"] #touchNav{ display: flex; }
/* Unmapped/unknown scenes (data-mode="other") still show nav so mobile users are never stranded.
   Up/Down are hidden — only confirm + back are exposed to allow escaping any unknown scene. */
body[data-mode="other"] #touchNav{ display: flex; }
body[data-mode="other"] #touchNav .nav-up,
body[data-mode="other"] #touchNav .nav-down{ display: none; }
/* cutscenes only need confirm; dialogue doesn't need a back button */
body[data-mode="cutscene"] #touchNav .nav-up,
body[data-mode="cutscene"] #touchNav .nav-down,
body[data-mode="cutscene"] #touchNav .nav-back,
body[data-mode="dialogue"] #touchNav .nav-back{ display: none; }

/* shared button finish */
.touch-hud-btn, .touch-sysmenu button, .touch-nav button, .touch-start{
  font-family: Georgia, serif; color: #f7edcf; border: 2px solid rgba(247,237,207,.72);
  background: linear-gradient(145deg, rgba(72,22,18,.9), rgba(11,7,5,.9));
  box-shadow: 0 3px 0 #050403, inset 0 0 18px rgba(247,196,100,.10);
}
.touch-hud-btn.active, .touch-sysmenu button.active, .touch-nav button.active{ transform: translateY(2px); filter: brightness(1.25); }

/* BEGIN / CONTINUE — big thumb target, bottom-centre of the title screen */
.touch-start{
  position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%);
  min-width: 240px; min-height: 62px; padding: 0 26px; border-radius: 999px;
  color: #ffe09a; font: 800 17px/1 Georgia, serif; text-transform: uppercase; letter-spacing: .08em;
  align-items: center; justify-content: center;
}

/* Load-slot buttons under BEGIN/CONTINUE on the title screen (touch — slot keys 1/2/3 were keyboard-only) */
#touchLoad{ position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); gap: 8px; }
.touch-load{ min-width: 88px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font: 700 13px/1 Georgia, serif; color: #f7edcf; border: 2px solid rgba(247,237,207,.6);
  background: linear-gradient(145deg, rgba(40,26,16,.9), rgba(11,7,5,.9));
  align-items: center; justify-content: center; }
.touch-load.active{ transform: translateY(2px); filter: brightness(1.25); }

/* top HUD: pause + satchel, top-right while playing */
.touch-tophud{ position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); gap: 10px; }
.touch-hud-btn{ width: 50px; height: 50px; border-radius: 14px; font-size: 18px; display: flex; align-items: center; justify-content: center; }

/* movement stick — bottom-left */
.touch-stick{
  position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 138px; height: 138px; border-radius: 50%; border: 2px solid rgba(247,237,207,.6);
  background: radial-gradient(circle at 45% 40%, rgba(92,26,22,.42), rgba(8,5,4,.5));
  box-shadow: 0 0 0 4px rgba(5,4,3,.4), inset 0 0 26px rgba(0,0,0,.42);
}
.touch-stick-knob{ position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: radial-gradient(circle, #f0c45e, #6b1e19 74%); border: 2px solid #090604; box-shadow: 0 5px 16px rgba(0,0,0,.5); }
.touch-stick span{ position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 11px; letter-spacing: .14em; opacity: .7; }

/* action cluster — bottom-right: powers row above the attack diamond, contextual button to its left */
.touch-buttons{ position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  flex-direction: column; align-items: flex-end; gap: 8px; }
.touch-powers{ display: flex; gap: 9px; align-items: flex-end; margin-right: 6px; }
.touch-powers .pw{ width: 44px; height: 44px; border-radius: 50%; font: 700 14px/1 Georgia, serif; color: #f7edcf;
  border: 2px solid rgba(247,237,207,.66); background: linear-gradient(145deg, rgba(72,22,18,.85), rgba(11,7,5,.85)); }
.touch-powers .pw:nth-child(1), .touch-powers .pw:nth-child(5){ transform: translateY(10px); }
.touch-powers .pw:nth-child(2), .touch-powers .pw:nth-child(4){ transform: translateY(3px); }
.touch-powers .sp{ background: linear-gradient(145deg, rgba(126,39,26,.95), rgba(31,12,8,.92)); color: #ffe09a; }
.touch-powers .pw.active{ filter: brightness(1.3); transform: scale(.92); }
.touch-diamond{ position: relative; width: 208px; height: 208px; }
.touch-diamond .dia{ position: absolute; width: 98px; height: 98px; border: none; padding: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 Georgia, serif; letter-spacing: .5px; color: #0a0705; }
.touch-diamond .d-top{ top: 0; left: 55px; } .touch-diamond .d-bottom{ bottom: 0; left: 55px; }
.touch-diamond .d-left{ left: 0; top: 55px; } .touch-diamond .d-right{ right: 0; top: 55px; }
.touch-diamond .y{ background: radial-gradient(circle at 50% 38%, #ffe14d, #c79a17); color: #3a2c00; }
.touch-diamond .b{ background: radial-gradient(circle at 50% 38%, #ff5a4d, #b41f12); color: #2a0606; }
.touch-diamond .x{ background: radial-gradient(circle at 50% 38%, #4db5ff, #1466b4); color: #03162a; }
.touch-diamond .a{ background: radial-gradient(circle at 50% 38%, #5ed47a, #1f9a3e); color: #04220f; }
.touch-diamond .dia.active{ filter: brightness(1.22); transform: scale(.93); }
/* contextual interact — appears just left of the diamond only when near an NPC / door / examinable */
.touch-context{ position: absolute; left: -96px; top: 80px; width: 84px; height: 52px; border-radius: 14px; display: none;
  font: 800 13px/1 Georgia, serif; letter-spacing: .5px; align-items: center; justify-content: center;
  color: #f3c464; border: 2px solid #9d7b3b; background: linear-gradient(145deg, rgba(40,26,12,.96), rgba(12,8,5,.92)); }
.touch-context.show{ display: flex; }
.touch-context.active{ filter: brightness(1.3); transform: scale(.93); }

/* pause / game-over menu — centred column of large tappable buttons */
.touch-sysmenu{ position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  flex-direction: column; gap: 12px; width: min(300px, 82vw); align-items: stretch; }
.touch-sysmenu button{ min-height: 56px; border-radius: 14px; font: 700 16px/1 Georgia, serif; letter-spacing: .04em; text-align: center; }
.touch-sysmenu .sys-resume{ color: #ffe09a; }

/* dialogue / list navigation — right edge, vertically centred */
.touch-nav{ position: absolute; right: max(12px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  flex-direction: column; gap: 10px; align-items: center; }
.touch-nav button{ width: 54px; height: 54px; border-radius: 50%; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.touch-nav .nav-ok{ color: #9bf0a8; }

/* ----- canvas sizing on mobile ----- */
/* Portrait gameplay: reserve a bottom band for the controls and centre the canvas in the space
   above it (so it reads as a framed view, not a tiny strip with a dead void). Menus get the full
   height (no combat controls), so the canvas sits centred and large. */
@media (orientation: portrait) and (max-width: 900px){
  /* Reserve a top band (for the pause/satchel HUD) and a bottom band (for the stick + action
     cluster), then centre the canvas in the space between — so the view sits in the UPPER half with
     clear gaps, never under the controls. Uses 100dvh (real visible height) so the mobile URL bar
     doesn't shove the canvas down into the buttons. */
  body[data-mode="playing"] #shell, body[data-mode="paused"] #shell,
  body[data-mode="gameover"] #shell, body[data-mode="dialogue"] #shell{ padding-top: 64px; padding-bottom: 300px; }
  /* Crop the 16:9 canvas to a 4:3 window in the in-world views so the scene fills more of the
     portrait screen. object-fit:cover keeps the hero centred and trims ~160 canvas-px off each
     side; the canvas HUD is inset by that margin (window.SUMI_HUD_INSET in ui.js) so nothing
     important gets clipped. Menus/cutscenes/lists stay full 16:9. */
  body[data-mode="playing"] #gameCanvas, body[data-mode="paused"] #gameCanvas,
  body[data-mode="gameover"] #gameCanvas, body[data-mode="dialogue"] #gameCanvas{
    width: min(calc(100vw - 10px), calc((100dvh - 380px) * 4 / 3));
    height: min(calc((100vw - 10px) * 3 / 4), calc(100dvh - 380px));
    max-width: none; object-fit: cover;
  }
  /* contextual interact (TALK/ENTER/LOOK): bottom-centre, raised just above the stick + attack
     cluster so it's within thumb reach but clear of both of them (and never on the left thumb or up
     at the top). position:fixed so left:50% is the viewport centre, not the right cluster's. */
  .touch-context{ position: fixed; left: 50%; right: auto; top: auto;
    bottom: 280px; transform: translateX(-50%); }
}
@media (orientation: portrait) and (max-width: 430px){
  body[data-mode="playing"] #shell, body[data-mode="paused"] #shell,
  body[data-mode="gameover"] #shell, body[data-mode="dialogue"] #shell{ padding-top: 58px; padding-bottom: 278px; }
  body[data-mode="playing"] #gameCanvas, body[data-mode="paused"] #gameCanvas,
  body[data-mode="gameover"] #gameCanvas, body[data-mode="dialogue"] #gameCanvas{
    width: min(calc(100vw - 10px), calc((100dvh - 352px) * 4 / 3));
    height: min(calc((100vw - 10px) * 3 / 4), calc(100dvh - 352px));
  }
  .touch-diamond{ width: 186px; height: 186px; }
  .touch-diamond .dia{ width: 88px; height: 88px; }
  .touch-diamond .d-top, .touch-diamond .d-bottom{ left: 49px; }
  .touch-diamond .d-left, .touch-diamond .d-right{ top: 49px; }
  .touch-stick{ width: 122px; height: 122px; }
  .touch-context{ bottom: 258px; }
}
/* Landscape on a phone: the canvas already fills the screen, so keep controls compact, tucked in
   the corners, and translucent so gameplay stays visible behind them. */
@media (orientation: landscape) and (max-height: 600px){
  body[data-mode="playing"] #touchControls{ opacity: .6; }
  .touch-stick{ width: 110px; height: 110px; }
  .touch-stick-knob{ width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .touch-diamond{ width: 168px; height: 168px; }
  .touch-diamond .dia{ width: 80px; height: 80px; font-size: 10px; }
  .touch-diamond .d-top, .touch-diamond .d-bottom{ left: 44px; }
  .touch-diamond .d-left, .touch-diamond .d-right{ top: 44px; }
  .touch-powers .pw{ width: 38px; height: 38px; font-size: 12px; }
  .touch-context{ left: -84px; top: 62px; width: 74px; height: 46px; }
  .touch-hud-btn{ width: 44px; height: 44px; }
  .touch-sysmenu{ bottom: 6%; }
}

/* =====================================================================================
   Top-right links (Community / Account / Editor) — visible only on the title & community
   screens (driven by body[data-mode]); never overlap the controls or the in-game HUD.
   ===================================================================================== */
#topLinks{
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  z-index: 50; display: flex; gap: 8px; align-items: center; transition: opacity .25s ease;
}
body[data-mode="menu"] #topLinks{ opacity: 1; pointer-events: auto; }
body:not([data-mode="menu"]) #topLinks{ opacity: 0; pointer-events: none; }
#topLinks #editorLink{ position: static; top: auto; right: auto; }
#communityLink, #accountChip, #editorLink{
  font-family: Georgia, "Times New Roman", serif;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; font-size: 14px; letter-spacing: .04em;
  color: #f3c464; cursor: pointer; text-decoration: none;
  background: rgba(12,8,5,.82); border: 2px solid #9d7b3b; border-radius: 10px; box-shadow: 0 2px 0 #000;
}
#communityLink:hover, #accountChip:hover, #editorLink:hover{ color: #fff; border-color: #f3c464; background: rgba(40,22,12,.92); }
/* the editor needs a mouse + room — hide its link on touch / small screens (Community + account stay) */
@media (hover: none), (pointer: coarse), (max-width: 900px){
  #editorLink{ display: none; }
  #communityLink, #accountChip{ padding: 8px 11px; font-size: 13px; }
}

/* ===== Account modal (sumi-e washi card over the canvas) ===== */
.sumi-modal{
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(10,7,5,.62), rgba(5,4,3,.86));
}
.sumi-modal.hidden{ display: none; }
.sumi-card{
  position: relative; width: min(440px, 90vw);
  font-family: Georgia, "Times New Roman", serif; color: #241006;
  background: linear-gradient(#efe1bb, #d9c391);
  border: 2px solid rgba(40,26,12,.6); border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), inset 0 0 0 4px rgba(122,31,24,.18);
  padding: 30px 30px 32px;
}
.sumi-x{
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px;
  border: none; background: transparent; color: #7a1f18; font-size: 18px; cursor: pointer; border-radius: 8px;
}
.sumi-x:hover{ background: rgba(122,31,24,.12); }
.sumi-body h2{ margin: 0 0 8px; color: #7a1f18; font-size: 26px; font-weight: normal; }
.sumi-sub{ margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: #3a2410; }
.sumi-input{
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px;
  font-family: Georgia, serif; color: #241006;
  background: rgba(255,250,238,.7); border: 2px solid rgba(122,31,24,.4); border-radius: 8px;
  margin-bottom: 14px; outline: none;
}
.sumi-input:focus{ border-color: #c41e3a; background: #fffaf0; }
.sumi-btn{
  width: 100%; padding: 12px 16px; font-size: 15px; font-family: Georgia, serif; cursor: pointer;
  color: #f3e9d2; background: #7a1f18; border: 2px solid #5e1611; border-radius: 9px; box-shadow: 0 2px 0 #000;
}
.sumi-btn:hover{ background: #8f2419; }
.sumi-btn:disabled{ opacity: .6; cursor: default; }
.sumi-btn.ghost{ color: #7a1f18; background: transparent; border-color: rgba(122,31,24,.4); box-shadow: none; margin-top: 10px; }
.sumi-note{ min-height: 18px; margin-top: 10px; font-size: 13px; color: #3f7d4a; }
.sumi-note.error{ color: #a3261b; }