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; 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; }


/* touchpad1: mobile touchscreen + gamepad-friendly HUD controls */
html, body, #shell, #gameCanvas { touch-action: none; -webkit-user-select: none; user-select: none; }
#touchControls{
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
  color: #f7edcf;
  opacity: 0;
  display: none;
  transition: opacity .2s ease;
}
@media (hover: none), (pointer: coarse), (max-width: 900px){
  #touchControls{ opacity: 1; display: block; }
  #helpPanel{ display: none !important; }
}

.touch-start{
  position: absolute;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%);
  min-width: 178px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid rgba(247,237,207,.82);
  color:#ffe09a;
  background: linear-gradient(145deg, rgba(126,39,26,.94), rgba(13,8,5,.9));
  box-shadow: 0 4px 0 #050403, 0 0 24px rgba(216,167,66,.22), inset 0 0 18px rgba(247,196,100,.16);
  font: 800 13px/1 Georgia, "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}

#touchControls button, #touchMove{
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.touch-stick{
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 2px solid rgba(247,237,207,.68);
  background: radial-gradient(circle at 45% 40%, rgba(92,26,22,.45), rgba(8,5,4,.56));
  box-shadow: 0 0 0 4px rgba(5,4,3,.45), inset 0 0 28px rgba(0,0,0,.45);
}
.touch-stick-knob{
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin-left: -29px; margin-top: -29px;
  border-radius: 50%;
  background: radial-gradient(circle, #f0c45e, #6b1e19 74%);
  border: 2px solid #090604;
  box-shadow: 0 5px 18px rgba(0,0,0,.55);
}
.touch-stick span{
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .75;
}
.touch-buttons{
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 74px);
  gap: 9px;
  align-items: end;
}
.touch-buttons button, .touch-element-row button{
  min-height: 52px;
  border-radius: 18px;
  border: 2px solid rgba(247,237,207,.72);
  color: #f7edcf;
  background: linear-gradient(145deg, rgba(72,22,18,.82), rgba(11,7,5,.82));
  box-shadow: 0 4px 0 #050403, inset 0 0 18px rgba(247,196,100,.10);
  font: 700 12px/1 Georgia, "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.touch-buttons button.primary{ background: linear-gradient(145deg, rgba(126,39,26,.92), rgba(31,12,8,.9)); color:#ffe09a; }
.touch-buttons button.small{ min-height: 42px; font-size: 10px; opacity: .88; }
.touch-buttons button.active, .touch-element-row button.active{
  transform: translateY(3px);
  box-shadow: 0 1px 0 #050403, inset 0 0 22px rgba(247,196,100,.32);
  border-color: #f3c464;
}
.touch-element-row{
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  align-items: center;
  pointer-events: none;
}
.touch-element-row button{ pointer-events: auto; min-width: 42px; min-height: 38px; border-radius: 13px; font-size: 10px; }
.touch-element-row button:first-child{ min-width: 104px; }
@media (orientation: portrait){
  #gameCanvas { width: 100vw; height: 56.25vw; align-self: start; margin-top: 8vh; }
  .touch-stick{ width: 132px; height: 132px; }
  .touch-buttons{ grid-template-columns: repeat(2, 72px); }
  .touch-element-row{ bottom: calc(max(18px, env(safe-area-inset-bottom)) + 164px); }
}
@media (max-width: 700px){
  .touch-stick{ width: 116px; height: 116px; }
  .touch-stick-knob{ width: 48px; height: 48px; margin-left:-24px; margin-top:-24px; }
  .touch-buttons{ grid-template-columns: repeat(2, 62px); gap: 7px; }
  .touch-buttons button{ min-height: 44px; border-radius: 15px; font-size: 10px; }
  .touch-buttons button.small{ min-height: 36px; font-size: 9px; }
  .touch-element-row button{ min-width: 36px; min-height: 34px; }
  .touch-element-row button:first-child{ min-width: 82px; }
}


/* touchpad2: keep mobile controls separated and add explicit start/confirm */
@media (hover: none), (pointer: coarse), (max-width: 900px){
  .touch-buttons{
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(2, minmax(54px, 66px));
    gap: 7px;
  }
  .touch-buttons button{ min-height: 42px; border-radius: 14px; font-size: 10px; padding: 0 5px; }
  .touch-buttons button.small{ min-height: 34px; font-size: 9px; }
  .touch-element-row{
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 166px);
    transform: none;
    gap: 5px;
  }
  .touch-element-row button{ min-width: 34px; min-height: 32px; border-radius: 11px; font-size: 9px; padding: 0 5px; }
  .touch-element-row button:first-child{ min-width: 74px; }
}
@media (orientation: portrait) and (hover: none), (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (max-width: 900px){
  .touch-start{ top: calc(max(10px, env(safe-area-inset-top)) + 2px); min-height: 42px; min-width: 156px; font-size: 12px; }
  .touch-stick{ left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: 112px; height: 112px; }
  .touch-buttons{ grid-template-columns: repeat(2, 58px); gap: 6px; }
  .touch-buttons button{ min-height: 38px; font-size: 9px; }
  .touch-buttons button.small{ min-height: 31px; font-size: 8px; }
  .touch-element-row{ bottom: calc(max(12px, env(safe-area-inset-bottom)) + 146px); }
  .touch-element-row button{ min-width: 30px; min-height: 29px; font-size: 8px; }
  .touch-element-row button:first-child{ min-width: 62px; }
}
@media (max-height: 480px) and (orientation: landscape){
  .touch-start{ top: max(8px, env(safe-area-inset-top)); min-height: 36px; min-width: 142px; font-size: 11px; }
  .touch-stick{ width: 104px; height: 104px; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .touch-stick-knob{ width: 44px; height: 44px; margin-left:-22px; margin-top:-22px; }
  .touch-buttons{ grid-template-columns: repeat(4, 54px); gap: 6px; }
  .touch-buttons button{ min-height: 36px; border-radius: 12px; font-size: 8px; }
  .touch-buttons button.small{ min-height: 30px; font-size: 8px; }
  .touch-element-row{ right: max(12px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 82px); }
}

/* Level Editor entry point on the home screen */
#editorLink{
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 14px;
  letter-spacing: .04em;
  color: #f3c464;
  text-decoration: none;
  background: rgba(12,8,5,.78);
  border: 2px solid #9d7b3b;
  border-radius: 10px;
  box-shadow: 0 2px 0 #000;
  pointer-events: auto;
}
#editorLink:hover{ color: #fff; border-color: #f3c464; background: rgba(40,22,12,.9); }
/* Hide on coarse/small screens where the editor needs a mouse + room to work */
@media (hover: none), (pointer: coarse), (max-width: 900px){
  #editorLink{ display: none; }
}

/* ===== mobile control redesign: Xbox-diamond main buttons + element column ===== */
.touch-buttons{
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  grid-template-columns: none;          /* cancel the old 2-col grid */
  background: none; padding: 0; width: auto;
}
/* action row sits over the ABXY cluster, the 3 buttons spread evenly across its width */
.touch-top-row{ display: flex; gap: 8px; width: 220px; justify-content: space-between; }
.touch-top-row button.act{ flex: 1; min-height: 42px; font-size: 11px; border-radius: 13px; padding: 0 4px; }
.touch-main{ display: flex; align-items: center; gap: 12px; }
.touch-elements{ display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.touch-elements button{ min-height: 33px; min-width: 52px; border-radius: 12px; font-size: 11px; padding: 0 6px; }
.touch-elements .elem-hold{ min-height: 38px; font-size: 10px; letter-spacing: .3px; }
/* Xbox-style cluster: four large DIAMOND-shaped face buttons arranged in a diamond */
.touch-diamond{ position: relative; width: 220px; height: 220px; flex: 0 0 auto; }
.touch-diamond .dia{
  position: absolute; width: 104px; height: 104px; min-height: 0; padding: 0; border: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);   /* each button is a diamond */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1.05; letter-spacing: .5px; color: #0a0705;
  box-shadow: none;
}
/* Powers in a slight arc above the diamond; round chips, ends nudged down.
   (.touch-buttons is already position:absolute above — that's the containing block for the
   absolutely-placed context + restart buttons, so we must NOT override it to relative.) */
.touch-powers{ display: flex; gap: 9px; align-items: flex-end; margin-bottom: 4px; }
.touch-powers .pw{ width: 46px; height: 46px; min-height: 0; border-radius: 50%; font-size: 14px; font-weight: 700; padding: 0; }
.touch-powers .pw:nth-child(1), .touch-powers .pw:nth-child(5){ transform: translateY(12px); }
.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; }
/* Contextual interact button — shown only when near an NPC / door / examinable */
.touch-context{ position: absolute; left: -100px; top: 96px; width: 86px; height: 54px; min-height: 0; border-radius: 15px;
  font-size: 13px; font-weight: 800; letter-spacing: .6px; display: none;
  background: linear-gradient(145deg, rgba(40,26,12,.96), rgba(12,8,5,.92)); color:#f3c464; border: 2px solid #9d7b3b; }
.touch-context.show{ display: flex; align-items: center; justify-content: center; }
.touch-context.active{ filter: brightness(1.3); transform: scale(.93); }
/* Tiny restart in the cluster's top-right corner */
.touch-mini{ position: absolute; right: -2px; top: -10px; width: 40px; height: 40px; min-height: 0; border-radius: 50%; font-size: 17px; opacity: .8; padding: 0; }
.touch-mini.active{ filter: brightness(1.3); transform: scale(.93); }
.touch-diamond .dia small{ font-size: 9px; font-weight: 700; letter-spacing: .4px; margin-top: 2px; opacity: .82; }
.touch-diamond .d-top{ top: 0; left: 58px; }            /* Y */
.touch-diamond .d-bottom{ bottom: 0; left: 58px; }      /* A */
.touch-diamond .d-left{ left: 0; top: 58px; }           /* X */
.touch-diamond .d-right{ right: 0; top: 58px; }         /* B */
.touch-diamond .y{ background: radial-gradient(circle at 50% 38%, #ffe14d, #c79a17); color:#3a2c00; }  /* Y = heavy */
.touch-diamond .b{ background: radial-gradient(circle at 50% 38%, #ff5a4d, #b41f12); color:#2a0606; }  /* B = dodge */
.touch-diamond .x{ background: radial-gradient(circle at 50% 38%, #4db5ff, #1466b4); color:#03162a; }  /* X = light */
.touch-diamond .a{ background: radial-gradient(circle at 50% 38%, #5ed47a, #1f9a3e); color:#04220f; }  /* A = jump */
.touch-diamond .dia.active{ filter: brightness(1.22); transform: scale(.93); }
@media (max-width: 430px), (max-height: 460px){
  .touch-top-row{ width: 188px; }
  .touch-diamond{ width: 188px; height: 188px; }
  .touch-diamond .dia{ width: 90px; height: 90px; font-size: 11px; }
  .touch-diamond .d-top, .touch-diamond .d-bottom{ left: 49px; }
  .touch-diamond .d-left, .touch-diamond .d-right{ top: 49px; }
  .touch-elements button{ min-width: 46px; min-height: 30px; font-size: 10px; }
}
/* Landscape on a phone: controls were eating the screen — shrink them and make the whole
   overlay see-through so the game stays visible (press still brightens for feedback). */
@media (orientation: landscape) and (max-height: 540px){
  #touchControls{ opacity: .5; }
  .touch-stick{ width: 96px; height: 96px; }
  .touch-diamond{ width: 162px; height: 162px; }
  .touch-diamond .dia{ width: 78px; height: 78px; font-size: 10px; }
  .touch-diamond .dia small{ font-size: 8px; }
  .touch-diamond .d-top, .touch-diamond .d-bottom{ left: 42px; }
  .touch-diamond .d-left, .touch-diamond .d-right{ top: 42px; }
  .touch-top-row{ width: 162px; }
  .touch-top-row button.act{ min-height: 32px; font-size: 9px; border-radius: 10px; }
  .touch-elements button{ min-height: 27px; min-width: 40px; font-size: 9px; }
  .touch-elements .elem-hold{ min-height: 30px; font-size: 9px; }
  .touch-diamond .dia.active{ filter: brightness(1.5); }
}

/* ===== Top-right links (Community / Account / Editor) ===== */
#topLinks{
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 50;
  display: flex; gap: 8px; align-items: center;
  transition: opacity .3s ease;
}
#topLinks #editorLink{ position: static; top: auto; right: auto; }
#communityLink, #accountChip{
  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;
  background: rgba(12,8,5,.78); border: 2px solid #9d7b3b; border-radius: 10px;
  box-shadow: 0 2px 0 #000;
}
#communityLink:hover, #accountChip:hover{ color: #fff; border-color: #f3c464; background: rgba(40,22,12,.9); }

/* ===== 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; }