:root{
  --bg:#05060c;
  --bg-grid: rgba(93,141,255,.05);
  --panel: rgba(19,24,40,.75);
  --panel-2: rgba(28,36,58,.85);
  --line:#2a3a6a;
  --line-glow: rgba(93,141,255,.4);
  --ink:#e9f0ff;
  --ink-dim:#7d89ad;
  --gold:#ffc857;
  --hot:#ff3d68;
  --cyan:#37e6ff;
  --ok:#52ffb8;
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New',system-ui,sans-serif;
  min-height:100vh;
  background-image:
    repeating-linear-gradient(0deg, var(--bg-grid) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--bg-grid) 0 1px, transparent 1px 40px),
    radial-gradient(ellipse 120% 50% at 50% -10%, #101a30 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 110%, #0d1220 0%, transparent 60%);
  background-attachment:fixed;
}
.wrap{max-width:480px;margin:0 auto;padding:0 14px 90px}
.num{font-family:'Chakra Petch',sans-serif;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- header ---------- */
header{padding:18px 2px 6px;display:flex;align-items:baseline;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:8px}
.brand h1{font-family:'DotGothic16',monospace;font-size:1.35rem;color:var(--gold);text-shadow:0 0 18px rgba(255,200,87,.4)}
.brand .machine{
  font-size:.7rem;color:var(--ink-dim);letter-spacing:.08em;
  background:none;border:none;font-family:inherit;cursor:pointer;padding:0;
  display:flex;align-items:center;gap:3px;
}
.brand .machine:active{opacity:.7}
.brand .machine .caret{font-size:.6rem}
.hdr-verdict{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:.8rem;color:var(--ink-dim)}
.hdr-verdict b{color:var(--gold);font-size:1rem;transition:text-shadow .4s}
.hdr-verdict.celebrated b{text-shadow:0 0 16px rgba(255,200,87,.7),0 0 32px rgba(255,200,87,.4)}
@keyframes hdrBlink{0%,100%{opacity:1}50%{opacity:.85}}
.hdr-verdict.pulse-slow{animation:hdrBlink 2s ease-in-out infinite}

/* ---------- input validation warning ---------- */
.warnBar{
  margin-top:8px;padding:10px 12px;border-radius:10px;
  background:rgba(255,61,104,.12);border:1px solid rgba(255,61,104,.5);
  color:#ffc2cf;font-size:.72rem;text-align:center;line-height:1.5;
}

/* ---------- glass panels w/ HUD corner markers ---------- */
.board, .card, .forecast{
  position:relative;
  background-color:var(--panel);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-glow);
  border-radius:var(--r);
  background-image:
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--cyan),var(--cyan)),
    linear-gradient(var(--cyan),var(--cyan));
  background-repeat:no-repeat;
  background-size:14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position:
    top 0 left 0, top 0 left 0,
    top 0 right 0, top 0 right 0,
    bottom 0 left 0, bottom 0 left 0,
    bottom 0 right 0, bottom 0 right 0;
}
.board{padding:18px 14px 12px;margin-top:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.5)}
.forecast{margin-top:10px;padding:12px 14px}
.card{padding:12px}

/* ---------- lamp board: vertical gauges + tip lamp (signature) ---------- */
.lamps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.lamp{display:flex;flex-direction:column;align-items:center;gap:7px}
.gauge{
  position:relative;width:100%;max-width:34px;height:96px;
  border:1px solid var(--line);border-radius:8px;
  background:#0a0e1c;overflow:hidden;
}
.gauge-ticks{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(233,240,255,.07) 0 1px, transparent 1px 9.6px);
}
.gauge-fill{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  transition:height .5s ease, opacity .5s ease;
}
.gauge-tip{
  position:absolute;left:50%;top:-3px;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background:#1b2138;border:2px solid #2b3452;
  transition:all .4s ease;
}
.lamp .s-label{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:.95rem;color:var(--ink-dim)}
.lamp .s-pct{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:.78rem;color:var(--ink-dim);transition:color .4s}
.lamp.lit .s-pct{color:var(--ink)}
.lamp.lit .s-label{color:var(--gold)}

