/* ---------------------------------------------------------------------------
   Palettes. Every colour is a token so a single [data-theme] swap repaints the
   whole table, dice and decor. :root carries the default "Ciel" palette so pages
   without a data-theme attribute (404) stay themed. Shadows stay dark on purpose
   (theme-neutral depth). No data: URIs — decor is inline SVG to satisfy the CSP.
   --------------------------------------------------------------------------- */
:root,:root[data-theme="sky"]{
  --bg:#0d1b2e;--glow:#1b3a5e66;--ink:#eef4fb;--muted:#9db2ca;--line:#2f4d6e66;--line-2:#4a6d9622;
  --accent:#ff8a3d;--accent-hi:#ffa45e;--on-accent:#1b1005;--second:#6cb8f2;
  --felt:#15304d;--felt-glow:#2a5a86aa;--felt-ink:#a8c2dd;--surface:#152b45;--watermark:#8fb4d855;
  --die-a:#fbfdff;--die-b:#d9e6f3;--die-edge:#c4d6e6;--pip:#16324e;--mark:#ffb067;--mark-2:#bfe0ff;
}
:root[data-theme="spider"]{
  --bg:#0e1230;--glow:#5a132233;--ink:#f3f0f7;--muted:#a9a2c0;--line:#3a2f5e66;--line-2:#5a4a8822;
  --accent:#e42638;--accent-hi:#ff4152;--on-accent:#fff2f3;--second:#3f6fe0;
  --felt:#1a1340;--felt-glow:#3a1f66aa;--felt-ink:#b8aede;--surface:#171133;--watermark:#9a8fd055;
  --die-a:#fdf7f8;--die-b:#e6d5da;--die-edge:#d9c4ca;--pip:#a01826;--mark:#7682cf;--mark-2:#e42638;
}
:root[data-theme="hulk"]{
  --bg:#0c1a0b;--glow:#1c5a1a33;--ink:#eef7e8;--muted:#9dc096;--line:#2c4f2a66;--line-2:#4a7a4522;
  --accent:#52cf3e;--accent-hi:#6ee85a;--on-accent:#0a2206;--second:#8a5cd0;
  --felt:#123010;--felt-glow:#205a1caa;--felt-ink:#a6c89f;--surface:#0f2a0d;--watermark:#8fc08555;
  --die-a:#f6fbf2;--die-b:#d6e6cf;--die-edge:#c3d8ba;--pip:#1a4514;--mark:#49b23a;--mark-2:#8a5cd0;
}
:root[data-theme="cap"]{
  --bg:#0a1230;--glow:#1a2f6633;--ink:#f1f4fb;--muted:#9fb0d4;--line:#2a3c6e66;--line-2:#4a5f9622;
  --accent:#e5324a;--accent-hi:#ff4b61;--on-accent:#fff2f4;--second:#3a63d8;
  --felt:#121f48;--felt-glow:#22347aaa;--felt-ink:#adbbe0;--surface:#0f1a40;--watermark:#9aa8dd55;
  --die-a:#fbfcff;--die-b:#dde4f2;--die-edge:#c9d3ea;--pip:#16224e;--mark:#e5324a;--mark-2:#3a63d8;
}

:root{color-scheme:dark;--die:76px;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background:radial-gradient(ellipse at 50% 40%,var(--glow),transparent 65%);min-height:100svh;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
button:disabled{cursor:default}

.masthead{display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto}
.brand{text-decoration:none;color:var(--ink);font-family:Georgia,serif;font-size:38px;font-weight:bold;letter-spacing:-2px;display:flex;align-items:center;gap:9px}
.brand-dot{color:var(--accent);margin-left:-9px}
.brand-icon{font-family:system-ui;font-size:25px;letter-spacing:0;border:1px solid var(--line);border-radius:9px;padding:0 6px;transform:rotate(-10deg)}
.edition{font-size:10px;letter-spacing:3px;color:var(--muted)}
.signature{font-size:12px;color:var(--muted)}

main{width:min(100%,880px);margin:46px auto 42px}
.intro{text-align:center}
.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--second)}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:normal;font-size:clamp(38px,5.3vw,64px);letter-spacing:-2px;margin:15px 0 12px}
h1 span{color:var(--accent)}
.intro p{color:var(--muted);font-size:14px;margin:0 0 30px}

