:root{
  --bg:#06080b;
  --panel:#0b0f14;
  --edge:#18202c;
  --text:#d7e2f0;
  --muted:#7e90a9;
  --good:#52ffa9;
  --bad:#ff5e73;
  --warn:#ffd36b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(900px 500px at 20% 10%, #0b1220 0%, var(--bg) 55%, #040507 100%);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: 0.2px;
}

.wrap{max-width: 980px; margin:0 auto; padding: 18px;}
.top{display:flex; gap:16px; justify-content:space-between; align-items:flex-end; padding: 14px 14px 10px;}
.brand{display:flex; gap:12px; align-items:center;}
.logo{
  width:42px;height:42px;border:1px solid var(--edge);
  background: linear-gradient(180deg, #0e1624, #05070a);
  display:grid;place-items:center;color:var(--good);
  box-shadow: 0 0 0 2px rgba(82,255,169,0.05);
}
.title{font-weight:800;letter-spacing:1.2px}
.sub{color:var(--muted);font-size:13px;margin-top:2px}
.hud{display:flex; gap:10px;}
.stat{min-width:120px; border:1px solid var(--edge); background: rgba(11,15,20,0.75); padding:10px 12px;}
.label{font-size:11px;color:var(--muted)}
.value{font-size:18px;font-weight:800;margin-top:2px}

.panel{border:1px solid var(--edge); background: rgba(11,15,20,0.75); padding:14px;}
.hintLine{display:flex; gap:10px; align-items:baseline; padding: 10px 12px; border:1px solid var(--edge); background: rgba(6,8,11,0.55);}
.hintLabel{font-size:11px;color:var(--muted); letter-spacing:1px;}
.hintText{font-weight:700;}
.roundStats{margin-top:10px; display:flex; gap:16px; flex-wrap:wrap; padding: 8px 2px 2px; color:var(--muted); font-size:13px;}
.k{color:#9fb0c7}

.gridWrap{margin-top:14px; display:flex; justify-content:center;}
.grid{width:min(640px, 100%); display:grid; gap:10px; padding:8px;}

.node{
  aspect-ratio:1/1;
  border:1px solid var(--edge);
  background: linear-gradient(180deg, #0d1522, #05070a);
  position:relative;
  cursor:pointer;
  user-select:none;
  transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease;
  overflow:hidden;
}
.node:hover{transform: translateY(-1px)}
.node:active{transform: translateY(0px) scale(0.99)}
.node:disabled{cursor:not-allowed; opacity:0.9}

.node .sig{
  position:absolute; inset:0; opacity:0;
  transition: opacity 120ms ease;
  background: radial-gradient(circle at 50% 50%, rgba(82,255,169,0.22) 0%, rgba(82,255,169,0.0) 55%);
  pointer-events:none;
}
.node .id{position:absolute; left:10px; bottom:8px; font-size:12px; color:rgba(215,226,240,0.35);}

.node.good{border-color: rgba(82,255,169,0.55); box-shadow: 0 0 0 2px rgba(82,255,169,0.12);}
.node.bad{border-color: rgba(255,94,115,0.55);}
.node.hint{border-color: rgba(255,211,107,0.65); box-shadow: 0 0 0 2px rgba(255,211,107,0.10);}

.bottom{display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap;}
.btn{
  border:1px solid var(--edge);
  background: linear-gradient(180deg, #0e1624, #070a0f);
  color: var(--text);
  padding: 10px 12px;
  cursor:pointer;
  font-weight:700;
}
.btn.ghost{background: transparent; color: var(--muted);}
.btn.small{padding:6px 10px; font-size:12px}
.btn.ghost.danger{border-color: rgba(255,94,115,0.55); color: rgba(255,94,115,0.95);}
.note{margin-left:auto; color: var(--muted); font-size:13px; min-height: 1em;}
.saveStatus{color:var(--muted); font-size:12px; min-width: 150px; text-align:right;}

.flashGood{color:var(--good)}
.flashBad{color:var(--bad)}
.flashWarn{color:var(--warn)}

/* overlays */
.overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.72);
  display:grid; place-items:center;
  padding:18px;
  z-index:999;
}
.overlay.hidden{display:none}
.modal{
  width: min(760px, 100%);
  border:1px solid var(--edge);
  background: rgba(11,15,20,0.92);
  padding: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modalTitle{font-weight:900; letter-spacing:1.6px; font-size:22px;}
.modalSub{color:var(--muted); margin-top:6px; font-size:13px;}
.modeGrid{margin-top:14px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.modeBtn{
  border:1px solid var(--edge);
  background: linear-gradient(180deg, #0e1624, #070a0f);
  color: var(--text);
  padding: 14px 12px;
  cursor: pointer;
  text-align: left;
}
.modeBtn:hover{border-color: rgba(82,255,169,0.35); box-shadow: 0 0 0 2px rgba(82,255,169,0.08);}
.modeName{font-weight:900; letter-spacing:1px;}
.modeMeta{color:var(--muted); font-size:12px; margin-top:6px;}
.modalHint{margin-top:14px; color:var(--muted); font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:10px;}

.tutorialText{color:var(--text); font-size:13px; line-height:1.55; margin-top:12px;}
.tutorialText p{margin: 8px 0;}
.tutorialText ul{margin: 8px 0 8px 18px; color:var(--muted);}
.row{display:flex; gap:10px; margin-top:14px; justify-content:flex-end;}

.storeGrid{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px;}
.upgrade{border:1px solid var(--edge); background: rgba(6,8,11,0.45); padding:12px;}
.uTitle{font-weight:900; letter-spacing:1px;}
.uDesc{color:var(--muted); font-size:12px; margin-top:6px; min-height:32px;}
.uMeta{display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:10px;}
@media (max-width: 800px){
  .modeGrid{grid-template-columns: 1fr;}
  .storeGrid{grid-template-columns: 1fr;}
  .saveStatus{text-align:left; min-width:auto;}
}


/* ===== Mobile / Touch Safety ===== */
html, body{
  -webkit-text-size-adjust: 100%;
}
body{
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button{ touch-action: manipulation; }
.node{
  touch-action: manipulation;
}
@media (max-width: 520px){
  .wrap{ padding: 12px; }
  .top{ padding: 12px 10px 8px; align-items:flex-start; flex-direction:column; gap:10px; }
  .hud{ width:100%; flex-wrap:wrap; }
  .stat{ min-width: 110px; flex: 1 1 110px; }
  .grid{ gap:8px; padding:6px; }
  .node .id{ left:8px; bottom:6px; font-size:11px; }
  .bottom{ gap:8px; }
  .btn{ padding: 10px 10px; }
  .note{ margin-left: 0; width:100%; }
  .saveStatus{ width:100%; text-align:left; }
}
@media (pointer: coarse){
  /* avoid hover-only affordances on touch devices */
  .node:hover{ transform:none; }
}
/* ================================= */


.fsHelp{ color: var(--muted); font-size: 12px; }