/* Feltro unico: il canvas occupa tutto il vassoio, i dadi si toccano sul feltro (bersagli posati da dice-view.js). */
.room-grid--play .dice-stage:has(.dice-renderer--capsule){min-height:300px;isolation:isolate}
.dice-stage:has(.dice-renderer--capsule) .dice-scene{inset:0;overflow:visible;pointer-events:none}
.dice-renderer--capsule{pointer-events:none}
.dice-stage:has(.dice-renderer--capsule) .die-wrap{z-index:2}
@media(max-width:700px){.room-grid--play .dice-stage:has(.dice-renderer--capsule){min-height:265px}}

/* Il layout da app aveva solo ~100px per il canvas: riservare altezza alla capsula evita il rimpicciolimento. */
/* Il contenitore del canvas prende le misure dalla scena, mai dal canvas stesso. */
.dice-renderer{position:absolute;inset:0}
.app-layout-active .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:66px minmax(0,1fr) min(28dvh,calc(24vw + 90px))}
@media(max-width:760px){.app-layout-active .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:61px minmax(0,1fr) min(28dvh,calc(24vw + 90px))}}
@media(max-height:720px) and (max-width:760px){.app-layout-active .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:55px minmax(0,1fr) min(28dvh,calc(24vw + 90px))}}

/* Punteggi ancorati nel viewport; tavolo dadi dimezzato su richiesta di Daniele. */
.app-layout-active .room-grid--play>.score-panel{position:relative;align-self:stretch;overflow-y:auto;overscroll-behavior:contain}
/* iPad e oltre, con la chat accanto: il foglio finisce col Totale invece di allungarsi lungo la colonna (righe vuote); se non ci sta, scorre.
   In solitaria il foglio e' l'unica colonna e resta pagina intera. */
@media(min-width:761px){.app-layout-active .room-page:not(.app-layout-solo)>.room-grid--play>.score-panel{align-self:start;height:auto;max-height:100%}}
.app-layout-active .score-reference .sr-banner,.app-layout-active .score-reference .sr-note,.app-layout-active .score-reference .sr-compare{display:none}
.app-layout-active .score-reference{padding:6px!important}
.app-layout-active .score-reference .sr-row{min-height:44px}
.app-layout-active .score-reference .sr-column{gap:2px}
.app-layout-active .score-reference .sr-board{padding:4px}
.app-layout-active .score-reference .sr-column h3{min-height:18px;padding-block:2px}
.app-layout-active .score-reference .sr-collection{margin:0 2px 4px}
.app-layout-active .score-reference .sr-footer{position:sticky;bottom:0;z-index:3;margin-top:4px;padding:3px 6px;min-height:38px}
.app-layout-active .score-reference .sr-medal{width:29px;height:29px;font-size:13px}
.app-layout-active .score-reference .sr-total strong{font-size:29px}
@media(max-width:760px){
.app-layout-active .masthead{height:44px;min-height:44px}
.app-layout-active .room-top{margin-bottom:4px}
.app-layout-active .room-heading{min-height:28px}
.app-layout-active .room-title h1{font-size:24px}
.app-layout-active .room-title .eyebrow{display:none}
.app-layout-active .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:50px minmax(0,1fr) min(28dvh,calc(24vw + 90px));gap:5px}
.app-layout-active .room-grid--play>.players-strip,.app-layout-active .players-strip>.player-tile{height:50px}
.app-layout-active .room-grid--play>.felt{padding:0 8px 5px}
.app-layout-active .felt-actions{min-height:46px;padding-top:2px}
.app-layout-active .felt-actions .btn{padding-block:6px}
}
.app-layout-active .score-reference .sr-points{min-height:24px;font-size:23px}
.app-layout-active .score-reference .sr-value{gap:0}
.app-layout-active .room-title p{display:none}

.app-layout-active .room-heading:has(.game-outlook){display:block}
.app-layout-active .room-title:has(.game-outlook){width:100%}
.app-layout-active .room-title:has(.game-outlook)>.eyebrow,.app-layout-active .room-heading:has(.game-outlook)>.room-state{display:none}
.game-outlook{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px}
.app-layout-active .game-outlook h1,.maximum-left{display:flex;align-items:center;gap:8px;margin:0}
.game-outlook strong{font:42px/.95 var(--f-display);color:var(--notte);text-shadow:2px 2px 0 var(--bianco)}
.game-outlook span{font:800 11px/1.1 var(--f-ui);text-transform:uppercase;max-width:100px;color:var(--grigio)}
.game-outlook small{display:block;font-size:9px;font-weight:600;opacity:.8;margin-top:3px}
.game-outlook .last-turns strong,.game-outlook .last-turns span{color:var(--rosso)}
@media(max-width:420px){.game-outlook{gap:8px;min-height:44px}.game-outlook strong{font-size:34px}.game-outlook span{font-size:9px;max-width:76px}.game-outlook small{font-size:8px}}

