:root{
  --bg-tile: 200px;
  --panel-top:#56abf2;
  --panel-bot:#3f8fd0;
  --text:#0a3c6e;
  --gold-1:#ffd11a;
  --gold-2:#ffb200;
  --gold-3:#b37c00;
  --shadow: rgba(0,56,119,.35);
  --card-top:#58b1ff;
  --card-bot:#3c96e3;
}

/* Base */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    url("./images/background.png") repeat,
    linear-gradient(180deg, #8fd0ff 0%, #5aa9ee 38%, #3e8fdd 100%);
  background-size: 330px 330px, auto;
  min-height:100vh;
}
button, input, select, textarea { font-family: inherit; }

/* ===== Remove tap highlight globally ===== */
html, body, * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none;
  user-select: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* LOGO + Tagline */
.top-logo{ text-align:center; padding:16px 10px 0; }
.top-logo img{ width:min(500px, 95vw); height:auto; display:block; margin:0 auto 20px; }
.tagline{
  margin:6px 0 100px;
  font-family:"Luckiest Guy", Arial, sans-serif;
  font-weight:400;
  color:#e9f3ff;
  letter-spacing:1px;
  text-shadow: 3px 4px 0 #08f;
  text-align:center;
  font-size:30px;
  filter: drop-shadow(0.5px 0 0 #08f)
          drop-shadow(-0.5px 0 0 #08f)
          drop-shadow(0 0.5px 0 #08f)
          drop-shadow(0 -0.5px 0 #08f);
}

/* MAIN PAGE WRAPPER */
.page{ display:grid; place-items:center; padding:18px 8px 28px; }

/* PANEL */
.panel{
  display:inline-block;
  width:fit-content;
  max-width:96vw;
  background: linear-gradient(180deg, rgba(86,171,242,0.55), rgba(63,143,208,0.55));
  border-radius:16px;
  box-shadow: 0 20px 42px var(--shadow), inset 0 0 0 5px rgba(255,255,255,0.5);
  padding:16px 18px;
  margin-bottom:200px;
}
.panel-title{
  margin:0 0 10px;
  text-align:center;
  color:#eef7ff;
  text-shadow:0 3px 0 #08f;
  font-family:"Luckiest Guy", Arial, sans-serif;
  font-weight:400;
  letter-spacing:.5px;
}

/* CONTROLS */
.controls{ display:grid; grid-auto-flow:column; grid-auto-columns:max-content; justify-content:center; gap:16px; margin:20px auto 24px; }
.select-wrap{ position:relative; display:inline-block; }
.select-wrap select{
  appearance:none;
  min-width:300px;
  padding:12px 38px 12px 14px;
  font-size:16px;
  font-family:"Luckiest Guy", Arial, sans-serif;
  font-weight:400;
  color:#08f;
  border:2px solid #08f;
  background:#fff;
}
.select-wrap::after{
  content:"▾";
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  font-weight:900;
  color:#08f;
  pointer-events:none;
}

/* DICE */
.dice-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:20px auto 26px; }
.die{ width:82px; height:82px; border-radius:13px; display:grid; place-items:center; border:8px solid rgba(255,255,255,.9); }
.die .pip{ width:14px; height:14px; border-radius:50%; background:#fff; }
.color-red{ background:red } .color-orange{ background:orange }
.color-yellow{ background:gold } .color-green{ background:green }
.color-blue{ background:blue } .color-purple{ background:purple }

/* BUTTON */
.cta{
  display:block; margin:20px auto;
  width:100%; max-width:720px;
  padding:14px 18px;
  border:3px solid white;
  font-family:"Luckiest Guy", Arial, sans-serif;
  font-weight:700; font-size:20px;
  color:#fff; background:#ffd700;
  cursor:pointer;
  transition: background .2s ease, transform .08s ease;
  text-shadow:-1px -1px 0 #ca8a00,1px -1px 0 #ca8a00,-1px 1px 0 #ca8a00,1px 1px 0 #ca8a00,0 3px 2px #ca8a00;
}
.cta:hover{ background:#ffbf00; }
.cta:active{ transform:translateY(2px); background:#e6ac00; }

/* LEGEND */
.legend{
  display:flex; justify-content:center; flex-wrap:wrap;
  text-align:center;
  color:#e7f2ff; font-weight:700;
  margin:24px 0 28px;
  background: rgba(0,125,255,0.5);
  padding:8px 14px;
  border-radius:6px;
  font-size:10px;
  cursor:text;
}
.chip{ margin:0 3px; font-weight:700; background:none; }
.chip.red{ color:red } .chip.orange{ color:orange }
.chip.yellow{ color:gold } .chip.green{ color:green }
.chip.blue{ color:blue } .chip.purple{ color:purple }

/* INFO */
.info{ display:grid; gap:14px; justify-content:center; padding:8px 8px 28px; }
.card{
  width:min(980px, 96vw);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border-radius:14px;
  border:3px solid rgba(255,255,255,.24);
  box-shadow:0 16px 36px var(--shadow), inset 0 0 0 2px rgba(255,255,255,.18);
  color:#083b73; padding:16px 18px;
}
.card h3{ margin:0 0 6px; color:#eef7ff; text-align:center; font-family:"Luckiest Guy"; }

/* responsive */
@media (max-width:640px){
  .controls{ grid-auto-flow:row; }
  .select-wrap select{ min-width:270px; font-size:13px; padding:7px 28px 7px 9px; }
  .die{ width:88px; height:88px }
}

/* ===== Rolling state ===== */
body.rolling .top-logo, body.rolling main.page, body.rolling .info{ visibility:hidden; }
.roll-overlay{ position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; z-index:9999; }
.roll-title{ color:#eef7ff; text-shadow:0 3px 0 #08f; font-family:"Luckiest Guy"; font-size:clamp(18px,4vw,32px); }
.ghost-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.ghost-die{ width:82px; height:82px; border-radius:13px; border:8px solid rgba(255,255,255,.95); background:rgba(255,255,255,.35); }
.ghost-die::after{ content:""; width:14px; height:14px; border-radius:50%; background:#fff; }
@keyframes shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-5px,2px) rotate(-5deg)}50%{transform:translate(5px,-2px) rotate(8deg)}75%{transform:translate(-5px,5px) rotate(-5deg)}100%{transform:translate(0,0) rotate(0)}}
.shake{ animation:shake .6s ease-in-out both }

/* ===== Mobile tap/focus artifacts fix (iOS + Android) ===== */
@media (hover:none) and (pointer:coarse){
  *, *::before, *::after { -webkit-tap-highlight-color:transparent!important; tap-highlight-color:transparent!important; }
  a, button, .cta, .chip, .die, .select-wrap select, label {
    outline:none!important; box-shadow:none!important; -webkit-appearance:none; appearance:none;
  }
  a:active, button:active, .cta:active, .chip:active, .die:active, .select-wrap select:active {
    background:inherit!important; box-shadow:none!important; transform:none!important; filter:none!important;
  }
  :focus,:focus-visible{ outline:none!important; box-shadow:none!important; }
}
::-moz-focus-inner{ border:0; }
:-moz-focusring{ outline:none!important; }

.chip:focus, .chip:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: inherit !important;
}