/* Tavolo da app: caricare dopo tavolo.css. Solo la schermata partita usa il viewport fisso. */
.app-chat-backdrop[hidden]{display:none!important}.app-chat-backdrop{position:fixed;inset:0;z-index:49;background:#18213e99;backdrop-filter:blur(4px)}.app-chat-close{display:none}.app-layout-solo .room-top{position:relative}.app-layout-solo .room-grid--play{grid-template-columns:1fr;grid-template-areas:"players" "score" "felt"}.app-chat-close:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}
@media(min-width:0px){
  body.app-layout-active{height:100dvh;overflow:hidden;overscroll-behavior:none}
  .app-layout-active .app-shell{height:100dvh;min-height:0;overflow:hidden}
  .app-layout-active .masthead{flex:none;height:54px;min-height:54px}
  .app-layout-active main{flex:1;min-height:0;overflow:hidden}
  .app-layout-active .site-footer{display:none}
  .app-layout-active .room-page{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;max-height:100%;overflow:hidden;padding:5px 14px 9px!important}
  .app-layout-active .room-top{position:relative;flex:none;width:100%;margin:0 auto 8px}
  .app-layout-active .back-button{min-height:44px;font-size:12px}
  .app-layout-active .room-heading{align-items:center;min-height:43px}
  .app-layout-active .room-title h1{font-size:clamp(27px,3.8vw,34px);line-height:.91;margin:3px 0 0}
  .app-layout-active .room-title p{font-size:11px;margin:3px 0 0}
  .app-layout-active .room-state{font-size:10px;flex:none}
  .app-layout-active .room-grid--play{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 315px;grid-template-rows:66px minmax(0,1fr) clamp(265px,27dvh,310px);grid-template-areas:"players players" "score side" "felt felt";gap:8px;align-items:stretch}
  .app-layout-active .room-grid--play>.players-strip{grid-area:players;display:flex;gap:8px;height:66px;min-height:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin}
  .app-layout-active .players-strip>.player-tile{flex:0 0 160px;height:64px;min-height:0;padding:6px 9px}
  .app-layout-active .room-grid--play>.score-panel{grid-area:score;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-color:var(--edge) transparent}
  .app-layout-active .room-grid--play>.side-stack{grid-area:side;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;align-content:start;grid-template-columns:minmax(0,1fr)}
  .app-layout-active .side-stack>.chat-panel{min-width:0;min-height:290px}
  .app-layout-active .room-grid--play>.felt,.app-layout-active .room-grid--play>.results{grid-area:felt;min-height:0;height:100%;overflow:hidden}
  /* Fine partita: col pari merito il titolo va su due righe, il pannello scorre fino al pulsante della lavagnetta. */
  .app-layout-active .room-grid--play>.results{overflow-y:auto;overscroll-behavior:contain}
  .app-layout-active .felt{display:grid;grid-template-rows:minmax(0,1fr) auto;padding:10px 14px 12px}
  .app-layout-active .room-grid--play .dice-stage{min-height:0!important;height:100%;align-items:flex-end;padding:0 0 2px;overflow:hidden}
  .app-layout-active .felt-actions{min-height:53px;padding-top:7px}
  .app-layout-active .felt-actions .btn{min-height:46px}
  .app-layout-active .app-layout-solo .room-grid--play{grid-template-columns:1fr;grid-template-areas:"players" "score" "felt"}}
@media(max-width:760px){
  .app-layout-active .masthead{height:50px;min-height:50px}
  .app-layout-active .room-page{padding:2px 9px 8px!important}
  .app-layout-active .room-top{margin-bottom:6px}
  .app-layout-active .back-button{min-height:44px;padding-left:3px}
  .app-layout-active .room-heading{min-height:36px;gap:6px}
  .app-layout-active .room-title h1{font-size:29px;line-height:.89;white-space:nowrap;letter-spacing:0}
  .app-layout-active .room-title .eyebrow{font-size:9px;letter-spacing:.1em}
  .app-layout-active .room-title p{display:none}
  .app-layout-active .room-state{padding:5px 7px;font-size:9px}
  .app-layout-active .room-grid--play,.app-layout-active .app-layout-solo .room-grid--play{grid-template-columns:minmax(0,1fr);grid-template-rows:61px minmax(0,1fr) clamp(248px,34dvh,302px);grid-template-areas:"players" "score" "felt";gap:7px}
  .app-layout-active .room-grid--play>.players-strip{height:61px}
  .app-layout-active .players-strip>.player-tile{height:59px;flex-basis:153px}
  .app-layout-active .room-grid--play>.score-panel{padding:9px 11px;scroll-padding-top:5px}
  .app-layout-active .room-grid--play>.felt{padding:8px 10px 9px}
  .app-layout-active .room-grid--play .dice-stage{padding-bottom:0}
  .app-layout-active .felt-actions{min-height:49px;padding-top:5px}
  .app-layout-active .felt-actions .btn{min-height:44px}
  .app-layout-active .room-grid--play>.side-stack{display:none!important}
  .app-layout-active.app-chat-open .room-grid--play>.side-stack{display:flex!important;position:fixed;z-index:55;top:0;right:0;bottom:0;width:min(100vw,430px);height:100dvh;min-height:0;padding:12px 12px max(16px,env(safe-area-inset-bottom));overflow-y:auto;flex-direction:column;gap:10px;background:var(--night);border-left:2px solid var(--notte);box-shadow:-6px 0 0 #18213e33}
  .app-layout-active .app-chat-close{position:sticky;top:0;z-index:1;display:block;align-self:end;min-height:44px;padding:8px 13px;border:2px solid var(--notte);border-radius:10px;background:var(--bianco);color:var(--cream);font:800 12px var(--f-ui)}
  .app-layout-active .side-stack>.chat-panel{order:2;min-height:0;flex:1}
  .app-layout-active .chat-log{height:min(34dvh,280px)}
  .app-layout-active .chat-log>.chat-message{flex-shrink:0}
  .app-layout-active .chat-jump{position:fixed;z-index:45;top:calc(54px + env(safe-area-inset-top));right:10px;bottom:auto;display:inline-flex;min-height:44px;padding:0 12px;border-radius:8px;font-size:11px}
  .app-layout-active.app-chat-open .chat-jump{visibility:hidden}
  /* Risultati: la pagina scorre, il pulsante resta nell'intestazione invece di coprire le righe della scheda. */
  .app-layout-active .room-page:has(.room-grid--play>.results) .chat-jump{position:absolute}
  /* Attesa con inviti in vista (Daniele 13/10): anche qui la pagina scorre, il pulsante resta nell'intestazione e non copre «Inizia la partita». */
  .app-layout-active .room-page:has(.room-grid--play>.felt--inviti) .chat-jump{position:absolute}}
@media(max-width:360px){.app-layout-active .room-title h1{font-size:25px}.app-layout-active .room-grid--play,.app-layout-active .app-layout-solo .room-grid--play{grid-template-rows:58px minmax(0,1fr) 245px}}
@media(max-height:720px) and (max-width:760px){.app-layout-active .room-grid--play,.app-layout-active .app-layout-solo .room-grid--play{grid-template-rows:55px minmax(0,1fr) 238px}.app-layout-active .room-grid--play>.players-strip,.app-layout-active .players-strip>.player-tile{height:55px}.app-layout-active .room-title h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){.app-layout-active *,.app-chat-backdrop{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.app-layout-active .room-grid--play{width:100%;margin:0}/* Fino a 4 giocatori tutti a vista a 375 px (partita di prova 14/10: Paolo e Salvatore restavano fuori schermo). */.app-layout-active .players-strip>.player-tile{flex:1 1 0;min-width:0}.app-layout-active .players-strip>.player-tile .who{min-width:0;max-width:100%}.app-layout-active .players-strip>.player-tile strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-layout-active .players-strip>.player-tile:not(:only-child){flex-direction:column;justify-content:center;gap:2px;padding:2px 4px}.app-layout-active .players-strip>.player-tile:not(:only-child) .viso,.app-layout-active .players-strip>.player-tile:not(:only-child) .generic-avatar{width:36px;height:36px}.app-layout-active .players-strip>.player-tile:not(:only-child) strong{font-size:12px;text-align:center}.app-layout-active .players-strip>.player-tile:only-child{flex-basis:100%}

/* La scheda occupa l'altezza disponibile: sette caselle nella colonna piu' lunga. */
@media(min-width:761px), (min-width:700px) and (min-height:900px){
  .app-layout-active .room-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .app-layout-active .room-heading{flex:1;min-width:0;min-height:44px}
  .app-layout-active .room-title h1{font-size:clamp(24px,3dvh,30px);margin:0}
  .app-layout-active .room-title p{display:none}
  .app-layout-active .room-grid--play>.score-panel{min-height:0;padding:4px 5px!important;overflow-y:auto}
  .app-layout-active .score-reference{display:grid;align-content:start;gap:clamp(2px,.45dvh,5px)}
  .app-layout-active .score-reference .sr-banner{height:clamp(34px,5dvh,45px);min-height:0;margin:0;padding:2px 6px}
  .app-layout-active .score-reference .sr-avatar{width:clamp(29px,4dvh,38px);height:clamp(29px,4dvh,38px)}
  .app-layout-active .score-reference .sr-game{gap:2px;margin:0;padding:4px 6px}
  .app-layout-active .score-reference .sr-game-head strong{font-size:15px}
  .app-layout-active .score-reference .sr-game-values b{font-size:19px}
  .app-layout-active .score-reference .sr-game-track{height:7px}
  .app-layout-active .score-reference .sr-collection{margin:0 3px;font-size:9px}
  .app-layout-active .score-reference .sr-board{min-height:0;padding:3px 4px}
  .app-layout-active .score-reference .sr-columns{gap:4px}
  .app-layout-active .score-reference .sr-column{min-height:0;gap:2px}
  .app-layout-active .score-reference .sr-column h3{min-height:16px;padding:1px 4px;font-size:11px}
  .app-layout-active .score-reference .sr-row{min-height:clamp(36px,calc(7.5dvh - 18px),50px);padding:0 2px}
  .app-layout-active .score-reference .sr-symbol,.app-layout-active .score-reference .sr-icon{width:26px;height:26px}
  .app-layout-active .score-reference .sr-caption{gap:1px;padding:0}
  .app-layout-active .score-reference .sr-meter{gap:0}
  .app-layout-active .score-reference .sr-meter-limits{font-size:7px}
  .app-layout-active .score-reference .sr-name{font-size:clamp(10px,1.5dvh,12px)}
  .app-layout-active .score-reference .sr-points{height:100%;min-height:0;font-size:clamp(18px,2.7dvh,24px)}
  .app-layout-active .score-reference .sr-footer{min-height:32px;margin-top:3px;padding:2px 5px}
  .app-layout-active .score-reference .sr-medal{width:29px;height:29px;font-size:13px}
  .app-layout-active .score-reference .sr-bonus-track{margin-top:2px}
  .app-layout-active .room-page>#abandon-room{margin:3px 0 0;flex:none}
}
@media(min-width:761px){
  .app-layout-active .room-grid--play{grid-template-columns:minmax(0,1fr) clamp(290px,30vw,330px);grid-template-rows:56px minmax(0,1fr) clamp(250px,30dvh,320px);grid-template-areas:"players players" "score side" "felt felt";gap:6px}
  .app-layout-active .app-layout-solo .room-grid--play{grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) clamp(250px,30dvh,320px);grid-template-areas:"players" "score" "felt"}
  body.app-layout-active .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:56px minmax(0,1fr) clamp(250px,30dvh,320px)}
  body.app-layout-active .app-layout-solo .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:56px minmax(0,1fr) clamp(250px,30dvh,320px)}
  body.app-layout-active .score-reference .sr-row{min-height:clamp(36px,calc(10dvh - 64px),50px)}
  body.app-layout-active .score-reference .astra-records{margin-top:4px;padding-top:4px;gap:4px}
  .app-layout-active .room-grid--play>.players-strip{height:56px}
  .app-layout-active .players-strip>.player-tile{height:54px}
  .app-layout-active .room-grid--play>.felt{min-height:0;padding:6px 8px}
  .app-layout-active .room-grid--play .die{width:clamp(45px,5.5vw,55px);height:clamp(45px,5.5vw,55px)}
  .app-layout-active .room-grid--play .dice-stage{gap:4px}
  .app-layout-active .felt-actions{min-height:46px;padding-top:3px;gap:3px}
  .app-layout-active .felt-actions .btn{min-width:120px;min-height:44px;padding:5px}
  .app-layout-active .room-grid--play>.side-stack{min-height:0}
}
@media(min-width:1000px){
  .app-layout-active .score-reference{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .app-layout-active .score-reference .sr-collection{grid-column:1/-1}
  /* La tabella dei punti sta sotto partita e record, a tutta larghezza, mai accanto (Daniele 12/10, dopo #5384). */
  .app-layout-active .score-reference .sr-board{grid-column:1/-1}
  /* Partita a tutta larghezza in una striscia bassa: avanzamento a sinistra, record a destra, cosi' la tabella ha l'altezza. */
  .app-layout-active .score-reference .sr-game{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .app-layout-active .score-reference .sr-game>*{grid-column:1}
  .app-layout-active .score-reference .sr-game>.astra-records{grid-column:2;grid-row:1/span 4;margin-top:0;border-top:0;padding-top:0;align-self:center}
  body.app-layout-active .score-reference .sr-row{min-height:clamp(33px,calc(10dvh - 49px),50px)}
  /* Bonus alto nel posto libero sotto Sei: la colonna alta ha sei caselle, la bassa sette. */
  body.app-layout-active .room-grid--play>.score-panel .sr-board{position:relative}
  body.app-layout-active .room-grid--play>.score-panel .sr-footer{position:absolute;left:4px;bottom:4px;width:calc((100% - 12px)/2);height:clamp(33px,calc(10dvh - 49px),50px);min-height:0;margin:0}
}
@media(min-width:700px) and (max-width:760px) and (min-height:900px){
  .app-layout-active .room-grid--play,.app-layout-active .app-layout-solo .room-grid--play{grid-template-rows:56px minmax(0,1fr) 190px;gap:5px}
  .app-layout-active .room-grid--play>.players-strip{height:56px}
  .app-layout-active .players-strip>.player-tile{height:54px}
  .app-layout-active .room-grid--play>.felt{min-height:0}
}

/* iPhone: la scheda e' una sola colonna che scorre (alta, bassa, poi i totali fissi in fondo); testi da 14px, righe da 44px. Le due colonne restano da iPad in su, compreso l'iPad mini in verticale. */
@media(max-width:699px),(max-width:760px) and (max-height:899px){
  body.app-layout-active .score-reference .sr-columns{grid-template-columns:minmax(0,1fr);gap:2px}
  body.app-layout-active .score-reference .sr-row{min-height:48px;height:auto}
  body.app-layout-active .score-reference .sr-name,body.app-layout-active .score-reference .sr-meter-limits,body.app-layout-active .score-reference .sr-collection,body.app-layout-active .score-reference .sr-stamps i,body.app-layout-active .score-reference .sr-medal,body.app-layout-active .score-reference .sr-bonus b,body.app-layout-active .score-reference .sr-bonus small,body.app-layout-active .score-reference .sr-total small,body.app-layout-active .score-reference .sr-game-head span,body.app-layout-active .score-reference .sr-game-values span,body.app-layout-active .score-reference .sr-column h3,body.app-layout-active .score-reference .sr-column h3 span{font-size:14px}
}
/* iPad: dadi ridotti a una barra dopo qualche tiro. Il vassoio tiene un minimo e la riga del feltro cresce se il contenuto
   non ci sta (minmax ... auto), cosi' a cedere e' il foglio punteggi, che scorre, e non i dadi. */
@media(min-width:761px){
  body.app-layout-active .room-grid--play:has(.dice-renderer--capsule),body.app-layout-active .app-layout-solo .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:56px minmax(0,1fr) minmax(clamp(250px,30dvh,320px),auto)}
  body.app-layout-active .room-grid--play .dice-stage:has(.dice-renderer--capsule){min-height:150px!important}
}
@media(min-width:700px) and (max-width:760px) and (min-height:900px){
  body.app-layout-active .room-grid--play:has(.dice-renderer--capsule),body.app-layout-active .app-layout-solo .room-grid--play:has(.dice-renderer--capsule){grid-template-rows:56px minmax(0,1fr) minmax(190px,auto)}
  body.app-layout-active .room-grid--play .dice-stage:has(.dice-renderer--capsule){min-height:150px!important}
}