/* Tetto della partita sempre leggibile, accanto ai turni rimasti. */
.game-outlook .maximum-left{padding:8px 12px;border:2px solid var(--bianco);border-radius:12px;background:var(--notte);box-shadow:0 0 0 2px var(--notte),3px 4px 0 2px #18213e55;gap:10px}
.game-outlook .maximum-left strong{font-size:48px;color:var(--bianco);text-shadow:none;font-variant-numeric:tabular-nums}
.game-outlook .maximum-left span{color:var(--cielo-chiaro)}
@media(max-width:420px){.game-outlook .maximum-left{padding:6px 9px;gap:7px}.game-outlook .maximum-left strong{font-size:38px}}

/* Il pulsante Messaggi, fisso in alto a destra, non deve coprire la riga del titolo. */
@media(max-width:760px){.app-layout-active .room-heading{margin-top:8px}}

/* Bersagli di tocco: trasparenti, centrati sul dado della fila, almeno 44px anche su iPhone. */
.dice-stage.has-physics .die-wrap{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%)}
.dice-stage.has-physics .die,.app-layout-active .dice-stage.has-physics .die{width:var(--dado-tocco,52px);height:var(--dado-tocco,52px);min-width:44px;min-height:44px;padding:0;border:0;border-radius:14px;background:transparent;box-shadow:none;transform:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dice-stage.has-physics .die .pip,.dice-stage.has-physics .die-label,.dice-stage.has-physics .die.empty{display:none}
.dice-stage.has-physics .die.in-tiro{pointer-events:none}
.dice-stage.has-physics .die:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px #18213e}
.dice-stage.has-physics .die:active:not(:disabled){transform:none}
.felt-hint{position:absolute;left:50%;top:8px;z-index:3;margin:0;padding:5px 12px;border:2px solid #18213e;border-radius:99px;background:#fff;color:#18213e;font:800 12px/1.2 var(--f-ui);white-space:nowrap;transform:translateX(-50%);box-shadow:2px 3px 0 #18213e;pointer-events:none;animation:felt-hint-in .35s ease-out both}
@keyframes felt-hint-in{from{opacity:0;transform:translate(-50%,-6px)}}
.roll-progress h2{margin:0;font:700 22px/.95 var(--f-display);text-transform:uppercase}
.roll-progress{gap:2px;min-width:0}

/* Dadi e feltro (bozzetto B): a dadi fermi la fila e' in primo piano, larga quanto lo schermo; il feltro e' una finestra a fumetto. */
.dice-stage:has(.dice-renderer--capsule) .dice-scene{overflow:hidden;border-radius:18px}
.dice-stage.has-physics .die.tenuto::after{content:"Tenuto";position:absolute;left:50%;bottom:-7px;padding:3px 12px;border-block:2px solid #18213e;background:#ffd23f;color:#18213e;font:900 10px/1 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%) rotate(-5deg);clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%);pointer-events:none}
.dadi-in-volo .dice-stage .die.tenuto::after{visibility:hidden}

/* Pulsante e contatore (copertina): niente scatola attorno al feltro; titolo e tiri a inchiostro, pulsante adesivo blu notte. */
.room-grid--play>.felt{background:transparent;border:0;box-shadow:none}
.dice-stage:has(.dice-renderer--capsule) .dice-scene{background:#6fa9c4;box-shadow:inset 0 0 0 3px #18213e}
.roll-progress{display:grid;gap:3px;min-width:0}
.roll-progress h2{margin:0;color:#18213e;font:400 24px/.95 Anton,var(--f-display);letter-spacing:.03em;text-transform:uppercase;text-shadow:2px 2px 0 #fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roll-progress span{color:#18213e;font:400 14px/1 Anton,var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.felt-actions .btn{min-width:150px;padding:10px 22px;border-radius:999px;font:400 19px/1 Anton,var(--f-display);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.felt--attesa .roll-progress span{display:none}
.felt--attesa .roll-progress h2{font-size:21px;white-space:normal}
@media(max-width:380px){.roll-progress h2{font-size:20px}.felt-actions .btn{min-width:128px;padding-inline:14px;font-size:17px}}
/* Hypermotion (Daniele 15/10): scie radiali solo mentre la camera dei dadi corre, intensita' da --mosso (0-1) scritta dalla scena. */
.dice-renderer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(var(--mosso,0)*.75);background:repeating-conic-gradient(from 3deg at 50% 46%,rgba(255,255,255,.55) 0 .35deg,transparent .35deg 4.7deg),repeating-conic-gradient(from 1deg at 50% 46%,rgba(235,246,255,.4) 0 .8deg,transparent .8deg 7.3deg),repeating-conic-gradient(from 0deg at 50% 46%,rgba(255,255,255,.3) 0 .2deg,transparent .2deg 2.9deg);-webkit-mask:radial-gradient(closest-side at 50% 46%,transparent 45%,#000 135%);mask:radial-gradient(closest-side at 50% 46%,transparent 45%,#000 135%)}