:root{
  --green:#0e7a3f;
  --green-dark:#0a5c30;
  --pitch:#0f8a46;
  --pitch-line:#e9fff0;
  --ink:#0b2418;
  --paper:#ffffff;
  --gold:#ffc93c;
  --red:#e5484d;
  --blue:#2b7fff;
  --grey:#6b7a72;
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--green-dark);
  color:var(--ink);
  overscroll-behavior:none;
}
.app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--paper);display:flex;flex-direction:column;}

/* HEADER */
header{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  color:#fff;padding:14px 16px 10px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-0.5px;}
.brand .ball{font-size:22px;}
.streak{background:rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;}

/* AD SLOTS - placeholders, swap with real AdSense <ins> units */
.ad-slot{
  margin:10px 12px 0;background:#f1f4f2;border:1px dashed #c6d2cc;border-radius:12px;
  color:#8b9a92;font-size:12px;text-align:center;padding:10px;
}

/* TABS */
nav.tabs{display:flex;background:#f6f8f6;border-bottom:1px solid #e4ebe6;position:sticky;top:64px;z-index:15;}
nav.tabs button{
  flex:1;padding:12px 6px;background:none;border:none;font-size:14px;font-weight:700;
  color:var(--grey);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
}
nav.tabs button .icon{font-size:18px;}
nav.tabs button.active{color:var(--green-dark);box-shadow:inset 0 -3px 0 var(--green);}

main{flex:1;padding:16px;padding-bottom:40px;}
.view{display:none;}
.view.active{display:block;}

/* --- ROLLER VIEW --- */
.chipbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-ms-overflow-style:none;scrollbar-width:none;}
.chipbar::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;padding:8px 14px;border-radius:999px;border:2px solid #dfe8e2;background:#fff;
  font-size:13px;font-weight:700;color:var(--grey);cursor:pointer;white-space:nowrap;
}
.chip.active{background:var(--green);border-color:var(--green);color:#fff;}

.diff-row{display:flex;gap:8px;margin-bottom:18px;}
.diff-btn{flex:1;padding:9px 4px;border-radius:12px;border:2px solid #dfe8e2;background:#fff;font-weight:700;font-size:13px;color:var(--grey);cursor:pointer;}
.diff-btn.active{background:var(--ink);border-color:var(--ink);color:#fff;}

.pitch-card{
  background:
    repeating-linear-gradient(90deg, var(--pitch) 0 40px, #0d9a51 40px 80px);
  border-radius:24px;padding:22px 16px 26px;position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(10,60,30,.25);
}
.pitch-card::before{
  content:"";position:absolute;inset:10px;border:2px solid var(--pitch-line);opacity:.55;border-radius:16px;pointer-events:none;
}
.die-wrap{display:flex;justify-content:center;margin:6px 0 14px;}
.die{
  width:112px;height:112px;background:#fff;border-radius:22px;
  display:flex;align-items:center;justify-content:center;font-size:52px;
  box-shadow:0 8px 0 rgba(0,0,0,.18), 0 14px 24px rgba(0,0,0,.25);
  transition:transform .12s ease;
  user-select:none;
}
.die.rolling{animation:spin .5s ease;}
@keyframes spin{
  0%{transform:rotate(0) scale(1);}
  50%{transform:rotate(200deg) scale(1.08);}
  100%{transform:rotate(360deg) scale(1);}
}
.result{
  background:#fff;border-radius:18px;padding:16px 18px;text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.15);min-height:118px;display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.result .tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green);}
.result h2{margin:0;font-size:21px;line-height:1.25;color:var(--ink);}
.result p{margin:0;font-size:14px;color:var(--grey);}
.result .empty{color:#9aa9a2;font-size:14px;}
.howto-toggle{
  margin-top:6px;background:none;border:none;color:var(--green);font-weight:800;font-size:13px;
  cursor:pointer;padding:6px 0;text-align:center;
}
.howto-panel{display:none;text-align:left;background:#f6f8f6;border-radius:12px;padding:12px 14px;margin-top:2px;}
.howto-panel.open{display:block;}
.howto-panel ol{margin:0;padding-left:18px;}
.howto-panel li{font-size:13.5px;color:var(--ink);line-height:1.5;margin-bottom:6px;}
.howto-panel li:last-child{margin-bottom:0;}
.watch-link{
  display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:var(--blue);text-decoration:none;
}

.timer-wrap{margin-top:14px;display:flex;align-items:center;gap:10px;justify-content:center;}
.timer-badge{
  background:rgba(255,255,255,.9);border-radius:12px;padding:8px 14px;font-weight:800;font-size:20px;color:var(--ink);
  min-width:64px;text-align:center;
}
.timer-btn{background:rgba(255,255,255,.9);border:none;border-radius:12px;padding:8px 12px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink);}

.roll-btn{
  width:100%;margin-top:16px;padding:16px;border:none;border-radius:16px;
  background:var(--gold);color:var(--ink);font-size:18px;font-weight:900;letter-spacing:.02em;
  box-shadow:0 6px 0 #d99e00,0 10px 20px rgba(0,0,0,.15);cursor:pointer;
}
.roll-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #d99e00;}

.row-btns{display:flex;gap:10px;margin-top:12px;}
.ghost-btn{flex:1;padding:11px;border-radius:12px;border:2px solid #dfe8e2;background:#fff;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer;}

.howto{margin-top:22px;font-size:13px;color:var(--grey);line-height:1.6;}
.howto b{color:var(--ink);}

/* --- TACTICS VIEW --- */
.tactics-toolbar{display:flex;gap:8px;overflow-x:auto;margin-bottom:10px;padding-bottom:4px;}
.tactics-toolbar button, .tactics-toolbar .swatch{
  flex:0 0 auto;border:2px solid #dfe8e2;background:#fff;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);
}
.tactics-toolbar button.active{border-color:var(--ink);background:var(--ink);color:#fff;}
.swatch{width:34px;height:34px;padding:0;border-radius:50%;}
canvas{
  width:100%;aspect-ratio:3/4.6;background:var(--pitch);border-radius:18px;display:block;touch-action:none;
  box-shadow:0 10px 30px rgba(10,60,30,.25);
}
.tactics-actions{display:flex;gap:10px;margin-top:12px;}

footer{text-align:center;padding:18px 16px 30px;font-size:11px;color:#9aa9a2;}
footer a{color:var(--green);text-decoration:none;font-weight:700;}

/* --- STATIC PAGES (About / Privacy) --- */
.back-link{display:inline-block;margin-bottom:16px;font-weight:700;color:var(--green);text-decoration:none;font-size:13px;}
.static-content h1{margin:0 0 16px;font-size:24px;color:var(--ink);}
.static-content h2{margin:26px 0 8px;font-size:17px;color:var(--ink);}
.static-content p, .static-content li{font-size:14px;line-height:1.65;color:var(--ink);}
.static-content ul{padding-left:20px;margin:8px 0;}
.static-content a{color:var(--blue);}
.static-content .updated{font-size:12px;color:var(--grey);margin-bottom:20px;}