.dice-arena { margin:24px 0; padding:24px 28px; border:1px solid #a1e7c740; border-radius:20px; background:radial-gradient(ellipse at 75% 40%,#244a3d88,transparent 65%),linear-gradient(135deg,#102a2b,#0b1b20); box-shadow:0 15px 60px #0002,inset 0 1px #d8ffe710; overflow:hidden; }
.dice-arena-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.dice-arena-heading .eyebrow { font-size:9px; color:#a4c6b6; margin:0 0 6px; letter-spacing:.23em; }
.dice-arena-heading h2 { margin:0; font:32px Georgia,serif; color:#e2eee4; }
.dice-selection-count { color:#b8dfc8; font-size:12px; border:1px solid #aacbb32b; padding:9px 13px; border-radius:22px; white-space:nowrap; }
.dice-arena-help { color:#9fb9af; font-size:12px; line-height:1.7; margin:13px 0 20px; max-width:750px; }
.dice-arena-tools { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.dice-arena-tools>.button { padding:10px 15px; min-height:40px; font-size:11px; }
.dice-action-modes { display:flex; background:#07191e; padding:4px; border-radius:10px; border:1px solid #9ac0aa22; }
.dice-mode { border:0; border-radius:7px; background:transparent; color:#92aa9f; padding:10px 17px; cursor:pointer; font:inherit; font-size:12px; }
.dice-mode.active { color:#0c2523; background:#a1e7c7; }
.dice-mode:disabled { opacity:.4; cursor:not-allowed; }
.dice-arena-target { color:#a5c0b2; display:flex; align-items:center; gap:8px; font-size:12px; }
.dice-arena-target select { padding:8px; max-width:240px; background:#102a2b; border:1px solid #85b39844; color:#d3e7d8; border-radius:6px; }
.dice-stage { position:relative; margin-top:18px; min-height:210px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr); gap:24px; padding:42px 20px 24px; border:1px solid #94c9aa25; border-radius:16px; background-image:radial-gradient(#79a08c16 .8px,transparent .8px); background-size:18px 18px; touch-action:none; user-select:none; }
.dice-pool-caption { position:absolute; top:15px; left:22px; font-size:9px; color:#99b5a4; letter-spacing:.19em; }
.dice-pool { position:relative; display:flex; flex-wrap:wrap; gap:16px; align-content:center; align-items:center; padding:12px 6px; min-height:100px; z-index:2; }
.dice-token { border:0; background:none; padding:5px; cursor:grab; border-radius:15px; outline-offset:6px; touch-action:none; transition:transform .16s; }
.dice-token:hover { transform:translateY(-5px); }
.dice-token.selected { background:#b4edcb12; box-shadow:0 0 0 1px #a1e7c7,0 0 22px #95eac429; }
.dice-token:disabled { opacity:.45; cursor:default; }
.arena-die { display:grid; place-items:center; position:relative; width:57px; height:62px; color:#efffed; font-family:Georgia,serif; background:linear-gradient(135deg,#83bd9b 0%,#2f6c59 45%,#163f3d 100%); box-shadow:inset 1px 1px 0 #e1ffe675,inset -3px -3px 6px #041d2480,0 8px 12px #0006; isolation:isolate; text-shadow:0 2px 2px #082d21; }
.die-cube { width:54px; height:54px; border-radius:12px; border:1px solid #bcf9d097; transform:perspective(350px) rotateX(9deg) rotateY(-12deg); }
.die-poly { clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); }
.die-poly[data-sides="4"] { clip-path:polygon(50% 0,100% 90%,0 90%); padding-top:8px; }
.die-poly[data-sides="8"],.die-poly[data-sides="10"],.die-poly[data-sides="20"] { clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.die-facet { position:absolute; pointer-events:none; border:1px solid #c7ffe53e; z-index:-1; }
.die-poly .die-facet.one { inset:12px 10px; transform:rotate(28deg); }
.die-poly .die-facet.two { inset:0; background:linear-gradient(150deg,#e8ffdf4d,transparent 48%); clip-path:polygon(0 0,100% 0,50% 50%); }
.die-poly .die-facet.three { inset:0; background:#061c282e; clip-path:polygon(100% 0,100% 100%,40% 100%,75% 50%); }
.die-cube .die-facet.one { inset:4px; border-radius:8px; }
.die-value { font-size:27px; font-weight:700; align-self:center; line-height:1; padding-bottom:5px; }
.die-type { position:absolute; bottom:8px; font:7px Arial,sans-serif; letter-spacing:.04em; opacity:.85; }
.dice-dropzone { position:relative; align-self:stretch; min-height:140px; display:flex; flex-direction:column; gap:9px; justify-content:center; align-items:center; background:radial-gradient(ellipse,#61bd8d13,#15372e25); border:1px dashed #99dfb66e; border-radius:50% 45% 48% 42%; color:#a4c1ac; font:inherit; cursor:pointer; transition:background .2s,box-shadow .2s; z-index:2; }
.dice-dropzone strong { font-family:Georgia,serif; font-size:21px; font-weight:400; }
.dice-dropzone>span:last-child { font-size:11px; }
.dice-drop-symbol { font-size:27px; color:#c1dc9d; line-height:1; }
.dice-dropzone.armed { border-color:#b3e4a9; box-shadow:inset 0 0 38px #75c89717; }
.dice-dropzone.armed:hover,.is-carrying .dice-dropzone { background:#8adeac22; box-shadow:0 0 25px #91e7b117,inset 0 0 25px #b3efb515; }
.dice-dropzone:disabled { opacity:.55; cursor:default; }
.dice-lasso { pointer-events:none; position:absolute; inset:0; width:100%; height:100%; z-index:3; overflow:visible; }
.dice-lasso path { fill:#a1e7c726; stroke:#c3ffcf; stroke-width:2; stroke-dasharray:5 4; filter:drop-shadow(0 0 4px #83eab0); }
.dice-arena-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:16px 0; }
.dice-arena-status { color:#bdd7bf; font-size:11px; line-height:1.6; margin:0; }
.dice-arena-bottom>.button { min-width:215px; justify-content:center; font-size:12px; }
.dice-arena-bottom>.button:not(:disabled) { background:#a1e7c7; color:#0c2523; border-color:#a1e7c7; }
.dice-pool-wait { color:#869f93; font-size:12px; line-height:1.8; padding:0 8px; }
.dice-results { position:relative; min-height:125px; border-top:1px solid #9db9a528; padding:17px 0 0; }
.dice-result-title { color:#dcebd5; font-size:12px; margin:0 0 16px; }
.dice-landed { display:flex; flex-wrap:wrap; gap:14px; padding:4px 4px 14px; perspective:500px; min-height:64px; }
.landed-die { background:linear-gradient(135deg,#e3cb91,#8c784d 48%,#493d2b); color:#fff6d7; }
.dice-recent { color:#9db9a8; font-size:11px; margin-top:10px; }
.dice-recent summary { cursor:pointer; padding:9px 0; }
.dice-recent ol { max-height:175px; overflow:auto; padding-left:22px; line-height:2; margin:8px 0; }
.dice-cursor-stack { position:fixed; left:0; top:0; pointer-events:none; z-index:1000; will-change:transform; width:150px; height:90px; }
.dice-cursor-stack .arena-die { position:absolute; left:calc(var(--stack) * 12px); top:calc(var(--stack) * -3px); transform:rotate(calc(var(--stack) * 6deg - 9deg)) scale(.8); box-shadow:0 9px 25px #0008; }
.stack-extra { color:#d2f9d8; background:#123f30; padding:4px; position:absolute; left:120px; top:40px; font-size:12px; }
.dice-arena button:focus-visible,.dice-arena select:focus-visible { outline:2px solid #d2f1b7; outline-offset:4px; }
@media(max-width:650px) {
 .dice-arena { padding:20px 15px; border-radius:14px; }
 .dice-arena-heading { align-items:flex-start; flex-direction:column; gap:12px; }
 .dice-arena-heading h2 { font-size:27px; }
 .dice-stage { grid-template-columns:1fr; gap:18px; padding:38px 12px 18px; }
 .dice-pool { justify-content:center; gap:12px; }
 .dice-dropzone { min-height:125px; border-radius:20px; }
 .dice-arena-bottom { flex-direction:column; align-items:stretch; gap:14px; }
 .dice-arena-target { width:100%; }
 .dice-arena-tools { gap:8px; }
 .dice-arena-tools>.button { font-size:10px; }
 .dice-selection-count { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
 .dice-token,.dice-dropzone { transition:none; }
}