/* Palette picker — buttons, so a tap, a click or the keyboard all select. */
.palette-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 34px;max-width:760px}
.swatch{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;letter-spacing:.3px;transition:border-color .15s,color .15s,transform .15s}
.swatch:hover{transform:translateY(-1px)}
.swatch[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}
.swatch .dots{display:inline-flex;align-items:center}
.swatch .dots i{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}
.swatch .dots i+i{margin-left:-5px}
.sw-sky i:nth-child(1){background:#15304d}.sw-sky i:nth-child(2){background:#ff8a3d}.sw-sky i:nth-child(3){background:#6cb8f2}
.sw-spider i:nth-child(1){background:#1a1340}.sw-spider i:nth-child(2){background:#e42638}.sw-spider i:nth-child(3){background:#3f6fe0}
.sw-hulk i:nth-child(1){background:#123010}.sw-hulk i:nth-child(2){background:#52cf3e}.sw-hulk i:nth-child(3){background:#8a5cd0}
.sw-cap i:nth-child(1){background:#121f48}.sw-cap i:nth-child(2){background:#e5324a}.sw-cap i:nth-child(3){background:#3a63d8}

.play-area{position:relative;border:1px solid var(--line);border-radius:24px;background:radial-gradient(ellipse at 48% 35%,var(--felt-glow),transparent 74%),var(--felt);box-shadow:inset 0 0 70px #0a1f2533,0 20px 60px #06171033;overflow:hidden}
.play-area:before{content:"";pointer-events:none;position:absolute;inset:9px;border:1px solid var(--line-2);border-radius:17px}
.table-meta,.table-bottom{display:flex;justify-content:space-between;align-items:center;padding:25px 28px;pointer-events:none;position:relative;z-index:1;color:var(--felt-ink)}
.table-meta{font-size:9px;letter-spacing:1.6px}
.table-meta i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:7px}
.table{display:block;position:relative;border:0;background:transparent;width:100%;height:clamp(220px,33vh,350px);overflow:hidden;perspective:1000px}
.table:focus-visible{outline-offset:-7px}
.table-watermark{position:absolute;left:0;right:0;bottom:15px;font:italic 15px Georgia,serif;letter-spacing:.5px;color:var(--watermark);pointer-events:none;z-index:2}
.table-bottom{padding-top:12px;padding-bottom:22px;font-size:11px;color:var(--felt-ink)}
.keyboard-hint{color:var(--felt-ink);opacity:.8}
kbd{font:10px ui-sans-serif,system-ui;border:1px solid var(--line);padding:3px 6px;border-radius:4px;margin-right:5px}
.result{border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;gap:24px;padding:17px 24px;min-height:83px;background:var(--surface)}
#result-caption{font-size:9px;letter-spacing:1.5px;color:var(--felt-ink)}
#result-value{font:38px Georgia,serif;color:var(--accent);min-width:32px;text-align:center}
#result-detail{font-size:12px;color:var(--felt-ink)}

.controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:24px 0 0}
.quantity{display:flex;align-items:center;gap:18px}
.control-label{font-size:12px;color:var(--muted)}
.stepper{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:4px;background:var(--surface)}
.stepper button{width:40px;height:40px;background:transparent;border:0;border-radius:8px;font-size:24px}
.stepper button:hover:not(:disabled){background:#ffffff0c}
.stepper button:disabled{opacity:.25}
.stepper output{min-width:14px;text-align:center;font-variant-numeric:tabular-nums}
.roll-button{display:flex;align-items:center;justify-content:center;gap:22px;min-height:54px;padding:0 26px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:600;box-shadow:0 4px 18px #0c201933;transition:background .15s,transform .15s}
.roll-button:hover{background:var(--accent-hi);transform:translateY(-1px)}
.roll-button:disabled{opacity:.7;transform:none}
.roll-button>span:first-child{font-size:25px;font-weight:400}
.roll-button>span:last-child{font-size:20px;font-weight:400}

footer{max-width:1440px;margin:auto;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
.footer-dot{padding:0 8px}

#dice{position:absolute;inset:0;pointer-events:none;z-index:1}
.die-position{position:absolute;width:var(--die);height:var(--die);left:50%;top:45%;margin:calc(var(--die)/-2);transform-style:preserve-3d}
.die-shadow{position:absolute;inset:6px;background:#06191088;filter:blur(9px);border-radius:18px;transform:translate(5px,12px)}
.die{position:absolute;inset:0;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7%;padding:18%;border-radius:15%;background:linear-gradient(135deg,var(--die-a),var(--die-b));border:1px solid var(--die-edge);box-shadow:inset 2px 2px 4px #ffffffcc,inset -2px -2px 5px #4a4a4a33}
.pip{background:var(--pip);border-radius:50%;box-shadow:inset 1px 2px 2px #0006,0 1px 0 #ffffff80;opacity:0}
.pip.visible{opacity:1}
.face-1{transform:translateZ(calc(var(--die)/2))}
.face-6{transform:rotateY(180deg) translateZ(calc(var(--die)/2))}
.face-2{transform:rotateY(90deg) translateZ(calc(var(--die)/2))}
.face-5{transform:rotateY(-90deg) translateZ(calc(var(--die)/2))}
.face-3{transform:rotateX(90deg) translateZ(calc(var(--die)/2))}
.face-4{transform:rotateX(-90deg) translateZ(calc(var(--die)/2))}

/* Themed decor — one SVG per palette behind the dice, revealed by data-theme. */
.decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.decor svg{position:absolute;inset:0;width:100%;height:100%;display:none}
:root:not([data-theme]) .d-sky,[data-theme="sky"] .d-sky{display:block}
[data-theme="spider"] .d-spider{display:block}
[data-theme="hulk"] .d-hulk{display:block}
[data-theme="cap"] .d-cap{display:block}
.d-sky .sun{fill:var(--mark);opacity:.15}
.d-sky .ray{stroke:var(--mark);stroke-width:2;stroke-linecap:round;opacity:.13}
.d-sky .cloud{stroke:var(--mark-2);stroke-width:5;stroke-linecap:round;fill:none;opacity:.1}
.d-spider .web{stroke:var(--mark);stroke-opacity:.5;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.d-spider .spider-legs{stroke:var(--mark-2);stroke-width:1.7;stroke-opacity:.7;fill:none;stroke-linecap:round}
.d-spider .spider-body{fill:var(--mark-2);fill-opacity:.8}
.d-hulk .cracks{stroke:var(--mark);stroke-width:1.7;fill:none;stroke-linejoin:round;stroke-linecap:round;opacity:.22}
.d-hulk .fist{fill:var(--mark);fill-opacity:.17;stroke:var(--mark);stroke-opacity:.3;stroke-width:1.5}
.d-cap .shield{opacity:.14}
.d-cap .ring-red{fill:var(--mark)}
.d-cap .ring-white{fill:var(--ink)}
.d-cap .ring-blue{fill:var(--mark-2)}
.d-cap .star{fill:var(--ink)}

/* Hulk smash: a short table shake + crack flash when the dice land. JS adds the
   class only when motion is allowed, so reduced-motion users never see it. */
@keyframes de-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes de-crack{0%{opacity:.22}28%{opacity:.62}100%{opacity:.22}}
.table.smash{animation:de-shake .42s cubic-bezier(.36,.07,.19,.97)}
.table.smash .d-hulk .cracks{animation:de-crack .5s ease-out}

@media(max-width:600px){
  body{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .edition{display:none}
  main{margin:34px auto 32px}
  .intro p{font-size:12px;margin-bottom:22px}
  .eyebrow{font-size:8px;letter-spacing:2px}
  .palette-bar{gap:8px;margin-bottom:26px}
  .swatch{font-size:11px;padding:6px 12px 6px 9px;gap:7px}
  .swatch .dots i{width:11px;height:11px}
  .table-meta{padding:21px 18px;font-size:8px;letter-spacing:1px}
  .table{height:clamp(245px,37svh,390px)}
  .table-bottom{padding:10px 18px 20px;justify-content:center}
  .keyboard-hint{display:none}
  .result{gap:15px;flex-wrap:wrap;padding:13px 18px;min-height:82px}
  #result-caption{font-size:8px;max-width:85px;line-height:1.7}
  #result-detail{font-size:11px}
  .controls{gap:16px}
  .quantity{flex-direction:column;gap:8px;align-items:flex-start}
  .control-label{font-size:10px}
  .stepper{gap:7px}
  .stepper button{width:36px;height:36px}
  .roll-button{gap:12px;padding:0 19px;min-height:52px;align-self:flex-end;font-size:13px}
  footer{font-size:9px}
  .footer-dot{padding:0 3px}
}
@media(max-width:350px){
  .result{gap:10px}
  #result-detail{max-width:100px}
  .roll-button{padding:0 12px;gap:9px}
  .stepper{gap:5px}
  .stepper button{width:32px}
  .table-meta{font-size:7px}
  footer{gap:10px}
}
@media(max-height:550px) and (min-width:600px){
  main{margin-top:15px}
  .intro p{margin-bottom:12px}
  .eyebrow{display:none}
  h1{font-size:35px;margin-top:5px}
  .palette-bar{margin-bottom:16px}
  .table{height:160px}
  .table-meta{padding:15px 24px}
  .controls{margin-top:15px}
  .result{min-height:65px;padding:10px}
  footer{padding-top:5px}
}
@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important;animation:none!important;scroll-behavior:auto!important}}