/* Sikelia — stili condivisi */
:root {
  --sea: #123c5a;
  --sea-dark: #0b2233;
  --sea-light: #2d6f96;
  --cream: #f4e9cf;
  --ink: #140d06;
  --gold: #e8c22e;
  --red: #d93b3b;
  --panel: rgba(11, 34, 51, 0.82);
  --panel-line: rgba(244, 233, 207, 0.22);
  --muted: rgba(244, 233, 207, 0.65);
  --font: 'Nunito', 'Segoe UI', Roboto, Arial, sans-serif;
  --title: 'Cinzel', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 40%, #1d5378 0%, #0b2233 75%) fixed;
  background-color: var(--sea-dark);
  color: var(--cream);
  font-family: var(--font);
}
button { font-family: inherit; }
.hidden { display: none !important; }

/* ---- tabellone ---- */
.sk-board { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 1.2vh; }
.sk-terr { transition: fill .5s; }
.sk-terr.sk-dim { opacity: .55; }
.sk-terr.sk-tappable { cursor: pointer; }
.sk-label { font: 700 11px var(--font); fill: #fff; stroke: var(--ink); stroke-width: 3.2px; stroke-linejoin: round; paint-order: stroke; }
.sk-num { font: 800 10px var(--font); fill: var(--ink); }
.sk-legend-title { font: 800 9.5px var(--font); letter-spacing: 1.2px; fill: var(--cream); }
.sk-legend-row { font: 600 9.5px var(--font); fill: var(--cream); fill-opacity: .9; }
.sk-legend-bonus { font: 800 9.5px var(--font); fill: var(--gold); }
.sk-hi { stroke: none; }
.sk-hi-from { stroke: #fff; stroke-width: 4; animation: sk-pulse 1s ease-in-out infinite alternate; }
.sk-hi-to { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 8 5; animation: sk-dash 1s linear infinite; }
.sk-hi-target { stroke: var(--gold); stroke-width: 2; stroke-opacity: .85; }
.sk-link-on { stroke: var(--gold); stroke-width: 3.4; }
.sk-flash { fill: none; stroke: #ffd36b; stroke-width: 4; animation: sk-boom 1.1s ease-out forwards; }
.sk-flash.conquest { stroke: #fff; }
@keyframes sk-pulse { from { stroke-opacity: 1; } to { stroke-opacity: .35; } }
@keyframes sk-dash { to { stroke-dashoffset: -26; } }
@keyframes sk-boom { from { r: 6; opacity: 1; } to { r: 46; opacity: 0; } }

/* ---- elementi comuni ---- */
.brand { font-family: var(--title); font-weight: 700; letter-spacing: .18em; color: var(--cream); }
.dot { display: inline-block; width: .9em; height: .9em; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); vertical-align: -0.1em; }
.die {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: .28em; font-weight: 900;
  box-shadow: 0 .1em .25em rgba(0,0,0,.45);
}
.die.att { background: #d93b3b; color: #fff; }
.die.def { background: #2f6fde; color: #fff; }
.die.lost { opacity: .35; }
.die.roll { animation: sk-roll .5s ease-out; }
@keyframes sk-roll { 0% { transform: rotate(-200deg) scale(.4); } 70% { transform: rotate(15deg) scale(1.1); } 100% { transform: none; } }

/* ---- dadi con i puntini ---- */
.die3 {
  --s: 1em;
  width: var(--s); height: var(--s); border-radius: 18%;
  display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: calc(var(--s) * .12); box-sizing: border-box; position: relative; flex: 0 0 auto;
  box-shadow: inset 0 -0.06em 0 rgba(0,0,0,.35), inset 0 0.05em 0 rgba(255,255,255,.35), 0 0.08em 0.2em rgba(0,0,0,.5);
  transition: opacity .3s, transform .3s, filter .3s;
}
.die3.att { background: linear-gradient(145deg, #ef5a4a, #b8241c); }
.die3.def { background: linear-gradient(145deg, #4f8ef0, #1f4fb0); }
.die3 .pip { width: 72%; height: 72%; margin: auto; border-radius: 50%; background: #fff; box-shadow: inset 0 0.02em 0.04em rgba(0,0,0,.4); }
.die3 .p1 { grid-area: 1 / 1; } .die3 .p2 { grid-area: 1 / 2; } .die3 .p3 { grid-area: 1 / 3; }
.die3 .p4 { grid-area: 2 / 1; } .die3 .p5 { grid-area: 2 / 2; } .die3 .p6 { grid-area: 2 / 3; }
.die3 .p7 { grid-area: 3 / 1; } .die3 .p8 { grid-area: 3 / 2; } .die3 .p9 { grid-area: 3 / 3; }
.die3.rolling { animation: die-tumble .32s linear infinite; }
.die3.landed { animation: die-land .38s cubic-bezier(.3, 1.6, .5, 1); }
.die3.win { box-shadow: 0 0 0 0.07em #fff, 0 0 0.45em 0.12em #ffd36b; transform: scale(1.08); }
.die3.lose { opacity: .45; filter: grayscale(.7); transform: scale(.88); }
.die3.lose::after { content: '✖'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .9em; color: #fff; text-shadow: 0 0 .1em #000; }
.die3.unused { opacity: .3; }
@keyframes die-tumble {
  0% { transform: rotate(0) translateY(0); } 25% { transform: rotate(90deg) translateY(-12%); }
  50% { transform: rotate(180deg) translateY(0); } 75% { transform: rotate(270deg) translateY(-12%); } 100% { transform: rotate(360deg) translateY(0); }
}
@keyframes die-land { 0% { transform: scale(1.35) rotate(-12deg); } 100% { transform: none; } }
.sk-arrow-line { stroke-dasharray: 14 10; animation: sk-dash 0.6s linear infinite; }
.sk-hi-pick { stroke: #fff; stroke-width: 4; stroke-dasharray: 6 5; animation: sk-dash 0.8s linear infinite; }