:root{
  --bg:#0e1116;
  --panel:#11161d;
  --line:#2b3542;
  --ink:#e7edf3;
  --muted:#828d9c;
  --amber:#f5b84a;
  --amber-e:#ffd98a;
  --blue:#4f8ff0;
  --blue-e:#8db9ff;
  --cell:#151b23;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  overflow:hidden; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
  display:flex; flex-direction:column; align-items:center;
  min-height:100dvh; padding:10px 12px calc(12px + env(safe-area-inset-bottom));
}

/* ---- 注意書き ---- */
.notice{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.notice.hidden{ display:none; }
.nbox{ width:min(92vw,380px); text-align:center; }
.ntitle{
  font-weight:900; font-size:22px; letter-spacing:.12em;
  color:var(--amber-e); text-shadow:0 0 18px rgba(245,184,74,.4);
  margin-bottom:26px;
}
.nlist{ text-align:left; list-style:none; margin-bottom:30px; }
.nlist li{
  color:var(--muted); font-size:13px; line-height:1.8;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); margin-bottom:8px;
}
.nlist li::before{ content:"■ "; color:var(--amber); }

.top{
  width:100%; max-width:440px;
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 2px 8px; gap:8px; flex-wrap:nowrap;
}
.hud{ flex-shrink:0; }
.hud button{ padding:8px 12px; }
.title{
  font-weight:800; letter-spacing:.08em; font-size:13px;
  color:var(--amber-e); text-shadow:0 0 14px rgba(245,184,74,.35);
  white-space:nowrap;
}
.hud{ display:flex; gap:6px; }
@media (max-width:380px){
  .top{ gap:4px; }
  .title{ font-size:11px; letter-spacing:.04em; }
  .hud{ gap:4px; }
  .hud button{ padding:7px 8px; font-size:12px; }
}
button{
  font:inherit; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; cursor:pointer; touch-action:manipulation;
}
button:active{ transform:translateY(1px); }
button.ghost{ background:transparent; color:var(--muted); }
button.primary{
  background:linear-gradient(180deg,#3b2f14,#2a2210);
  border-color:#6b5320; color:var(--amber-e); font-weight:700;
}
button.big{ padding:12px 34px; font-size:16px; }
button:disabled{ opacity:.3; pointer-events:none; }
.hidden{ display:none !important; }

.stagebar{
  width:100%; max-width:440px;
  display:flex; align-items:baseline; gap:10px;
  padding:2px 2px 10px;
}
#stageNo{ color:var(--amber); font-weight:800; font-size:13px; letter-spacing:.15em; white-space:nowrap; }
#stageHint{ color:var(--muted); font-size:12px; }

/* ---- ひし形マップ ---- */
.dmap{
  position:relative; width:312px; height:312px;
  margin:14px auto 0;
}
.dcell{
  position:absolute; width:102px; height:102px;
  transform:rotate(45deg);
  background:var(--cell); border:1px solid var(--line); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s, box-shadow .25s,
             transform .65s cubic-bezier(.25,.8,.3,1), opacity .5s;
}
.dcell span{
  transform:rotate(-45deg);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .65s cubic-bezier(.25,.8,.3,1);
}
.dmap.zooming .dcell{ opacity:0; pointer-events:none; }
.dmap.zooming .dcell.zoom{
  opacity:1; z-index:5;
  transform:rotate(0deg) scale(2.2);
  border-color:var(--amber);
  box-shadow:0 0 34px rgba(245,184,74,.45);
}
.dmap.zooming .dcell.zoom span{ transform:rotate(0deg); }
.noanim .dcell, .noanim .dcell span{ transition:none; }
.dcell b{ color:var(--amber); font-size:10px; letter-spacing:.1em; font-weight:800; }
.dcell i{ color:var(--ink); font-size:14px; font-style:normal; font-weight:700; }
.dcell.done{
  background:linear-gradient(135deg,#43350f,#6b5320);
  border-color:var(--amber);
  box-shadow:0 0 18px rgba(245,184,74,.35);
}
.dcell.done b{ color:var(--amber-e); }
.dcell.done i{ color:var(--amber-e); }
.dcell.locked{ opacity:.32; pointer-events:none; border-style:dashed; }

.boardwrap{ width:100%; max-width:440px; display:flex; justify-content:center; }
.board-locked{
  width:min(100%, 320px); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:20px; color:var(--muted); font-size:13px; line-height:1.6;
  border:1px dashed var(--line); border-radius:14px;
}
#board{
  position:relative;
  width:min(100%, 320px);
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  touch-action:none;
}
#trailsvg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
#trailsvg .tline{
  fill:none; stroke:var(--blue); stroke-width:9;
  stroke-linecap:round; stroke-linejoin:round; opacity:.8;
}
#trailsvg .tdot{ fill:var(--blue); opacity:.8; }
#trailsvg .thead{
  fill:var(--blue-e);
  filter:drop-shadow(0 0 6px rgba(79,143,240,.8));
}
.cell{
  position:relative; aspect-ratio:1/1;
  background:var(--cell); border:1px solid var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:clamp(15px,5vw,22px); color:var(--muted);
  transition:background .18s, box-shadow .18s, border-color .18s;
}
.cell.lit{
  background:#1b1710;
  border-color:#4a3a19;
  box-shadow:inset 0 0 12px rgba(245,184,74,.16);
}
.cell.lamp::after{
  content:""; position:absolute; inset:22%;
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%, var(--amber-e), var(--amber) 55%, #9a6f1e);
  box-shadow:0 0 16px 4px rgba(245,184,74,.45);
}
.cell.drop-ok{ border-color:var(--amber); box-shadow:0 0 0 2px rgba(245,184,74,.35); }
.cell.drop-ng{ border-color:#c0564f; box-shadow:0 0 0 2px rgba(192,86,79,.35); }
.cell.gone{
  background:transparent; border-color:transparent; box-shadow:none;
}
.cell.trail{
  background:#0f1a2c; border-color:#2b4a7a;
  color:var(--blue-e);
  box-shadow:inset 0 0 10px rgba(79,143,240,.18);
}
.cell.trail-head{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(79,143,240,.45), inset 0 0 10px rgba(79,143,240,.25); }
.cell.pc0{ background:#16283e; border-color:#3f6aa5; }
.cell.pc1{ background:#142e2a; border-color:#3a8577; }
.cell.pc2{ background:#2c2454; border-color:#7d68d8; }
.cell.pc3{ background:#2e2a16; border-color:#8a7d3f; }
.cell.pc4{ background:#331d26; border-color:#9a5573; }
.cell.dim0{ background:rgba(63,106,165,.32); }
.cell.dim1{ background:rgba(58,133,119,.32); }
.cell.dim2{ background:rgba(125,104,216,.32); }
.cell.dim3{ background:rgba(138,125,63,.34); }
.cell.dim4{ background:rgba(154,85,115,.32); }
.cell.sel{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(79,143,240,.45); }
.cell .gmk{
  position:absolute; top:2px; left:4px;
  font-size:9px; color:#93a0b3;
}
.cell .dg{ font-size:clamp(16px,5.5vw,24px); color:var(--ink); }
.cell.seed .dg{ color:var(--amber-e); }
.cell.shake{ animation:shk .22s; }
@keyframes shk{
  0%,100%{ transform:translateX(0); }
  30%{ transform:translateX(-4px); }
  60%{ transform:translateX(4px); }
}
.cell.pop{ animation:pp .3s; }
@keyframes pp{
  0%{ transform:scale(.7); }
  60%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}

.tray{
  width:100%; max-width:440px; min-height:64px;
  margin-top:14px; padding:8px;
  display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;
  background:var(--panel); border:1px dashed var(--line); border-radius:14px;
}
.tray .slot{
  width:44px; height:44px; border-radius:50%;
  border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
}
.token{
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, var(--amber-e), var(--amber) 55%, #9a6f1e);
  box-shadow:0 0 14px 3px rgba(245,184,74,.4);
  touch-action:none;
}
.ghost-token{
  position:fixed; z-index:50; width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, var(--amber-e), var(--amber) 55%, #9a6f1e);
  box-shadow:0 0 18px 5px rgba(245,184,74,.5);
  pointer-events:none; transform:translate(-50%,-50%); opacity:.9;
}
.pcard{
  background:var(--cell); border:1px solid var(--line); border-radius:9px;
  padding:5px; cursor:pointer; touch-action:none;
}
.pcard:active{ transform:scale(1.05); }
.pcard .prow{ display:flex; gap:2px; }
.pcard .prow + .prow{ margin-top:2px; }
.pcell{ width:9px; height:9px; border-radius:2px; }
.pcell.on0{ background:#3f6aa5; }
.pcell.on1{ background:#3a8577; }
.pcell.on2{ background:#7d68d8; }
.pcell.on3{ background:#8a7d3f; }
.pcell.on4{ background:#9a5573; }

.ctrl{
  width:100%; max-width:440px;
  margin-top:14px; display:flex; gap:10px; justify-content:center;
}
.ctrl button{ min-width:64px; }
#numpad .num{ font-size:18px; font-weight:800; min-width:52px; }
#btnStageShare, #btnMapShare{
  background:linear-gradient(180deg,#3b2f14,#2a2210);
  border-color:#6b5320; color:var(--amber-e); font-weight:700;
}
.hint-cap{
  width:100%; max-width:440px; margin-top:8px;
  text-align:center; color:var(--muted); font-size:12px;
}
.msg{
  width:100%; max-width:440px; min-height:22px;
  margin-top:10px; text-align:center;
  color:var(--muted); font-size:13px;
}
.msg.warn{ color:var(--amber); }

.ov{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,7,10,.78); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
/* クリアポップは設定オーバーレイより前面に出す（隠し要素クリア時に裏に隠れないように） */
#ovClear{ z-index:120; }
.ov .box{
  width:min(92vw,360px);
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; text-align:center;
}
.ov h2{ font-size:15px; letter-spacing:.2em; color:var(--amber-e); margin-bottom:14px; }
.ov p{ color:var(--ink); font-size:14px; line-height:1.9; margin-bottom:16px; white-space:pre-line; }
.ov .big{
  font-size:26px; font-weight:900; letter-spacing:.15em;
  color:var(--amber-e); text-shadow:0 0 24px rgba(245,184,74,.55);
  margin:6px 0 14px;
}
.ov .row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.setrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:16px; justify-content:space-between;
}
.setname{ color:var(--ink); font-size:14px; }
.setcells{ display:flex; gap:6px; }
.scell{
  width:26px; height:26px; border-radius:6px;
  background:var(--cell); border:1px solid var(--line);
  cursor:pointer;
}
.scell.on{
  background:linear-gradient(135deg,#c9963a,var(--amber));
  border-color:var(--amber);
  box-shadow:0 0 8px rgba(245,184,74,.35);
}
.noanim .cell.pop, .noanim .cell.shake{ animation:none; }