/* Phone layout and the on-screen controls. Loaded after style.css. */

:root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#view { touch-action: none; }

/* The kanji box, Go, Random and the level are for developers (?dev); players start at world 1 and follow the journey. */
body:not(.dev) #kanji-input, body:not(.dev) #picker button[type="submit"], body:not(.dev) #random, body:not(.dev) #level { display: none; }
#dialog, #toast, #message, #banner { z-index: 6; }

/* ---- menu button and collapsible picker ---- */
#menu-btn { position: fixed; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); z-index: 7; width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--accent); color: #222; font-size: 22px; line-height: 1; cursor: pointer; }
#picker { top: calc(10px + var(--safe-t)); left: calc(64px + var(--safe-l)); z-index: 7; max-width: calc(100vw - 80px); }
body:not(.menu-open) #picker { display: none; }
body.menu-open #picker { background: var(--panel); padding: 8px; border-radius: 10px; }
#picker button, #picker select { min-height: 40px; }
#settings-btn { display: inline-block; }

/* ---- the on-screen controls (shown on touch devices, or with the Settings switch) ---- */
#stick-zone, #touch-buttons { display: none; }
body.touch #stick-zone { display: block; position: fixed; left: 0; bottom: 0; width: 58vw; height: 52vh; height: 52dvh; z-index: 4; touch-action: none; user-select: none; -webkit-user-select: none; }
body.touch #stick-base { position: absolute; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); background: rgba(20, 22, 32, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.12s; }
body.touch #stick-zone.active #stick-base { opacity: 1; }
body.touch #stick-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 217, 90, 0.8); border: 2px solid #000; }
/* A faint hint of where the stick lives before the first touch. */
body.touch #stick-zone::after { content: ""; position: absolute; left: calc(26px + var(--safe-l)); bottom: calc(26px + var(--safe-b)); width: 116px; height: 116px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.22); pointer-events: none; }
body.touch #stick-zone.active::after { display: none; }

body.touch #touch-buttons { display: grid; position: fixed; right: calc(14px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); z-index: 4; grid-template-columns: repeat(2, 56px); grid-auto-rows: 56px; gap: 10px; align-items: center; justify-items: center; direction: ltr; }
.tb { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #000; background: rgba(20, 22, 32, 0.78); color: var(--text); font: 600 12px/1.1 system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; padding: 0; }
.tb.down { background: var(--accent); color: #222; transform: scale(0.94); }
.tb-big { grid-column: 1 / span 2; width: 84px; height: 84px; background: var(--accent); color: #222; font-size: 17px; }
.tb-big.down { background: #fff; }

body.touch #help { display: none; }
body:not(.touch) #touch-buttons { display: none; }

/* ---- narrow screens ---- */
@media (max-width: 720px) {
  #hud { top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); max-width: 52vw; padding: 6px 10px; }
  #biome { display: none; }
  #lights { font-size: 17px; }
  #live { display: none; }
  #lesson-chip { top: calc(52px + var(--safe-t)); right: calc(10px + var(--safe-r)); max-width: 60vw; font-size: 12px; min-height: 36px; z-index: 3; }
  #lesson-chip .where { display: none; }
  #banner { top: calc(120px + var(--safe-t)); max-width: 92vw; }
  body.hosted #provider { display: none; }
  .panel { width: 96vw; top: calc(56px + var(--safe-t)); transform: translate(-50%, 0); max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px - var(--safe-t)); padding: 12px 12px; }
  #dialog { width: 94vw; bottom: calc(190px + var(--safe-b)); max-height: 46vh; overflow-y: auto; }
  body:not(.touch) #dialog { bottom: calc(70px + var(--safe-b)); }
  #dialog-choices button, #dialog-choices li { min-height: 44px; }
  #toast { bottom: calc(200px + var(--safe-b)); max-width: 92vw; }
  #message { max-width: 92vw; }
  button, select, input { font-size: 16px; } /* 16px stops iOS zooming into a field */
  button.small { min-height: 40px; padding: 8px 14px; font-size: 15px; }
  .dex-word { grid-template-columns: minmax(0, 1fr) auto; }
  .words li { grid-template-columns: minmax(0, 1fr) auto; }
  .step { gap: 8px; }
  .step input[type="text"], .step input { min-width: 0; width: 100%; }
}

/* While the on-screen kana keypad is up, leave room for it under the panel. */
body.flick-open .panel { max-height: calc(100dvh - var(--flick-keypad-height, 300px) - 66px - var(--safe-t)); top: calc(56px + var(--safe-t)); transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #stick-base { transition: none; } }

/* ---- kana feedback and the settings panel ---- */
.kana-ok { color: #8fe388; font-size: 1.2em; margin: 0 1px; }
.kana-bad { color: #ff8a80; font-size: 1.2em; margin: 0 1px; text-decoration: underline wavy; }
.kana-tips { margin-top: 4px; color: var(--muted); font-size: 14px; }
.set-block { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.set-block h3 { margin: 0 0 4px; font-size: 16px; color: var(--accent); }
.savecode { font: 700 22px/1.3 ui-monospace, Consolas, monospace; letter-spacing: 0.06em; word-break: break-all; padding: 8px 10px; margin: 6px 0; background: rgba(255,255,255,0.07); border: 1px dashed var(--accent); border-radius: 8px; user-select: all; -webkit-user-select: all; }

/* ---- kana practice ---- */
.kana-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.kana-row { display: flex; flex-wrap: wrap; gap: 4px; }
.kana-row.locked { opacity: 0.45; }
.kana-cell { min-width: 44px; height: 44px; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: var(--text); font-size: 20px; cursor: pointer; }
.kana-cell.lv1 { background: rgba(255, 217, 90, 0.18); }
.kana-cell.lv2 { background: rgba(255, 217, 90, 0.4); color: #fff; }
.kana-cell.lv3 { background: rgba(143, 227, 136, 0.55); color: #10200f; }
.kana-peek { font-size: 26px; text-align: center; margin: 8px 0; color: var(--accent); }
.kana-prompt { font-size: 64px; line-height: 1.1; text-align: center; margin: 6px 0; }
.kana-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.kana-choice { min-height: 56px; font-size: 24px; border-radius: 10px; border: 2px solid var(--accent); background: var(--panel); color: var(--text); cursor: pointer; }
.kana-choice:disabled { opacity: 0.5; }
.backup-text { width: 100%; margin: 6px 0; padding: 8px; background: rgba(255,255,255,0.07); color: var(--text); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; font: 12px/1.3 ui-monospace, Consolas, monospace; }

/* The case book keeps its paragraphs; the gold line says who to talk to next. */
#gate .story { white-space: pre-line; }
#lead { position: fixed; top: 116px; right: 12px; z-index: 3; max-width: min(46vw, 420px); text-align: right; font-size: 13px; font-weight: bold; color: #2b2100; background: #ffd54a; border-radius: 8px; padding: 5px 10px; box-shadow: 0 1px 4px #0008; pointer-events: none; }
#lead[hidden] { display: none; }
@media (max-width: 760px) { #lead { top: calc(96px + var(--safe-t)); right: calc(10px + var(--safe-r)); max-width: 62vw; font-size: 12px; } }