.verdict{
  margin-top:16px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
}
.vcell{
  background:#0e1322;border:1px solid var(--line);border-radius:10px;
  padding:9px 6px;text-align:center;
}
.vcell .vl{font-size:.62rem;color:var(--ink-dim);letter-spacing:.1em}
.vcell .vn{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:1.25rem;margin-top:2px}
.vcell.low .vn{color:var(--cyan)}
.vcell.mid .vn{color:var(--ink)}
.vcell.high .vn{color:var(--gold);text-shadow:0 0 14px rgba(255,200,87,.55)}
.confidence{
  margin-top:10px;font-size:.72rem;color:var(--ink-dim);
  text-align:center;line-height:1.5;
}
.confidence b{color:var(--ink)}

/* ---------- forecast strip ---------- */
.forecast h3{font-size:.72rem;color:var(--gold);letter-spacing:.1em;margin-bottom:8px}
.f-rows{display:flex;flex-direction:column;gap:6px}
.f-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--ink-dim)}
.f-row .num{color:var(--ink);font-size:.9rem}
.f-note{font-size:.66rem;color:var(--ink-dim);margin-top:8px;line-height:1.5}

/* ---------- inputs ---------- */
.section{margin-top:14px}
.sec-title{font-size:.7rem;color:var(--ink-dim);letter-spacing:.08em;padding:0 2px 8px;display:flex;justify-content:space-between;align-items:baseline}
.sec-title .tag{color:var(--cyan);letter-spacing:.12em}
.sec-title .opt{font-size:.62rem;color:#6b7290}
.counter{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px}
.counter + .counter{border-top:1px solid #1e2540;margin-top:4px;padding-top:12px}
.c-label{min-width:74px}
.c-label .nm{font-size:.85rem;font-weight:700}
.c-label .sub{font-size:.62rem;color:var(--ink-dim)}
.c-val{
  font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:1.5rem;min-width:84px;text-align:right;
  color:var(--gold);text-shadow:0 0 10px rgba(255,200,87,.3);
}
.c-btns{display:flex;gap:6px}
.stp{
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:10px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:.85rem;
  padding:10px 0;width:52px;text-align:center;user-select:none;cursor:pointer;
  transition:background .15s, transform .05s, box-shadow .2s;
}
.stp:active{background:#26304e;transform:scale(.96)}
.stp.pulse{box-shadow:0 0 0 3px rgba(255,200,87,.45), 0 0 14px rgba(255,200,87,.4)}
.stp.minus{color:var(--ink-dim);width:44px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* prior selector */
.prior-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.pr{
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-dim);
  border-radius:10px;padding:10px 4px;text-align:center;cursor:pointer;
  font-size:.74rem;font-weight:700;transition:all .2s;
}
.pr .sub{display:block;font-size:.58rem;font-weight:400;margin-top:2px;color:#6b7290}
.pr.on{border-color:var(--gold);color:var(--gold);background:rgba(255,200,87,.08);box-shadow:0 0 14px rgba(255,200,87,.15)}

/* toggle rows */
.tgl-row{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 10px}
.tgl-row .t-label{font-size:.78rem;color:var(--ink-dim)}
.tgl{
  width:46px;height:26px;border-radius:13px;background:#232b45;border:1px solid var(--line);
  position:relative;cursor:pointer;transition:background .2s;
}
.tgl::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#8890ab;transition:all .2s;
}
.tgl.on{background:rgba(255,200,87,.28);border-color:var(--gold)}
.tgl.on::after{left:22px;background:var(--gold)}
.hidden{display:none!important}
.hint{font-size:.64rem;color:var(--ink-dim);line-height:1.6;padding:0 2px 8px}
.obs-line{font-size:.64rem;color:var(--cyan);padding:0 2px 8px}

/* ---------- grape counter mode ---------- */
.fab{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;
  width:min(452px,calc(100% - 28px));
  background:linear-gradient(180deg,#ffd873,#e0a832);color:#241a05;
  border:none;border-radius:16px;padding:15px;font-size:.95rem;font-weight:700;
  font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;
  box-shadow:0 8px 28px rgba(255,200,87,.4);letter-spacing:.05em;
}
.fab:active{transform:translateX(-50%) scale(.985)}
.gmode{
  position:fixed;inset:0;background:var(--bg);z-index:50;
  display:flex;flex-direction:column;padding:16px;
}
.g-top{display:flex;justify-content:space-between;align-items:center}
.g-close{background:none;border:1px solid var(--line);color:var(--ink-dim);border-radius:10px;padding:8px 16px;font-size:.8rem;cursor:pointer}
.g-stats{text-align:center;margin-top:14px}
.g-stats .g-count{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:4rem;color:var(--gold);text-shadow:0 0 30px rgba(255,200,87,.45)}
.g-stats .g-rate{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:1.1rem;color:var(--ink-dim);margin-top:4px}
.g-stats .g-rate b{color:var(--ink)}
.g-hit{
  flex:1;margin-top:16px;border-radius:24px;border:2px dashed #2c3556;
  background:radial-gradient(circle at 50% 45%, #161d31 0%, #101526 70%);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  cursor:pointer;user-select:none;color:var(--ink-dim);
}
.g-hit:active{background:radial-gradient(circle at 50% 45%, #223052 0%, #101526 70%)}
.g-hit .plus{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:3rem;color:var(--ink)}
.g-undo{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-undo button{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);
  border-radius:12px;padding:14px;font-size:.85rem;cursor:pointer;font-family:inherit;
}

/* ---------- modal overlay (grape start / machine select) ---------- */
.modalOverlay{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modalCard{
  width:100%;max-width:360px;padding:18px;display:flex;flex-direction:column;gap:10px;
}
.modalTitle{font-size:.7rem;color:var(--cyan);letter-spacing:.08em}
.modalDesc{font-size:.82rem;color:var(--ink-dim);margin-bottom:4px}
.modalBtn{
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:10px;padding:14px;font-size:.85rem;font-weight:700;cursor:pointer;
  font-family:inherit;text-align:center;text-decoration:none;display:block;
}
.modalBtn:active{background:#26304e}
.modalBtn.current{border-color:var(--gold);color:var(--gold);background:rgba(255,200,87,.08)}

/* ---------- ペカ演出 overlay ---------- */
.pekaOverlay{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:0;transition:opacity .3s ease;
}
.pekaOverlay.show{opacity:1}
.peka-stage{position:relative;width:min(40vw,220px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.peka-lamp{
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #4a3a10 0%, #1b1608 60%, #0a0904 100%);
  border:3px solid #3a2c10;
  transform:scale(.9);opacity:.5;
  transition:box-shadow .4s ease, background .4s ease, transform .4s ease, opacity .4s ease, border-color .4s ease;
}
.peka-lamp.lit{
  background:radial-gradient(circle at 40% 35%, #ffe9a8 0%, var(--gold) 55%, #c98a1e 100%);
  border-color:var(--gold);
  box-shadow:0 0 60px 20px rgba(255,200,87,.55), 0 0 140px 60px rgba(255,200,87,.25);
  transform:scale(1);opacity:1;
}
.peka-lamp.lit.rainbow{
  animation:pekaHue 2.4s linear infinite;
  box-shadow:0 0 70px 24px rgba(255,200,87,.6), 0 0 160px 70px rgba(55,230,255,.3);
}
@keyframes pekaHue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.peka-particle{
  position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px 2px rgba(255,200,87,.8);
  animation:pekaBurst 1.1s ease-out forwards;
}
@keyframes pekaBurst{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0}
}
.peka-title{font-family:'DotGothic16',monospace;font-size:1.3rem;color:var(--gold);letter-spacing:.1em}
.peka-pct{font-family:'DotGothic16',monospace;font-size:2.2rem;color:var(--ink);text-shadow:0 0 20px rgba(255,200,87,.5)}
.peka-note{font-size:.6rem;color:var(--ink-dim);max-width:280px;text-align:center;line-height:1.6}
.peka-tap{font-size:.68rem;color:var(--ink-dim);margin-top:8px;letter-spacing:.05em}

/* ---------- footer / links ---------- */
.xlink{
  margin-top:16px;text-align:center;
}
.xlink a{
  color:var(--ink-dim);font-size:.72rem;text-decoration:none;border-bottom:1px dotted #3a4468;padding-bottom:1px;
}
.pagenav{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:14px;padding:0 4px}
.pagenav a{font-size:.68rem;color:var(--ink-dim);text-decoration:none;border-bottom:1px dotted #3a4468;padding-bottom:1px}
.disclaimer{margin-top:14px;font-size:.6rem;color:#5b617c;line-height:1.7;padding:0 4px}
.ad-slot{
  margin-top:14px;min-height:60px;border:1px dashed #262e4c;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:#3f4666;font-size:.65rem;letter-spacing:.15em;
}
.reset-row{margin-top:12px;text-align:center}
.reset-row button{background:none;border:none;color:#5b617c;font-size:.7rem;text-decoration:underline;cursor:pointer;font-family:inherit}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}