.arena{width:100%;max-width:calc(1280px * var(--ui-scale, 1));margin:calc(26px * var(--ui-scale, 1)) auto;padding:0 calc(24px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1))}.arena-grid{display:grid;grid-template-columns:calc(190px * var(--ui-scale, 1)) minmax(0,1fr) calc(310px * var(--ui-scale, 1));gap:calc(20px * var(--ui-scale, 1));align-items:start}.table-heading{padding-top:calc(12px * var(--ui-scale, 1));min-width:0}.back-lobby{font-size:max(11px, calc(14px * var(--ui-scale, 1)));display:inline-block;margin-bottom:calc(30px * var(--ui-scale, 1))}.eyebrow{font-size:max(11px, calc(13px * var(--ui-scale, 1)));color:var(--muted);line-height:1.7;text-transform:none}h1{font-size:max(11px, calc(23px * var(--ui-scale, 1)));font-weight:300;line-height:1.25;overflow-wrap:anywhere;margin:calc(12px * var(--ui-scale, 1)) 0 calc(20px * var(--ui-scale, 1))}.connection{display:block;color:var(--muted);font-size:max(11px, calc(13px * var(--ui-scale, 1)));line-height:1.5}.connection::before{content:'';display:inline-block;background:#69924a;width:calc(7px * var(--ui-scale, 1));height:calc(7px * var(--ui-scale, 1));border-radius:50%;margin-right:calc(7px * var(--ui-scale, 1))}.connection.offline::before{background:#cc7c38}.table-info{font-size:max(11px, calc(13px * var(--ui-scale, 1)));color:var(--muted);line-height:1.8;border-top:1px solid var(--line);padding-top:calc(18px * var(--ui-scale, 1));margin-top:calc(22px * var(--ui-scale, 1))}.table-info span{display:block}.table-area{min-width:0}.player-card{display:flex;align-items:center;gap:calc(12px * var(--ui-scale, 1));min-height:calc(59px * var(--ui-scale, 1));padding:calc(11px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));background:var(--surface);box-shadow:var(--shadow);border-radius:calc(3px * var(--ui-scale, 1))}.player-card.turn{box-shadow:inset calc(3px * var(--ui-scale, 1)) 0 #779953,var(--shadow)}.avatar{width:calc(32px * var(--ui-scale, 1));height:calc(32px * var(--ui-scale, 1));border-radius:50%;box-shadow:inset 0 0 0 calc(3px * var(--ui-scale, 1)) #ffffff44,0 calc(2px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) #0003;flex:none}.avatar.white{background:radial-gradient(circle at 30% 25%,#fdf7ed,#c3b69d)}.avatar.red{background:radial-gradient(circle at 30% 25%,#b4536a,#59192c)}.player-card strong{display:block;font-size:max(11px, calc(16px * var(--ui-scale, 1)));font-weight:500}.player-card>div>span{display:block;font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:var(--muted);margin-top:calc(3px * var(--ui-scale, 1))}.player-stats{margin-left:auto;display:flex;gap:calc(16px * var(--ui-scale, 1))}.player-card .player-stats span{font-size:max(11px, calc(14px * var(--ui-scale, 1)))}.board-shell{position:relative;aspect-ratio:1.31;margin:calc(8px * var(--ui-scale, 1)) 0;isolation:isolate;background:var(--soft);border-radius:calc(3px * var(--ui-scale, 1));box-shadow:var(--shadow)}#board-canvas{position:absolute;inset:0 0 calc(36px * var(--ui-scale, 1))}canvas{width:100%;height:100%;display:block;touch-action:pan-y}.board-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:calc(18px * var(--ui-scale, 1));background:var(--soft);z-index:3;font-size:max(11px, calc(14px * var(--ui-scale, 1)));color:var(--muted)}.spinner{height:calc(28px * var(--ui-scale, 1));width:calc(28px * var(--ui-scale, 1));border:calc(2px * var(--ui-scale, 1)) solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#reload-board{color:var(--blue);font-size:max(11px, calc(14px * var(--ui-scale, 1)))}.board-tools{position:absolute;bottom:0;left:0;right:0;padding:calc(4px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));display:flex;align-items:center;gap:calc(5px * var(--ui-scale, 1));min-height:calc(36px * var(--ui-scale, 1));border-top:1px solid var(--line)}.board-tools button{font-size:max(11px, calc(13px * var(--ui-scale, 1)));padding:calc(5px * var(--ui-scale, 1)) calc(9px * var(--ui-scale, 1));color:var(--muted);border-radius:calc(3px * var(--ui-scale, 1))}.board-tools .active{background:var(--hover);color:var(--blue)}.board-tools #sound{margin-left:auto}.table-note{font-size:max(11px, calc(13px * var(--ui-scale, 1)));line-height:1.55;color:var(--muted);margin:calc(12px * var(--ui-scale, 1)) 0 0;text-align:center}.game-panel{background:var(--surface);box-shadow:var(--shadow);border-radius:calc(3px * var(--ui-scale, 1));padding:calc(20px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) 0;min-width:0}.panel-kicker{display:none}.turn-heading{display:flex;align-items:center;gap:calc(9px * var(--ui-scale, 1));margin:0 0 calc(10px * var(--ui-scale, 1))}.turn-heading>span{width:calc(7px * var(--ui-scale, 1));height:calc(7px * var(--ui-scale, 1));flex:none;border-radius:50%;background:var(--orange)}.turn-heading h2{font-size:max(11px, calc(22px * var(--ui-scale, 1)));font-weight:300;margin:0;line-height:1.2}#turn-description{font-size:max(11px, calc(14px * var(--ui-scale, 1)));line-height:1.55;color:var(--muted);min-height:calc(43px * var(--ui-scale, 1));margin:0}.dice-row{display:flex;align-items:center;gap:calc(8px * var(--ui-scale, 1));margin:calc(20px * var(--ui-scale, 1)) 0;min-height:calc(44px * var(--ui-scale, 1))}.die{position:relative;width:calc(42px * var(--ui-scale, 1));height:calc(42px * var(--ui-scale, 1));border-radius:calc(6px * var(--ui-scale, 1));background:#f6f3ee;box-shadow:inset 0 calc(-2px * var(--ui-scale, 1)) 0 #c7c0b6,0 1px calc(4px * var(--ui-scale, 1)) #0003;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:calc(8px * var(--ui-scale, 1));gap:calc(3px * var(--ui-scale, 1));flex:none}.die .pip{width:calc(5px * var(--ui-scale, 1));height:calc(5px * var(--ui-scale, 1));border-radius:50%;background:#4a4235}.die.used{opacity:.3}.die.red{background:#b75545}.die.red .pip{background:#fff0d8}.dice-placeholder{font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:var(--muted)}.main-actions{display:flex;flex-direction:column;gap:calc(8px * var(--ui-scale, 1))}.main-actions button{width:100%;font-size:max(11px, calc(14px * var(--ui-scale, 1)));min-height:calc(43px * var(--ui-scale, 1));padding:calc(12px * var(--ui-scale, 1))}.main-actions button:not(.primary){border:1px solid var(--line);border-radius:calc(3px * var(--ui-scale, 1))}.main-actions button:hover:not(:disabled):not(.primary){background:var(--hover)}#move-section{margin:calc(21px * var(--ui-scale, 1)) 0 calc(17px * var(--ui-scale, 1))}.section-line{display:flex;justify-content:space-between;align-items:center;min-height:calc(25px * var(--ui-scale, 1))}h3{font-size:max(11px, calc(14px * var(--ui-scale, 1)));font-weight:400;color:var(--muted);margin:0}.section-line button{font-size:max(11px, calc(13px * var(--ui-scale, 1)));color:var(--blue);padding:calc(3px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1))}.legal-moves{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ui-scale, 1));margin-top:calc(10px * var(--ui-scale, 1));max-height:calc(155px * var(--ui-scale, 1));overflow:auto;scrollbar-width:thin}.legal-moves button{padding:calc(9px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));font-size:max(11px, calc(14px * var(--ui-scale, 1)));min-width:calc(77px * var(--ui-scale, 1));background:var(--soft);border:1px solid var(--line);border-radius:calc(3px * var(--ui-scale, 1))}.legal-moves button:hover{background:var(--hover);border-color:var(--blue)}.legal-moves button b{font-weight:400;color:var(--blue);margin-left:calc(7px * var(--ui-scale, 1));font-size:max(11px, calc(13px * var(--ui-scale, 1)))}.legal-moves .empty{font-size:max(11px, calc(13px * var(--ui-scale, 1)));line-height:1.5;color:var(--muted)}.small-actions{display:flex;gap:calc(5px * var(--ui-scale, 1));border-top:1px solid var(--line);padding:calc(12px * var(--ui-scale, 1)) 0}.small-actions button{font-size:max(11px, calc(13px * var(--ui-scale, 1)));padding:calc(7px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));flex:1;white-space:nowrap}.small-actions button:hover:not(:disabled){color:var(--blue);background:var(--hover)}.small-actions #double{flex:0 0 calc(34px * var(--ui-scale, 1))}.history{padding:calc(15px * var(--ui-scale, 1)) 0;border-top:1px solid var(--line)}summary{cursor:pointer;display:flex;justify-content:space-between;font-size:max(11px, calc(14px * var(--ui-scale, 1)));color:var(--muted)}#history-list{max-height:calc(174px * var(--ui-scale, 1));overflow:auto;font-size:max(11px, calc(13px * var(--ui-scale, 1)));line-height:1.6;list-style-position:inside;padding:0;margin:calc(12px * var(--ui-scale, 1)) calc(-18px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1))}#history-list li{padding:calc(8px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));overflow-wrap:anywhere}#history-list li:nth-child(odd){background:var(--soft)}.history button{font-size:max(11px, calc(13px * var(--ui-scale, 1)));color:var(--blue);padding:calc(5px * var(--ui-scale, 1)) 0}.table-footer{display:flex;justify-content:space-between;padding:calc(13px * var(--ui-scale, 1)) 0;border-top:1px solid var(--line);font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:var(--muted);gap:calc(8px * var(--ui-scale, 1));flex-wrap:wrap}.save-note{font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:var(--muted);text-align:center;max-width:calc(800px * var(--ui-scale, 1));margin:calc(22px * var(--ui-scale, 1)) auto 0;line-height:1.65}#invite-panel{margin:calc(20px * var(--ui-scale, 1)) 0;font-size:max(11px, calc(14px * var(--ui-scale, 1)))}#invite-panel label{color:var(--text)}.invite-input{display:flex;gap:calc(6px * var(--ui-scale, 1));margin-top:calc(10px * var(--ui-scale, 1))}.invite-input input{width:0;flex:1;min-width:0;font-size:max(11px, calc(13px * var(--ui-scale, 1)))}.invite-input button{font-size:max(11px, calc(13px * var(--ui-scale, 1)));padding:calc(8px * var(--ui-scale, 1));color:var(--blue);border:1px solid var(--line);border-radius:calc(3px * var(--ui-scale, 1))}.muted{font-size:max(11px, calc(13px * var(--ui-scale, 1)))}#error-banner{display:flex;align-items:center;justify-content:center;gap:calc(14px * var(--ui-scale, 1));background:#f6e3d7;color:#773d21;border:1px solid #dca883;padding:calc(12px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));border-radius:calc(3px * var(--ui-scale, 1));margin:calc(18px * var(--ui-scale, 1)) 0;font-size:max(11px, calc(14px * var(--ui-scale, 1)))}#error-banner button{font-size:max(11px, calc(14px * var(--ui-scale, 1)));flex:none;text-decoration:underline}#room-title{width:100%}#rules-content{font-size:max(11px, calc(16px * var(--ui-scale, 1)));line-height:1.65;color:var(--muted)}#rules-content h3{color:var(--text);font-size:max(11px, calc(17px * var(--ui-scale, 1)));font-weight:500;margin:calc(23px * var(--ui-scale, 1)) 0 calc(8px * var(--ui-scale, 1))}#rules-content a{text-decoration:underline}#setup-form>.primary{width:100%}.dialog-buttons button{font-size:max(11px, calc(14px * var(--ui-scale, 1)))}html[data-theme=dark] .die:not(.red){background:#d9d3c9}
@media(max-width:1250px){.arena-grid{grid-template-columns:calc(155px * var(--ui-scale, 1)) minmax(0,1fr) calc(290px * var(--ui-scale, 1));gap:calc(16px * var(--ui-scale, 1))}.arena{padding:0 calc(18px * var(--ui-scale, 1))}.player-stats{gap:calc(10px * var(--ui-scale, 1))}.player-card .player-stats span{font-size:max(11px, calc(13px * var(--ui-scale, 1)))}.game-panel{padding:calc(18px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1)) 0}#history-list{margin-left:calc(-15px * var(--ui-scale, 1));margin-right:calc(-15px * var(--ui-scale, 1))}.small-actions button{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}.board-shell{aspect-ratio:1.15}}@media(max-width:1050px){.arena-grid{grid-template-columns:minmax(0,1fr) calc(290px * var(--ui-scale, 1))}.table-heading{grid-column:1 / -1;display:flex;align-items:center;gap:calc(24px * var(--ui-scale, 1));padding:0}.table-heading>div:first-of-type{flex:1}.back-lobby{margin:0}.eyebrow{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}.table-heading h1{font-size:max(11px, calc(21px * var(--ui-scale, 1)));margin:calc(3px * var(--ui-scale, 1)) 0 0}.table-info{display:none}.connection{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}.arena{margin-top:calc(18px * var(--ui-scale, 1))}.board-shell{aspect-ratio:1.24}.player-stats{flex-direction:column;gap:0;align-items:flex-end}.player-card .player-stats span{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}}@media(max-width:740px){.arena{padding:0 calc(14px * var(--ui-scale, 1));margin:calc(18px * var(--ui-scale, 1)) auto}.arena-grid{display:flex;flex-direction:column;gap:calc(17px * var(--ui-scale, 1))}.table-heading{width:100%;gap:calc(15px * var(--ui-scale, 1))}.back-lobby{display:none}.connection{font-size:max(11px, calc(12px * var(--ui-scale, 1)));max-width:calc(110px * var(--ui-scale, 1))}.table-heading h1{font-size:max(11px, calc(21px * var(--ui-scale, 1)))}.table-area,.game-panel{width:100%}.board-shell{aspect-ratio:1.19;margin:calc(7px * var(--ui-scale, 1)) 0}.player-card{min-height:calc(57px * var(--ui-scale, 1));padding:calc(10px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1))}.player-stats{flex-direction:row;gap:calc(10px * var(--ui-scale, 1))}.player-card strong{font-size:max(11px, calc(15px * var(--ui-scale, 1)))}.player-card .player-stats span{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}.avatar{width:calc(29px * var(--ui-scale, 1));height:calc(29px * var(--ui-scale, 1))}.table-note{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}.game-panel{padding:calc(19px * var(--ui-scale, 1)) calc(17px * var(--ui-scale, 1)) 0}.legal-moves{max-height:calc(145px * var(--ui-scale, 1))}.legal-moves button{min-height:calc(43px * var(--ui-scale, 1))}.small-actions button{font-size:max(11px, calc(14px * var(--ui-scale, 1)))}.table-footer{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}#history-list{margin-left:calc(-17px * var(--ui-scale, 1));margin-right:calc(-17px * var(--ui-scale, 1))}.save-note{font-size:max(11px, calc(12px * var(--ui-scale, 1)));margin:calc(18px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1))}.dice-row{margin:calc(16px * var(--ui-scale, 1)) 0}#error-banner{flex-direction:column;text-align:center}.site-actions #new-game{display:block;font-size:max(11px, calc(13px * var(--ui-scale, 1)));padding:calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1))}.site-header .brand{font-size:max(11px, calc(24px * var(--ui-scale, 1)))}.site-header .site-actions{gap:0}}@media(max-width:420px){.site-actions #new-game{display:none}.player-stats{flex-direction:column;gap:0}.board-tools button{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}.connection{max-width:calc(90px * var(--ui-scale, 1))}}

.match-strip{display:flex;justify-content:space-between;align-items:center;gap:calc(18px * var(--ui-scale, 1));padding:calc(14px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1));background:var(--surface);border-bottom:calc(2px * var(--ui-scale, 1)) solid var(--orange);margin-bottom:calc(12px * var(--ui-scale, 1));border-radius:calc(3px * var(--ui-scale, 1))}.match-strip>div{display:flex;flex-direction:column;gap:calc(5px * var(--ui-scale, 1))}.match-strip>div:last-child{text-align:right}.match-strip span{font-size:max(11px, calc(13px * var(--ui-scale, 1)));color:var(--muted)}#match-score{font-size:max(11px, calc(28px * var(--ui-scale, 1)));font-weight:400;font-variant-numeric:tabular-nums}#match-crawford{font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:var(--muted)}.player-clock{display:block;min-width:calc(92px * var(--ui-scale, 1));padding:calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));font-size:max(11px, calc(28px * var(--ui-scale, 1)));font-weight:400;font-variant-numeric:tabular-nums;text-align:center;line-height:1;background:#333;border-radius:calc(3px * var(--ui-scale, 1));color:#aaa;white-space:nowrap}.player-clock.running{color:#fff;background:#425738;box-shadow:inset 0 calc(-2px * var(--ui-scale, 1)) #82a95e}.player-clock.low{color:#ffae91}.player-clock.running.low{background:#5d3229;box-shadow:inset 0 calc(-2px * var(--ui-scale, 1)) #d37b5c}.player-card:has(.player-clock:not([hidden]))>div:nth-child(2){flex:1;min-width:0}.player-card:has(.player-clock:not([hidden])) .player-stats{margin-left:0;flex-direction:column;gap:calc(2px * var(--ui-scale, 1))}.round-notice{font-size:max(11px, calc(13px * var(--ui-scale, 1)));line-height:1.5;color:var(--muted);margin:0 0 calc(12px * var(--ui-scale, 1));padding:calc(10px * var(--ui-scale, 1)) calc(13px * var(--ui-scale, 1));border-left:calc(2px * var(--ui-scale, 1)) solid var(--blue);background:var(--surface)}.resign-match{width:100%;padding:calc(11px * var(--ui-scale, 1)) 0;font-size:max(11px, calc(13px * var(--ui-scale, 1)));color:var(--muted);border-top:1px solid var(--line)}.resign-match:hover{color:var(--blue)}.match-history{border-top:1px solid var(--line);padding:calc(15px * var(--ui-scale, 1)) 0}.match-history ol{padding:0;list-style:none;font-size:max(11px, calc(13px * var(--ui-scale, 1)));line-height:1.6;color:var(--muted);max-height:calc(160px * var(--ui-scale, 1));overflow:auto}.match-history li{padding:calc(6px * var(--ui-scale, 1)) 0;border-bottom:1px solid var(--line)}
@media(max-width:1150px){.player-card:has(.player-clock:not([hidden])) .player-stats{display:none}.player-clock{font-size:max(11px, calc(26px * var(--ui-scale, 1)));min-width:calc(84px * var(--ui-scale, 1))}.match-strip{padding:calc(12px * var(--ui-scale, 1))}}
@media(max-width:480px){.player-clock{font-size:max(11px, calc(25px * var(--ui-scale, 1)));min-width:calc(82px * var(--ui-scale, 1))}.match-strip{gap:calc(8px * var(--ui-scale, 1))}.match-strip span{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}#match-crawford{max-width:calc(145px * var(--ui-scale, 1));line-height:1.4}.player-card:has(.player-clock:not([hidden])){gap:calc(9px * var(--ui-scale, 1))}}

/* The board is the main working surface; table details sit above it. */
.auto-roll{width:100%;padding:calc(11px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));margin:0 0 calc(12px * var(--ui-scale, 1));border:1px solid var(--line);border-radius:calc(3px * var(--ui-scale, 1));font-size:max(11px, calc(14px * var(--ui-scale, 1)));color:var(--muted);text-align:left}.auto-roll:hover{background:var(--hover)}.auto-roll[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:#6aa9df12}
.arena{max-width:calc(1560px * var(--ui-scale, 1));margin-top:calc(18px * var(--ui-scale, 1))}.arena-grid{grid-template-columns:minmax(0,1fr) calc(310px * var(--ui-scale, 1));gap:calc(18px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1))}.table-heading{grid-column:1/-1;display:flex;align-items:center;gap:calc(24px * var(--ui-scale, 1));padding:0}.table-heading>div:first-of-type{flex:1}.table-heading h1{font-size:max(11px, calc(23px * var(--ui-scale, 1)));margin:calc(3px * var(--ui-scale, 1)) 0 0}.table-heading .eyebrow{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}.back-lobby{margin:0}.table-info{display:none}.board-shell{aspect-ratio:auto;height:clamp(calc(480px * var(--ui-scale, 1)),calc(100dvh - calc(320px * var(--ui-scale, 1))),calc(820px * var(--ui-scale, 1)))}#board-canvas{bottom:calc(43px * var(--ui-scale, 1))}.board-tools{min-height:calc(43px * var(--ui-scale, 1))}.player-card{min-height:calc(52px * var(--ui-scale, 1));padding:calc(8px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1))}.match-strip{padding:calc(8px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));margin-bottom:calc(8px * var(--ui-scale, 1));flex-direction:row}.match-strip>div{flex-direction:row;align-items:center;gap:calc(12px * var(--ui-scale, 1))}#match-score{font-size:max(11px, calc(25px * var(--ui-scale, 1)))}.table-area:has(#match-strip:not([hidden])) .board-shell{height:clamp(calc(440px * var(--ui-scale, 1)),calc(100dvh - calc(375px * var(--ui-scale, 1))),calc(770px * var(--ui-scale, 1)))}.history button{display:block;margin-bottom:calc(6px * var(--ui-scale, 1))}
@media(max-width:1100px){.arena-grid{grid-template-columns:minmax(0,1fr) calc(270px * var(--ui-scale, 1));gap:calc(15px * var(--ui-scale, 1))}.arena{padding:0 calc(16px * var(--ui-scale, 1))}.board-shell{height:clamp(calc(410px * var(--ui-scale, 1)),calc(100dvh - calc(300px * var(--ui-scale, 1))),calc(680px * var(--ui-scale, 1)))}.table-area:has(#match-strip:not([hidden])) .board-shell{height:clamp(calc(410px * var(--ui-scale, 1)),calc(100dvh - calc(355px * var(--ui-scale, 1))),calc(630px * var(--ui-scale, 1)))}}
@media(max-width:850px){.arena-grid{display:flex;flex-direction:column}.table-area,.game-panel{width:100%}.board-shell,.table-area:has(#match-strip:not([hidden])) .board-shell{height:auto;aspect-ratio:1.26}.table-heading{width:100%}.table-heading h1{font-size:max(11px, calc(21px * var(--ui-scale, 1)))}.match-strip>div{flex-direction:column;align-items:flex-start;gap:calc(3px * var(--ui-scale, 1))}.match-strip>div:last-child{align-items:flex-end}.game-panel{display:block}}
@media(max-width:480px){.arena{padding:0 calc(8px * var(--ui-scale, 1))}.board-shell,.table-area:has(#match-strip:not([hidden])) .board-shell{aspect-ratio:1.12}#board-canvas{bottom:calc(64px * var(--ui-scale, 1))}.board-tools{min-height:calc(64px * var(--ui-scale, 1));justify-content:center}.table-heading{padding:0 calc(5px * var(--ui-scale, 1))}.back-lobby{display:none}.player-card{min-height:calc(50px * var(--ui-scale, 1))}.table-note{font-size:max(11px, calc(12px * var(--ui-scale, 1)))}}
.player-card>div:nth-child(2){min-width:0}.player-card strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme=dark] .die.white,.die.white{background:#f5f2e9;box-shadow:inset 0 calc(-2px * var(--ui-scale, 1)) 0 #c7c4bd,0 calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1)) #0005}html[data-theme=dark] .die.black,.die.black{background:#101315;box-shadow:inset 0 calc(-2px * var(--ui-scale, 1)) 0 #050607,inset 0 0 0 1px #343a3e,0 calc(2px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1)) #0005}.die.white .pip{background:#080a0b}.die.black .pip{background:#fffdf7}.die .pip{width:calc(7px * var(--ui-scale, 1));height:calc(7px * var(--ui-scale, 1))}.die{padding:calc(7px * var(--ui-scale, 1));gap:calc(3px * var(--ui-scale, 1))}

.arena-grid>#error-banner{grid-column:1/-1;width:100%;margin:0;line-height:1.5;background:#342b25;color:#f3d1b8;border-color:#75533d}