/* Dicello - shared look: Ellos navy and gold around a deep green felt table. */
:root {
  --navy: #0B1624; --panel: #10233B; --panel-2: #152d4b; --line: #26405f;
  --gold: #FFC629; --gold-2: #FFE680; --gold-3: #D4A017;
  --felt: #0f5a3c; --felt-2: #0a432c; --felt-3: #13734d;
  --wood: #5a2f16; --wood-2: #8a4a22;
  --white: #fff; --grey: #9aa3b2; --green: #22CC71; --red: #E53935;
  --ivory: #fffaf0; --ivory-2: #ece3cf; --pip: #12161f;
  --radius: 12px;
  --font: 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--navy); color: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: .08em; font-weight: 900; font-style: italic;
  letter-spacing: .02em; line-height: 1; text-transform: uppercase; user-select: none; }
.wordmark .letters { background: linear-gradient(180deg, #fff6c8 0%, var(--gold) 45%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .05em 0 #7a5208) drop-shadow(0 .12em .18em rgba(0,0,0,.55)); }
.wordmark .o-die { width: .82em; height: .82em; margin-left: .04em; transform: rotate(14deg) translateY(.02em);
  filter: drop-shadow(0 .08em .12em rgba(0,0,0,.5)); }
.tagline { color: var(--gold-2); letter-spacing: .25em; text-transform: uppercase; font-weight: 600; font-size: .9rem; }

/* ---------- Buttons ---------- */
.btn { border: 0; border-radius: 10px; padding: .85em 1.4em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: 1rem; color: var(--navy);
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-3));
  box-shadow: 0 4px 0 #8a6205, 0 8px 18px rgba(0,0,0,.35); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6205, 0 3px 8px rgba(0,0,0,.35); }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; transform: none; }
.btn.secondary { color: var(--white); background: var(--panel); box-shadow: inset 0 0 0 2px var(--line), 0 6px 14px rgba(0,0,0,.3); }
.btn.green { color: #fff; background: linear-gradient(180deg, #4be08f, var(--green) 50%, #16A34A); box-shadow: 0 4px 0 #0e6b32, 0 8px 18px rgba(0,0,0,.35); }
.btn:focus-visible, .cell:focus-visible, .die:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Felt ---------- */
.felt { background:
  radial-gradient(ellipse at 50% 40%, var(--felt-3) 0%, var(--felt) 45%, var(--felt-2) 100%);
  position: relative; }
.felt::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.felt-pattern { position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%23FFE680' stroke-width='1.2'%3E%3Crect x='30' y='30' width='30' height='30' rx='6' transform='rotate(45 45 45)'/%3E%3C/g%3E%3Ccircle cx='45' cy='45' r='2.5' fill='%23FFE680'/%3E%3C/svg%3E"); }

/* ---------- 3D dice ---------- */
.die { --s: 90px; width: var(--s); height: var(--s); perspective: 700px; position: relative; border: 0; padding: 0;
  background: none; flex: none; }
.die .tilt { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(18deg); }
.die .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.2,.9,.25,1.05); }
.die .face { position: absolute; inset: 0; border-radius: 18%; display: grid; padding: 14%;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, var(--ivory) 45%, var(--ivory-2) 100%);
  box-shadow: inset 0 0 calc(var(--s) * .08) rgba(120,90,40,.35), inset 0 0 0 1px rgba(0,0,0,.08);
  backface-visibility: hidden; }
.die .f1 { transform: translateZ(calc(var(--s) / 2)); }
.die .f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die .f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die .f2 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.die .pip { width: 72%; height: 72%; place-self: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a5262, var(--pip) 60%);
  box-shadow: inset 0 calc(var(--s) * .015) calc(var(--s) * .02) rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.7); }
.die .f1 .pip { background: radial-gradient(circle at 35% 30%, #ff6b6b, #b3121b 65%); width: 95%; height: 95%; }
.die .shadow { position: absolute; left: 6%; right: 6%; bottom: -14%; height: 22%; border-radius: 50%;
  background: radial-gradient(rgba(0,0,0,.5), transparent 70%); transform: translateZ(-1px); }
.die.blank .face .pip { display: none; }
.die.blank .face { background: radial-gradient(circle at 30% 25%, #fff, #e7e1d3); opacity: .55; }
.die.held .face { background: radial-gradient(circle at 30% 25%, #fff8dc, #ffe69a 55%, #f0c64a); }
.die.held::after { content: "HELD"; position: absolute; left: 50%; bottom: calc(var(--s) * -.42); transform: translateX(-50%);
  font: 800 calc(var(--s) * .16)/1 var(--font); letter-spacing: .12em; color: var(--navy); background: var(--gold);
  border-radius: 99px; padding: .3em .7em; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.die.lift .tilt { animation: lift .25s ease-out forwards; }
@keyframes lift { to { transform: rotateX(-14deg) rotateY(18deg) translateY(-6%); } }
.die.rolling { animation: bounce 1s cubic-bezier(.3,.7,.4,1); }
@keyframes bounce { 0% { transform: translate(0,-80%) scale(.85); } 35% { transform: translate(0,0) scale(1.03); }
  55% { transform: translate(0,-14%); } 75% { transform: translate(0,0); } 88% { transform: translate(0,-4%); } 100% { transform: none; } }

/* ---------- Toasts & splashes ---------- */
.splash { position: fixed; left: 50%; top: 42%; transform: translate(-50%,-50%) scale(.6); opacity: 0;
  font-weight: 900; font-style: italic; text-transform: uppercase; text-align: center; pointer-events: none; z-index: 50;
  color: var(--gold); text-shadow: 0 4px 0 #7a5208, 0 10px 30px rgba(0,0,0,.6); white-space: nowrap; }
.splash small { display: block; font-size: .38em; color: #fff; letter-spacing: .1em; text-shadow: 0 2px 8px rgba(0,0,0,.7); font-style: normal; }
.splash.show { animation: splash 2.2s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes splash { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(-6deg); }
  15% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(-3deg); }
  25% { transform: translate(-50%,-50%) scale(1) rotate(-3deg); }
  80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-62%) scale(1) rotate(-3deg); } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel);
  border: 1px solid var(--line); color: #fff; padding: .7em 1.1em; border-radius: 10px; z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100% - 32px); text-align: center; }
.toast.err { border-color: var(--red); }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

.chip { display: inline-flex; align-items: center; gap: .4em; }
.dot { width: .8em; height: .8em; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }

@media (prefers-reduced-motion: reduce) {
  .die .cube { transition-duration: .01s; } .die.rolling, .splash.show { animation-duration: .01s; }
}