/* MOCHI POP - interface */

:root {
  --grape-1:#20143a; --grape-2:#2b1b45; --grape-3:#3a2158; --grape-4:#4c2e72;
  --grape-5:#6b45a0;
  --cream:#fff3f6; --pink:#ff9ebc; --hot:#ff4d6d; --mint:#3ad17a;
  --lemon:#ffd23f;
  --text:#f4e9ff;          /* 13.9:1 on --grape-2 */
  --muted:#c9b6e8;         /*  7.9:1 */
  --dim:#a892d0;           /*  5.4:1 */
  --disp:'Press Start 2P','Courier New',monospace;
  --body:'VT323','Courier New',monospace;
  --tap:44px;
}

* { box-sizing:border-box; }

html,body {
  height:100%; margin:0;
  background:var(--grape-1);
  color:var(--text);
  font-family:var(--body);
  font-size:20px; line-height:1.4;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* the compositor sits behind the entire page, not just the board */
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
body.no-gl #gl { display:none; }
#app { position:fixed; inset:0; z-index:1; }

:focus-visible { outline:3px solid var(--lemon); outline-offset:3px; }

/* ---------- screens ---------- */
.screen {
  position:absolute; inset:0;
  display:none; flex-direction:column; align-items:center;
  justify-content:center; justify-content:safe center;
  gap:14px; padding:20px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  overflow-y:auto;
  background:radial-gradient(120% 90% at 50% 25%, rgba(58,33,88,.62), rgba(32,20,58,.80) 75%);
  animation:fade .22s ease-out both;
}
.screen.active { display:flex; }
@keyframes fade { from{opacity:0} to{opacity:1} }

/* ---------- title ---------- */
.title-art { line-height:0; }
#title-canvas { width:min(360px,80vw); height:auto; image-rendering:auto; }

.logo {
  margin:0; text-align:center; line-height:1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.logo .l1 {
  font-family:var(--disp); font-size:clamp(26px,7vw,52px);
  color:var(--cream);
  text-shadow:0 4px 0 var(--hot), 0 8px 0 #a01238, 0 10px 24px rgba(255,77,109,.5);
  letter-spacing:3px;
}
.logo .l2 {
  font-family:var(--disp); font-size:clamp(30px,9vw,66px);
  color:var(--lemon);
  text-shadow:0 4px 0 #b07d00, 0 8px 0 #6d4d00, 0 10px 26px rgba(255,210,63,.45);
  letter-spacing:4px;
}
.sub { margin:0; color:var(--muted); letter-spacing:2px; font-size:22px; }
.sub.small { font-size:19px; }

/* ---------- menus ---------- */
.menu { display:flex; flex-direction:column; align-items:center; gap:2px; }
.menu.compact { gap:0; }

.mi {
  position:relative; background:none; border:0; cursor:pointer;
  font-family:var(--disp); font-size:clamp(11px,2.1vw,15px);
  letter-spacing:1px; color:var(--muted);
  padding:12px 40px; min-height:var(--tap);
  transition:color .12s, transform .12s;
}
.mi:hover, .mi.sel { color:#fff; transform:scale(1.04); }
.mi.sel::before, .mi.sel::after {
  content:'\25CF'; position:absolute; top:50%; transform:translateY(-50%);
  color:var(--hot); font-size:9px;
  animation:blip .8s ease-in-out infinite;
}
.mi.sel::before { left:14px; }
.mi.sel::after { right:14px; }
@keyframes blip { 0%,100%{opacity:.3} 50%{opacity:1} }
.mi span { color:var(--lemon); }
.mi[disabled] { opacity:.35; cursor:default; }

.hint { margin:0; color:var(--dim); font-size:17px; letter-spacing:1px; }
.hint .k {
  display:inline-block; margin:0 4px; padding:1px 8px;
  border:1px solid var(--grape-5); border-radius:5px; color:var(--text);
}

.back-link {
  position:absolute; left:16px; top:14px;
  color:var(--dim); text-decoration:none; font-size:18px; letter-spacing:1px;
  padding:8px 10px; min-height:var(--tap); display:inline-flex; align-items:center;
}
.back-link:hover { color:var(--lemon); }

.head {
  margin:0; font-family:var(--disp); letter-spacing:2px;
  font-size:clamp(14px,3vw,22px); color:var(--cream);
  text-shadow:0 3px 0 var(--grape-4);
}
.head.small { font-size:clamp(10px,2vw,13px); color:var(--muted); }

/* ---------- panels ---------- */
.panel {
  width:min(620px,94vw);
  background:rgba(32,20,58,.72);
  border:2px solid var(--grape-5); border-radius:14px;
  padding:16px 18px;
}
.panel p { margin:0 0 10px; color:var(--muted); text-wrap:pretty; }
.panel p:last-child { margin-bottom:0; }
.panel .tip { color:var(--lemon); }
.dim { color:var(--dim); }
.small { font-size:18px; }

.credit-list { list-style:none; margin:0 0 10px; padding:0; }
.credit-list li {
  display:flex; justify-content:space-between; gap:12px;
  padding:6px 0; border-bottom:1px dashed rgba(107,69,160,.5);
}
.credit-list em { font-style:normal; color:var(--dim); text-align:right; }

/* ---------- controls table ---------- */
.controls {
  width:min(620px,94vw);
  display:grid; grid-template-columns:1fr auto; gap:2px 14px;
  background:rgba(32,20,58,.72);
  border:2px solid var(--grape-5); border-radius:14px; padding:14px 18px;
}
.controls .r { display:contents; }
.controls .a { color:var(--muted); padding:5px 0; }
.controls .b { text-align:right; padding:5px 0; }
.controls .b kbd {
  display:inline-block; margin-left:5px; padding:1px 8px;
  border:1px solid var(--grape-5); border-radius:5px;
  background:rgba(107,69,160,.22); color:var(--text);
  font-family:var(--body); font-size:18px;
}
.controls .b kbd.pad { border-color:var(--mint); color:#c6ffe0; background:rgba(58,209,122,.14); }

/* ---------- level select ---------- */
.level-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:8px; width:min(640px,94vw);
  max-height:56vh; overflow-y:auto; padding:4px;
}
.lv {
  position:relative; aspect-ratio:1;
  background:rgba(76,46,114,.5);
  border:2px solid var(--grape-5); border-radius:12px;
  color:var(--text); cursor:pointer;
  font-family:var(--disp); font-size:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:transform .12s, border-color .12s, background .12s;
}
.lv:hover, .lv.sel { border-color:var(--lemon); transform:translateY(-2px); background:rgba(107,69,160,.6); }
.lv .best { font-family:var(--body); font-size:15px; color:var(--mint); }
.lv.locked { opacity:.42; cursor:not-allowed; }
.lv.locked::after { content:'\1F512'; position:absolute; font-size:14px; }
.lv.locked .n, .lv.locked .best { visibility:hidden; }
.lv.done { border-color:var(--mint); }

/* ---------- game ---------- */
.screen.game { justify-content:flex-start; gap:8px; padding-top:8px; background:none; }

.hud {
  width:min(576px,96vw);
  display:grid; grid-template-columns:auto 1fr auto auto auto;
  align-items:center; gap:8px;
  background:rgba(32,20,58,.8);
  border:2px solid var(--grape-5); border-radius:12px;
  padding:7px 10px;
}
.hud-cell { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.hud-cell.wide { text-align:center; overflow:hidden; }
.hud-k { font-family:var(--disp); font-size:8px; letter-spacing:1px; color:var(--dim); }
.hud-cell b { font-size:23px; color:var(--text); font-weight:400; }
.hud-cell.wide .hud-k { font-size:9px; color:var(--lemon); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-btn {
  min-width:var(--tap); min-height:var(--tap);
  background:rgba(107,69,160,.35); border:2px solid var(--grape-5); border-radius:10px;
  color:var(--text); font-family:var(--disp); font-size:11px; cursor:pointer;
}
.hud-btn:hover { background:rgba(107,69,160,.7); }

.stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; width:100%; }
#scene { display:none; }
body.no-gl #scene {
  display:block; image-rendering:pixelated;
  max-width:100%; max-height:100%;
  border:2px solid var(--grape-5); border-radius:14px;
  touch-action:none;
}
/* the board's frame; the picture inside it is painted by the GL canvas behind */
#field {
  aspect-ratio:224 / 342;
  max-width:100%; max-height:100%;
  height:100%;
  border:2px solid var(--grape-5); border-radius:14px;
  touch-action:none;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
body.no-gl #field { display:none; }

.touch-row {
  width:min(576px,96vw);
  display:grid; grid-template-columns:1fr 1fr 1.6fr 1fr; gap:8px;
  padding-bottom:max(4px,env(safe-area-inset-bottom));
}
.touch-row button {
  min-height:52px;
  background:rgba(107,69,160,.35); border:2px solid var(--grape-5); border-radius:12px;
  color:var(--text); font-family:var(--disp); font-size:11px; cursor:pointer;
  touch-action:none; user-select:none;
}
.touch-row button:active { background:var(--hot); }
body.touch .touch-row[hidden] { display:grid; }

/* ---------- overlays ---------- */
.overlay {
  position:absolute; inset:0; z-index:20;
  display:none; align-items:center; justify-content:center;
  background:rgba(16,8,32,.82);
  padding:20px;
}
.overlay.show { display:flex; animation:fade .18s ease-out both; }
.card {
  width:min(460px,94vw); text-align:center;
  background:var(--grape-2);
  border:2px solid var(--grape-5); border-radius:16px;
  padding:22px 20px;
  display:flex; flex-direction:column; gap:12px; align-items:center;
  box-shadow:0 16px 50px rgba(0,0,0,.5);
}
.card h2 {
  margin:0; font-family:var(--disp); font-size:clamp(13px,3vw,19px);
  letter-spacing:2px; color:var(--cream);
}
.card h2.win { color:var(--mint); text-shadow:0 3px 0 #14572f; }
.card h2.lose { color:var(--hot); text-shadow:0 3px 0 #7c1029; }

.stat-rows { width:100%; }
.stat-rows div {
  display:flex; justify-content:space-between; gap:10px;
  padding:4px 0; border-bottom:1px dashed rgba(107,69,160,.5);
}
.stat-rows span { color:var(--muted); }
.stat-rows b { font-weight:400; color:var(--lemon); }

.toast {
  position:absolute; left:50%; bottom:24px; transform:translate(-50%,14px);
  z-index:30; pointer-events:none;
  background:rgba(32,20,58,.94); border:2px solid var(--grape-5); border-radius:10px;
  padding:8px 14px; font-size:18px; color:var(--text);
  opacity:0; transition:opacity .25s, transform .25s;
  max-width:90vw; text-align:center;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:560px) {
  .hud { grid-template-columns:auto 1fr auto auto; }
  .hud-cell.hide-sm { display:none; }
  .mi { padding:12px 30px; }
}
@media (max-height:620px) {
  #title-canvas { width:min(240px,54vw); }
  .logo .l1 { font-size:clamp(20px,5vw,34px); }
  .logo .l2 { font-size:clamp(24px,6vw,42px); }
  .screen { gap:8px; }
}