:root{--paper:#f3f0e7;--ink:#263c36;--muted:#7c867a;--green:#356951;--lime:#d9e7ad;--coral:#eb795c;--line:#dcded0;--white:#fffef8;--shadow:0 5px 0 #263c3610;--radius:25px;font-family:Inter,ui-rounded,'Trebuchet MS',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100dvh;background:var(--paper);color:var(--ink)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.43}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ed9a44;outline-offset:4px}button{touch-action:manipulation}a{color:inherit}svg{max-width:100%}button svg,.icon svg{width:22px;height:22px;vertical-align:middle}.icon-btn{height:46px;min-width:46px;border:1px solid var(--line);border-radius:15px;background:transparent;display:inline-grid;place-items:center}.icon-btn:hover{background:var(--color-surface-hover,#e5e8db)}.icon-btn.active{background:var(--ink);color:var(--color-action-on-primary,white)}.text-btn{border:0;background:none;padding:12px 3px;font-weight:700;display:inline-flex;align-items:center;gap:8px}.muted{color:var(--muted)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase}.pill{display:inline-flex;align-items:center;gap:6px;background:var(--color-surface-raised,#e7ebde);border-radius:30px;padding:7px 10px;font-size:11px;font-weight:700;white-space:nowrap}.dot{width:7px;height:7px;background:var(--color-feedback-success,#628667);border-radius:50%;display:inline-block}.app-shell{display:grid;grid-template-columns:182px minmax(0,1fr);min-height:100dvh}.sidebar{border-right:1px solid var(--line);padding:36px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh}.brand{display:flex;align-items:center;gap:11px;font-weight:950;font-size:31px;letter-spacing:-2px;text-decoration:none;border:0;background:none;padding:0}.brand-mark{display:grid;grid-template-columns:13px 13px;gap:3px;transform:rotate(-9deg)}.brand-mark i{width:13px;height:13px;display:block;border-radius:4px;background:var(--green)}.brand-mark i:nth-child(2){background:var(--coral)}.brand-mark i:nth-child(3){background:#edbd59}.brand-mark i:nth-child(4){background:#a9b9d9}.brand small{font-size:9px;letter-spacing:0;align-self:flex-start;margin:0 0 0 -5px;color:var(--muted)}.side-nav{display:grid;gap:10px;margin-top:58px}.nav-item{display:flex;align-items:center;gap:12px;min-height:47px;border:0;background:none;text-align:left;border-radius:14px;padding:12px 13px;font-size:13px;font-weight:700;color:var(--color-text-secondary,#768275)}.nav-item svg{width:20px;height:20px}.nav-item.current{background:var(--color-surface-raised,#e3e8d8);color:var(--ink)}.nav-item:hover{background:var(--color-surface-hover,#e8ebdf)}.sidebar-note{margin-top:auto;color:var(--muted);font-size:11px;line-height:1.6;padding:0 12px}.sidebar-note .little-dice{font-size:24px;display:block;color:var(--green);margin-bottom:12px}.hub-main{padding:27px clamp(24px,4vw,68px) 32px;max-width:1510px;width:100%;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:45px}.topbar-tools{display:flex;gap:10px;align-items:center}.topbar .status{display:flex;align-items:center;gap:8px;color:var(--color-text-secondary,#71816e);font-size:12px}.mobile-brand{display:none}.intro{display:flex;justify-content:space-between;align-items:end;margin:42px 0 30px;gap:20px}.intro h1{font-size:clamp(36px,3.8vw,55px);letter-spacing:-2.7px;line-height:1.05;margin:0;font-weight:850}.intro h1 span{color:var(--color-text-secondary,#708760)}.intro p{font-size:13px;line-height:1.8;color:var(--color-text-secondary,#758073);max-width:290px;margin:0 0 4px}.intro-ornament{color:#a7b583;margin-left:8px}.library-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 0 20px}.filters{display:flex;align-items:center;gap:7px}.filter{border:0;background:transparent;padding:10px 15px;border-radius:25px;font-size:12px;font-weight:700;color:var(--color-text-secondary,#788372)}.filter.active{background:var(--ink);color:var(--color-action-on-primary,white)}:is(.collection-count,.saved-count){font-size:11px;letter-spacing:1px;color:var(--color-text-secondary,#828b79)}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.game-tile{min-height:295px;border-radius:25px;background:var(--white);border:1px solid var(--color-border-subtle,#e0e2d5);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 0 #283c3010}.game-tile:hover{transform:translateY(-3px);box-shadow:0 8px 0 #283c3010}.game-tile.featured{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;background:var(--color-surface-raised,#e0e8cb);min-height:265px}.tile-top{position:absolute;left:20px;top:18px;z-index:1}.tile-top .pill{background:var(--color-surface-raised,#fffcf49c);font-size:10px;letter-spacing:.6px;padding:6px 9px}.game-cover{height:168px;display:flex;align-items:center;justify-content:center;padding:24px 30px 0;pointer-events:none;min-width:0}.game-cover svg{max-height:100%;width:100%;overflow:visible}.featured .game-cover{height:100%;grid-column:2;grid-row:1;padding:34px 30px 27px 0}.tile-content{padding:5px 22px 21px;display:flex;flex-direction:column;flex:1}.featured .tile-content{grid-column:1;grid-row:1;padding:69px 0 29px 27px;position:relative;z-index:1}.tile-title{margin:0;font-size:23px;letter-spacing:-.7px}.featured .tile-title{font-size:38px;letter-spacing:-1.8px}.tile-description{font-size:12px;color:var(--color-text-secondary,#73806e);line-height:1.6;margin:7px 0 15px}.tile-bottom{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:auto}.tile-meta{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--color-text-secondary,#6d7c69)}.tile-meta svg{width:14px;height:14px}.play-tile{width:43px;height:43px;border:0;border-radius:50%;background:var(--ink);color:var(--color-action-on-primary,#fff);display:grid;place-items:center}.play-tile svg{width:20px;height:20px}.featured .play-tile{width:auto;border-radius:13px;padding:0 15px;gap:10px;display:flex;font-size:12px;font-weight:750}.tile-hit{position:absolute;inset:0;border:0;background:transparent;border-radius:25px}.tile-hit:focus-visible{outline-offset:-5px}.tile-bottom .play-tile{pointer-events:none}.featured .tile-bottom{flex-wrap:wrap;gap:19px}.hub-footer{display:flex;justify-content:space-between;gap:15px;margin-top:28px;color:var(--color-text-secondary,#8b927f);font-size:11px}.hub-footer span{display:flex;align-items:center;gap:8px}.hub-empty{padding:60px;text-align:center}.toast{position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--color-action-on-primary,white);padding:13px 20px;max-width:min(90vw,550px);border-radius:16px;box-shadow:0 5px 30px #18332925;font-size:13px;line-height:1.5;z-index:100;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;background:#20352d66;backdrop-filter:blur(7px);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}.modal{background:var(--paper);border-radius:28px;width:min(100%,520px);padding:28px;box-shadow:0 18px 100px #172d3550;max-height:calc(100dvh - 40px);overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.modal h2{font-size:28px;letter-spacing:-1px;margin:0}.modal .lead{color:var(--color-text-secondary,#7b8476);font-size:13px;line-height:1.7;margin-top:-5px}.field{display:grid;gap:9px;margin:21px 0}.field>span,.field legend{font-weight:800;font-size:12px}.field select,.field input:not([type=radio]):not([type=checkbox]),.names input{min-height:47px;min-width:0;width:100%;border:1px solid var(--color-border-subtle,#d2d8c7);border-radius:13px;background:var(--color-surface-panel,#fffcf5);padding:10px 13px;color:var(--ink);font-size:16px;line-height:1.3;box-shadow:0 3px 0 #dce2d1;transition:border-color .15s,background .15s,box-shadow .15s}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented label{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid var(--color-border-subtle,#d6dccd);padding:13px 5px;border-radius:13px;font-size:12px;font-weight:700;background:var(--color-surface-panel,#fffcf5)}.segmented label:has(input:checked){background:var(--color-surface-selected,#e0e8cb);border-color:var(--color-border-subtle,#6c8b60)}.segmented input{width:auto;min-height:0;accent-color:var(--green)}.names{display:grid;grid-template-columns:1fr 1fr;gap:8px}.names label{font-size:11px;display:grid;gap:5px;color:var(--color-text-secondary,#76836e)}.modal-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:23px}.modal-foot .btn{flex:1}.rules-list{padding-left:21px;font-size:14px;line-height:1.75}.rules-list li{margin-bottom:10px}.help-grid{display:grid;gap:14px;margin-top:20px}.help-item{display:flex;gap:15px;font-size:13px;line-height:1.65}.help-item svg{flex-shrink:0;width:23px;color:var(--green)}.help-item p{margin:0}.help-item strong{display:block}.pack-line{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:21px}.switch{display:flex;justify-content:space-between;align-items:center;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}.switch input{width:23px;height:23px;accent-color:var(--green)}
.table-shell{height:100dvh;display:flex;flex-direction:column;max-width:1500px;margin:auto;padding:18px 30px max(12px,env(safe-area-inset-bottom));gap:12px}.table-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.table-heading{display:flex;align-items:center;gap:15px}.table-title h1{font-size:21px;letter-spacing:-.7px;margin:0 0 4px}.table-title p{font-size:11px;margin:0;color:var(--color-text-secondary,#8a927f)}.table-tools{display:flex;gap:8px}.table-status{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-shrink:0;min-height:51px;padding:8px 15px;background:var(--color-surface-raised,#e4e9d8);border-radius:15px}.turn-label{font-weight:750;font-size:13px;display:flex;align-items:center;gap:10px}.turn-light{height:10px;width:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #365f4a10}.turn-light.bot{background:var(--coral);animation:blink 1.5s infinite}.turn-extra{font-size:11px;color:var(--color-text-secondary,#6e7e65);text-align:right}.player-strip{display:flex;gap:10px;align-items:center;justify-content:center;flex-shrink:0;flex-wrap:wrap}.player-token{display:flex;gap:9px;align-items:center;padding:7px 13px 7px 8px;border:1px solid transparent;border-radius:14px;font-size:12px}.player-token.active{border-color:var(--color-border-subtle,#aabf8d);background:var(--color-surface-raised,#e9eedf)}.avatar{width:29px;height:29px;background:#d5dfbf;display:grid;place-items:center;font-size:13px;font-weight:900;color:#426041}.avatar.p1{background:#ecc8b6;color:#9d533b}.avatar.p2{background:#c6d8e6;color:#477286}.avatar.p3{background:#e5d89e;color:#847531}.player-token small{display:block;color:var(--color-text-secondary,#87907d);font-size:10px;margin-top:2px}.scene{flex:1;min-height:0;min-width:0;position:relative;border:1px solid var(--color-border-subtle,#d8dfcb);border-radius:28px;background:var(--color-surface-game,#e9eddd);overflow:auto;isolation:isolate}.table-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;font-size:11px;color:var(--color-text-secondary,#859078)}.event-latest{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}.table-bottom button{white-space:nowrap;font-size:11px}.history-panel{background:var(--color-surface-panel,#fffdf4);border:1px solid var(--color-border-subtle,#d7decc);border-radius:20px;padding:13px 18px;flex-shrink:0}.history-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.history-controls{display:flex;align-items:center;gap:10px;margin-top:10px}.history-controls input{flex:1;min-width:0;accent-color:var(--green)}.history-controls .icon-btn{width:39px;min-width:39px;height:39px;border-radius:12px}.history-caption{font-size:12px;line-height:1.5;margin:8px 0 0;color:var(--color-text-secondary,#687761);min-height:18px}.replay-badge{background:var(--color-surface-raised,#eedba6);border-radius:9px;padding:5px 9px;font-size:10px;font-weight:750}.handoff{position:fixed;inset:0;z-index:45;background:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}.handoff-content{max-width:400px}.handoff-art{display:flex;align-items:center;justify-content:center;gap:0;height:140px;margin-bottom:20px}.handoff-art span{display:grid;place-items:center;width:77px;height:108px;background:var(--green);border:5px solid #fffcf4;border-radius:15px;box-shadow:0 5px 0 #cad3ba;color:#dce6b9;font-size:42px;transform:rotate(-12deg)}.handoff-art span+span{background:var(--coral);transform:rotate(12deg);margin-left:-16px;color:#ffe5c2}.handoff h2{font-size:33px;letter-spacing:-1px;margin:12px 0}.handoff p{color:var(--color-text-secondary,#7c886f);font-size:14px;line-height:1.7;margin:14px 0 25px}.handoff .btn{width:100%;margin:15px 0}.result-art{font-size:60px;line-height:1.5}.result-scores{display:grid;gap:9px;margin-top:20px}.score-row{display:flex;justify-content:space-between;padding:12px 15px;background:var(--color-surface-raised,#e5e9db);border-radius:12px;font-size:13px}.result-modal{text-align:center}.result-modal .modal-head{justify-content:center}.result-modal .lead{margin:10px 0}:root.fullscreen-fallback{min-height:100dvh;background:var(--paper)}body.reduced-motion *,body.reduced-motion *:before,body.reduced-motion *:after{animation:none!important;transition:none!important}.rules-mode-note{background:var(--color-surface-raised,#e4e9d7);padding:11px 14px;border-radius:12px;font-size:12px;line-height:1.6}.pause-cover{position:absolute;inset:0;z-index:10;background:var(--color-surface-raised,#e9eddd);display:grid;place-content:center;text-align:center;padding:25px}.pause-cover p{font-size:13px;color:var(--color-text-secondary,#79866f)}.auto-saved{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.mobile-text{display:none}
@keyframes blink{50%{opacity:.35}}.scene.replaying{outline:2px solid #d7b361;outline-offset:1px}
@media(min-width:1450px){.game-tile{min-height:325px}.game-cover{height:196px}.game-tile.featured{min-height:285px}.hub-main{padding-top:32px}.intro{margin-top:54px}}
@media(max-width:1050px){.app-shell{grid-template-columns:140px minmax(0,1fr)}.sidebar{padding:28px 13px}.brand{font-size:27px;gap:8px}.hub-main{padding:22px}.intro h1{font-size:40px}.intro p{max-width:218px;font-size:12px}.game-grid{gap:14px}.tile-content{padding:6px 16px 18px}.game-cover{padding-left:20px;padding-right:20px}.tile-meta{gap:5px;font-size:10px}.featured .tile-content{padding-left:22px}.table-shell{padding:15px 20px}}
@media(max-width:760px){.app-shell{display:block}.sidebar{display:none}.hub-main{padding:20px 20px 30px}.mobile-brand{display:flex}.topbar>.eyebrow{display:none}.topbar .status{display:none}.topbar-tools{gap:8px}.topbar-tools .icon-btn{height:41px;min-width:41px;border-radius:13px}.intro{margin:33px 0 23px;display:block}.intro h1{font-size:43px;line-height:1.06;letter-spacing:-2px}.intro p{max-width:none;margin:16px 0 0;font-size:12px;line-height:1.7}.intro p br{display:none}.library-heading{margin:21px 0 17px}:is(.collection-count,.saved-count){font-size:10px;letter-spacing:0}.filter{padding:9px 12px;font-size:11px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.game-tile.featured{grid-column:span 2;min-height:244px}.game-tile{min-height:246px}.game-tile:last-child{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;min-height:185px}.game-tile:last-child .game-cover{grid-column:2;grid-row:1;height:100%;padding:30px 20px 20px 0}.game-tile:last-child .tile-content{grid-column:1;grid-row:1;padding:52px 0 20px 19px}.tile-top{left:16px;top:15px}.game-cover{height:143px;padding:27px 12px 0}.tile-title{font-size:20px}.tile-description{font-size:11px;line-height:1.5;margin:6px 0 13px}.tile-content{padding:6px 16px 16px}.featured .tile-content{padding:57px 0 24px 22px}.featured .tile-title{font-size:34px}.featured .game-cover{padding:36px 17px 25px 0}.featured .tile-description{max-width:155px}.featured .tile-bottom{gap:11px}.tile-meta{font-size:10px;flex-wrap:wrap;gap:5px}.tile-meta .meta-time{display:none}.play-tile{width:35px;height:35px}.featured .play-tile{height:40px}.hub-footer{font-size:10px;line-height:1.5;align-items:start}.hub-footer span:last-child{text-align:right}.table-shell{padding:10px 12px max(9px,env(safe-area-inset-bottom));gap:8px}.table-title h1{font-size:18px}.table-title p{font-size:10px}.table-heading{gap:10px}.table-tools{gap:5px}.table-header .icon-btn{height:40px;min-width:40px;border-radius:12px}.table-status{padding:9px 12px;min-height:46px;border-radius:13px}.turn-label{font-size:12px}.turn-extra{font-size:10px}.player-strip{gap:2px}.player-token{padding:5px 7px;gap:6px;font-size:11px}.avatar{width:26px;height:26px;}.player-token small{font-size:9px}.scene{border-radius:22px}.table-bottom{font-size:10px}.event-latest{max-width:65%}.table-bottom .text-btn{font-size:10px;padding:7px 0}.auto-saved{display:none}.table-tools .desktop-tool{display:none}.history-panel{padding:10px 12px}.history-head{font-size:11px}.history-caption{font-size:11px}.modal{padding:23px;border-radius:24px}.modal-backdrop{padding:14px}.modal h2{font-size:25px}.mobile-text{display:inline}.desktop-text{display:none}}
@media(max-width:370px){.hub-main{padding:16px}.intro h1{font-size:38px}.tile-title{font-size:18px}.tile-content{padding-left:12px;padding-right:12px}.table-shell{padding-left:7px;padding-right:7px}.table-header .icon-btn{min-width:36px;height:38px}.table-title h1{font-size:16px}.turn-extra{max-width:120px}.table-tools{gap:4px}}
@media(max-height:550px) and (orientation:landscape){.table-shell{padding-top:6px;gap:5px}.table-status{min-height:34px;padding:6px 12px}.player-strip{position:absolute;right:170px;top:5px;max-width:45%;z-index:2}.table-title p,.player-token small{display:none}.player-token{font-size:10px}.table-bottom{min-height:22px}.table-header .icon-btn{height:34px;min-width:36px}.scene{min-height:200px}.table-shell{height:auto;min-height:100dvh}.history-panel{position:fixed;bottom:10px;left:20%;right:20%;z-index:15;box-shadow:0 10px 30px #20352d30}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hub-footer svg{width:18px;height:18px;flex:none}.auto-saved svg{width:14px;height:14px;flex:none}
.scene .stock-button:disabled,.scene .playing-card:disabled{opacity:1}
.recovery-note{padding:15px 18px;border:1px solid var(--color-border-subtle,#d6ba78);background:var(--color-surface-notice,#f3e7c7);border-radius:15px;font-size:13px;line-height:1.6}
.table-heading,.table-title{min-width:0}.table-title h1,.table-title p{overflow-wrap:anywhere}.table-tools{flex-shrink:0}
@media(max-width:760px){.table-header{flex-wrap:wrap;align-items:center}.table-heading{flex:1 1 130px}.table-tools .desktop-tool{display:inline-grid}.table-title p{max-width:180px}.table-header .table-tools .icon-btn{min-width:36px;width:36px;height:40px}.table-tools{gap:4px}.player-token>span:last-child{min-width:0;overflow-wrap:anywhere}.player-token{max-width:100%}}
@media(max-width:370px){.table-header{gap:6px}.table-title h1{font-size:15px}.table-heading{gap:7px;flex-basis:122px}.table-title p{font-size:9px}.table-header .table-tools .icon-btn{min-width:32px;width:32px;height:40px}.table-tools{gap:3px}}
.score-row span{min-width:0;overflow-wrap:anywhere}.score-row strong{flex-shrink:0;margin-left:8px}
@media(max-width:760px){.table-header .icon-btn,.table-header .table-tools .icon-btn{min-width:44px;width:44px;height:44px}.table-heading{flex-basis:140px}}
@media(max-width:420px){.table-heading{flex-basis:120px}}
.card-help-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:12px}.card-help-list li{padding:12px 14px;border:1px solid var(--color-border-subtle,#d9dfc9);border-radius:14px;background:var(--color-surface-raised,#f4f5e8)}.card-help-list strong{font-size:13px}.card-help-list p{margin:5px 0 0;font-size:12px;line-height:1.55;overflow-wrap:anywhere}

.pass-device-bar{flex-shrink:0;display:flex;justify-content:center;min-height:44px}.pass-device-bar .btn{min-height:44px;padding:7px 18px;font-size:12px}.player-token[data-accuse-player]{cursor:pointer}.player-token[data-accuse-player]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Keep the phone's table space for the pieces; long setup labels stay in setup. */
@media(max-width:760px) and (orientation:portrait){
 .table-shell{padding:7px 10px max(7px,env(safe-area-inset-bottom));gap:6px}
 .table-title p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .table-status{min-height:38px;padding:6px 11px}
 .player-strip{gap:2px}.player-token{min-height:40px;padding:3px 7px}.player-token small{font-size:8px;margin-top:1px}
 .player-token[data-accuse-player]{min-height:44px}
 .table-bottom .text-btn{padding:4px 0;min-height:28px}
 .table-header .table-heading{flex-basis:0;min-width:0}
 .table-header .table-tools{gap:3px}
}
@media(max-width:370px) and (orientation:portrait){.table-shell{padding-left:6px;padding-right:6px}.table-header{gap:4px}.table-heading{gap:6px}}

/* The same navigation becomes a reachable dock in the phone hub. */
@media(max-width:760px){
 .app-shell .sidebar{display:contents}
 .app-shell .sidebar>.brand,.app-shell .sidebar-note{display:none}
 .app-shell .side-nav{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:35;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:5px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:0 5px 22px #20352d1a}
 .app-shell .side-nav .nav-item{flex-direction:column;justify-content:center;gap:4px;min-height:54px;padding:6px 3px;font-size:11px;line-height:1.15;white-space:nowrap;text-align:center;border-radius:14px}
 .app-shell .side-nav .nav-item svg{width:20px;height:20px;flex:none}
 .app-shell .hub-main{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
 body:has(.app-shell) .toast{bottom:calc(85px + env(safe-area-inset-bottom))}
}

/* Card captions and badges belong to the same launch target. */
.game-tile,button,[role=button]{-webkit-user-select:none;user-select:none}
.game-tile .tile-hit{z-index:2}

/* Form controls share the rounded, lightly raised surface of the game pieces. */
.names label{min-width:0}
.names input::placeholder{color:var(--color-text-secondary,#8b9681)}
.names input[readonly]{background:var(--color-surface-raised,#e8ecdf);color:var(--color-text-secondary,#66785d);border-color:var(--color-border-subtle,#d7decd);box-shadow:none;cursor:default}
.modal :is(.names input,.field select):focus{border-color:var(--color-border-subtle,#638465)}
.switch{gap:16px;min-height:60px;cursor:pointer}
.switch,.segmented label,.shared-page-tabs,.shared-page-tabs>label{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.switch>span{min-width:0;line-height:1.45}
.modal input:is([type=checkbox],[type=radio]){appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;flex:none;width:28px;height:28px;min-height:28px;margin:0;padding:0;border:1px solid var(--color-border-subtle,#bac8ad);border-radius:9px;background:var(--color-surface-panel,#fffcf5);color:var(--green);box-shadow:0 3px 0 #d2dcc5;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.modal input[type=checkbox]::before{content:"";width:11px;height:6px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-1px) rotate(-45deg);opacity:0}
.modal input[type=checkbox]:checked{background:var(--green);border-color:var(--green);color:var(--color-action-on-primary,#fffef8);box-shadow:0 3px 0 #254d3c}
.modal input[type=checkbox]:checked::before{opacity:1}
.modal input[type=radio]{width:22px;height:22px;min-height:22px;border-radius:50%;box-shadow:0 2px 0 #d2dcc5}
.modal input[type=radio]::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;transform:scale(0)}
.modal input[type=radio]:checked{border-color:var(--green);background:var(--color-surface-raised,#f8fbed)}
.modal input[type=radio]:checked::before{transform:scale(1)}
.segmented label{min-width:0;min-height:50px;line-height:1.35}
.modal input:disabled{opacity:.55;cursor:not-allowed}
@media(hover:hover){
 .names input:not([readonly]):not(:disabled):hover,.field select:not(:disabled):hover{border-color:var(--color-border-subtle,#91a57e);background:var(--color-surface-hover,#fffef8)}
 .switch:hover input:not(:disabled),.segmented label:hover input:not(:disabled){border-color:var(--color-border-subtle,#638465)}
}
@media(forced-colors:active){
 .modal input:is([type=checkbox],[type=radio]){appearance:auto;-webkit-appearance:auto;box-shadow:none}
 .modal input:is([type=checkbox],[type=radio])::before{content:none}
}

/* The sound library uses the same compact controls as game setup. */
.modal select:disabled{opacity:.55;cursor:not-allowed}

.result-menu{width:100%;margin-top:12px}

/* PWA pairing */
.pairing-fallback{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--color-surface-raised,#f7f5ee)}.pairing-fallback summary{cursor:pointer;font-weight:800}.pairing-fallback textarea{overflow-wrap:anywhere;white-space:pre-wrap}.toast{white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:left}.toast.show{pointer-events:auto}@media(max-width:600px){.toast{left:12px;right:12px;max-width:none;width:auto;transform:translateY(20px);padding:12px 14px;font-size:12px}.toast.show{transform:translateY(0)}}

.pairing-qr{display:grid;place-items:center;margin:14px auto 16px;max-width:360px;min-height:180px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#fff}.pairing-qr svg{display:block;width:min(100%,336px);height:auto;image-rendering:pixelated}.pairing-qr-loading,.pairing-qr-error{padding:38px 12px;text-align:center;color:var(--muted)}@media(max-width:600px){.pairing-qr{max-width:100%;padding:8px}.pairing-qr svg{width:min(100%,300px)}}

.sidebar-note .eyebrow{white-space:nowrap}
.hub-footer .hub-footer-brand{display:flex;align-items:flex-start;text-align:left;gap:8px}
.hub-footer .hub-footer-lines{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hub-footer .hub-footer-lines .eyebrow{font-size:9px;line-height:1.5;letter-spacing:1px;white-space:nowrap}
.hub-footer .hub-footer-lines span:last-child{text-align:left}
.hub-library-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.hub-edit-toggle{min-height:42px;padding:8px 12px;font-size:12px;white-space:nowrap}
.hub-edit-section{min-height:85px}
.hub-edit-empty{padding:16px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.hub-edit-section .game-tile{min-height:245px}
.hub-edit-section .game-tile.is-dragging{opacity:.55}
.hub-edit-section .tile-edit-actions{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 12px}
.hub-edit-section .tile-edit-actions button{min-width:38px;min-height:38px;padding:4px 7px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-weight:750}
.hub-edit-section .tile-edit-actions [data-edit-handle]{touch-action:none;cursor:grab;font-size:20px;line-height:1}
.tile-favorite svg{width:25px;height:25px}
.tile-favorite[aria-pressed="true"] svg[data-ui-icon="star"]{fill:currentColor}
@media(max-width:520px){.hub-library-tools{width:100%;justify-content:space-between}.hub-edit-section .game-grid{grid-template-columns:minmax(0,1fr)}.hub-edit-section .game-tile{min-height:190px}.hub-edit-section .tile-edit-actions{padding:0 7px 8px;gap:3px}.hub-edit-section .tile-edit-actions button{min-width:32px;min-height:38px}}
@media(max-width:760px){.hub-edit-section .game-tile:last-child{grid-column:auto;display:flex;min-height:245px}.hub-edit-section .game-tile:last-child .game-cover{height:143px;padding:27px 12px 0}.hub-edit-section .game-tile:last-child .tile-content{padding:6px 16px 16px}}
@media(max-width:520px){.hub-edit-section .game-tile:last-child{display:grid;grid-template-columns:minmax(90px,36%) minmax(0,1fr);min-height:190px}.hub-edit-section .game-tile:last-child .game-cover{grid-column:1;grid-row:1;height:100%;padding:34px 8px 15px}.hub-edit-section .game-tile:last-child .tile-content{grid-column:2;grid-row:1;padding:45px 12px 12px 3px}.hub-edit-section .tile-edit-actions{grid-column:1/-1;grid-row:2}}

/* Every modal owner uses modal-root; inert alone does not stop scroll chaining. */
html:has(#modal-root > *),body:has(#modal-root > *),html:has(#app .handoff),body:has(#app .handoff),html:has(#app .lobby-countdown),body:has(#app .lobby-countdown){overflow:hidden;overscroll-behavior:none}
.modal-backdrop,.shared-modal-backdrop{overscroll-behavior:none}
.modal,.handoff,.lobby-countdown{overscroll-behavior:contain}
/* The collection grows with installed packs; cards follow available width. */
.filters{flex-wrap:wrap}.library-heading{align-items:flex-start;gap:12px}:is(.collection-count,.saved-count){white-space:nowrap;padding-top:10px}.game-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));align-items:stretch}.game-tile.featured{grid-column:span 2}.game-tile .tile-title,.game-tile .tile-description{overflow-wrap:anywhere}.game-tile .tile-content{min-width:0}.tile-favorite{position:absolute;top:12px;right:12px;z-index:4;width:42px;height:42px;border:1px solid var(--color-border-subtle,#d7dcca);border-radius:50%;background:var(--color-surface-panel,#fffdf0);color:#9b7a35;font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 5px #253c2420}.tile-favorite[aria-pressed=true]{background:var(--color-surface-selected,#f8e5a8);color:#704f19}.tile-top{right:60px;left:16px}.tile-top .pill{white-space:normal;line-height:1.2}
@media(max-width:1020px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-tile.featured{grid-column:span 2}}
@media(max-width:760px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-tile:last-child{grid-column:auto;display:flex;min-height:246px}.game-tile:last-child .game-cover{height:143px;padding:27px 12px 0}.game-tile:last-child .tile-content{padding:6px 16px 16px}.game-tile.featured{grid-column:span 2}}
@media(max-width:520px){.hub-main{padding:16px 12px 26px}.library-heading{display:block}:is(.collection-count,.saved-count){display:block;padding:2px 0}.filters{gap:4px}.filter{padding:8px 10px}.game-grid,.hub-edit-section .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-tile,.game-tile:last-child,.game-tile.featured,.hub-edit-section .game-tile:last-child{grid-column:auto;display:flex;flex-direction:column;min-height:0;height:clamp(172px,49vw,250px);min-width:0}.game-tile .game-cover,.game-tile:last-child .game-cover,.game-tile.featured .game-cover,.hub-edit-section .game-tile:last-child .game-cover{height:auto;min-height:48px;flex:1 1 0;padding:27px 7px 0}.game-tile .tile-content,.game-tile:last-child .tile-content,.game-tile.featured .tile-content,.hub-edit-section .game-tile:last-child .tile-content{padding:3px 9px 9px;flex:0 0 auto;display:flex;flex-direction:column}.game-tile .tile-title,.game-tile.featured .tile-title{font-size:clamp(16px,4.3vw,20px);line-height:1.1;letter-spacing:-.4px}.game-tile .tile-description,.game-tile.featured .tile-description{font-size:11px;line-height:1.3;margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.game-tile .tile-meta .meta-time{display:none}.game-tile .tile-bottom{gap:3px;margin-top:3px}.game-tile .play-tile{width:30px;height:30px;flex:none}.game-tile .tile-top{position:absolute;left:7px;top:7px;right:41px;margin:0;min-height:0;align-content:flex-start}.tile-favorite{top:7px;right:7px;width:28px;height:28px}.tile-favorite:before{content:"";position:absolute;inset:-8px}.tile-favorite svg{width:20px;height:20px}.hub-edit-section .game-tile{height:auto;min-height:230px}.hub-edit-section .tile-edit-actions{padding:0 6px 8px}}
.hub-game-section + .hub-game-section{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.hub-section-title{font-size:19px;line-height:1.25;margin:0 0 14px}
@media(max-width:520px){.hub-game-section + .hub-game-section{margin-top:18px;padding-top:18px}.hub-section-title{font-size:17px}}

/* Pack-owned palette tokens share the same library card, including recent games. */
.game-tile[data-theme="green"],.pack-art[data-theme="green"]{--tile-label-surface:var(--color-surface-tile-green,#e2ead7);background:var(--color-surface-tile-green,#e2ead7)}.game-tile[data-theme="coral"],.pack-art[data-theme="coral"]{--tile-label-surface:var(--color-surface-tile-coral,#f1dcd0);background:var(--color-surface-tile-coral,#f1dcd0)}.game-tile[data-theme="blue"],.pack-art[data-theme="blue"]{--tile-label-surface:var(--color-surface-tile-blue,#dbe9e8);background:var(--color-surface-tile-blue,#dbe9e8)}.game-tile[data-theme="gold"],.pack-art[data-theme="gold"]{--tile-label-surface:var(--color-surface-tile-gold,#f1e7c7);background:var(--color-surface-tile-gold,#f1e7c7)}.game-tile[data-theme="violet"],.pack-art[data-theme="violet"]{--tile-label-surface:var(--color-surface-tile-violet,#e5dfee);background:var(--color-surface-tile-violet,#e5dfee)}
.game-tile.featured{color:var(--ink)}.game-tile.featured .tile-description{color:var(--muted)}.game-cover svg{display:block;width:100%;height:100%;object-fit:contain}.room-choice-divider{height:1px;width:100%;border:0;background:var(--line);margin:7px 0}

/* RC4: four independent filter rows, shared semantic tag colors. */
.library-heading{flex-wrap:wrap}.hub-filters{width:100%;min-width:0}.hub-filters>.filters{display:flex;flex-wrap:wrap;gap:5px;padding:9px 0;max-width:none;overflow:visible;border-bottom:1px solid var(--color-border-subtle,#d5d8ca)}.hub-filters>.filters:last-child{border-bottom:0}.hub-filters .filter{min-height:44px;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 12px}.hub-filters svg,.tile-tags svg{width:23px;height:23px;flex:none}.filter-format .filter{background:var(--color-surface-raised,#f7f6eb);border:1px solid var(--color-border-subtle,#c7cebc)}.filter-type .filter,.tag-type{background:var(--color-surface-raised,#d4dfc4)}.filter-mechanic .filter,.tag-mechanic{background:var(--color-surface-raised,#f4f4e7)}.hub-filters .filter.active{background:var(--color-action-primary,#244b3e);color:var(--color-action-on-primary,#fff);border-color:var(--color-border-subtle,#244b3e)}.hub-filters .filter:disabled{opacity:.35}.hub-filters .filter-format{display:grid;grid-template-columns:repeat(8,minmax(0,44px));gap:4px}.filter-format .filter{min-width:0;min-height:0;width:100%;aspect-ratio:1;border-radius:50%;padding:0;font-size:12px}.tile-tags{right:54px;display:flex;gap:4px;flex-wrap:wrap;z-index:3}.tile-tags .pill{position:relative;border:1px solid var(--color-border-subtle,#c9d2bd);display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 7px;max-width:100%;white-space:normal;color:var(--color-text-primary,#294d3f);cursor:pointer}.tile-tags .tag-type{background:var(--color-surface-raised,#d4dfc4)}.tile-tags .tag-mechanic{background:var(--color-surface-raised,#f4f4e7)}.game-tile .game-cover{padding-top:66px}.hub-filters .filter-scope [data-filter="favorites"],.hub-filters .filter-scope [data-hub-filters-toggle]{width:44px;padding:7px}.tag-type svg{width:20px;height:20px}

/* RC4 lobby start controls */
.start-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.start-options fieldset{min-width:0;border:0;padding:0;margin:0}.start-options legend{font-weight:700;margin-bottom:8px}.start-option{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px}.start-option .icon{width:22px;height:22px;flex:none}.first-token,.first-player-mark{color:#171d18;background:var(--color-token-face,#e2ba4e);border-radius:50%}.first-token{touch-action:none;z-index:3}.first-token[aria-pressed=true]{outline:3px solid var(--green)}.field[hidden]{display:none!important}

.tile-tags{pointer-events:none}

/* Keep long presses on game text from opening the browser selection menu. */
.table-shell,.table-shell *{-webkit-touch-callout:none}
.table-shell input,.table-shell textarea,.table-shell [contenteditable]:not([contenteditable="false"]){-webkit-touch-callout:default}

/* On narrow hubs fullscreen remains available from Settings. */
:where(:root[data-ui-compact="true"]) #app .topbar-tools>[data-command=fullscreen]{display:none}

.intro .hub-intro-actions{display:flex;flex-direction:column;align-items:stretch;justify-self:end;gap:12px;margin-top:16px;max-width:100%;min-width:0}.hub-intro-actions .btn{margin:0;max-width:100%}.hub-edit-toggle{width:44px;min-width:44px;height:44px;padding:0}

@media(max-width:520px){.tile-top.tile-tags{gap:3px}.tile-tags .pill{min-height:24px;padding:3px 4px;font-size:9px;white-space:nowrap;line-height:1.1}.tile-tags .tag-type{width:24px;height:24px;padding:2px;flex:none}.tile-tags .tag-type svg{width:19px;height:19px}.tile-tags .tag-mechanic{max-width:none}.game-cover svg{overflow:hidden}}
@media(max-width:350px){.hub-main{padding-inline:10px}.game-tile .tile-description{-webkit-line-clamp:1}}

.type-badge{--type-size:44px;display:inline-flex;align-items:center;justify-content:center;width:var(--type-size);height:var(--type-size);aspect-ratio:1;border-radius:50%!important;flex:none;background:var(--color-surface-raised,#d4dfc4)}
.type-badge-card{--type-size:32px;padding:4px!important}
@media(max-width:520px){.tile-tags .type-badge-card{--type-size:24px;min-height:24px;padding:2px!important;border-radius:50%!important}}
/* Shared card action geometry: top markers mirror the bottom Play glyph. */
.game-tile{--tile-glyph-size:24px;--tile-play-size:43px;--tile-action-inset:18px;--tile-glyph-inset:calc(var(--tile-action-inset) + (var(--tile-play-size) - var(--tile-glyph-size))/2)}
.game-tile .tile-content{padding-right:var(--tile-action-inset);padding-bottom:var(--tile-action-inset)}
.game-tile .play-tile{width:var(--tile-play-size);height:var(--tile-play-size)}
.game-tile .play-tile>svg{width:var(--tile-glyph-size);height:var(--tile-glyph-size);display:block}
.game-tile .tile-favorite{padding:0;display:inline-grid;place-items:center;width:var(--tile-glyph-size);height:var(--tile-glyph-size);right:var(--tile-glyph-inset);top:var(--tile-glyph-inset)}
.game-tile .tile-favorite>svg{width:calc(var(--tile-glyph-size) - 4px);height:calc(var(--tile-glyph-size) - 4px);display:block;margin:auto;vertical-align:initial}
.game-tile .tile-favorite:before{content:"";position:absolute;inset:-11px}
.game-tile .tile-top{left:var(--tile-glyph-inset);top:var(--tile-glyph-inset);right:calc(var(--tile-glyph-inset) + var(--tile-glyph-size) + 6px)}
.game-tile .tile-tags .type-badge-card{--type-size:var(--tile-glyph-size);width:var(--type-size);height:var(--type-size);min-height:var(--type-size);padding:2px!important}
.game-tile .type-badge-card svg{width:calc(var(--tile-glyph-size) - 4px);height:calc(var(--tile-glyph-size) - 4px)}
@media(max-width:520px){.game-tile{--tile-play-size:30px;--tile-action-inset:9px}.game-tile .tile-tags .tag-mechanic{min-height:var(--tile-glyph-size)}}
/* Compact shared header: type / player count / favorite. The whole tile starts the game. */
.tile-card-header{display:grid;grid-template-columns:var(--tile-glyph-size) minmax(0,1fr) var(--tile-glyph-size);align-items:center;gap:4px;flex:none;position:relative;z-index:4;padding:var(--tile-action-inset) var(--tile-action-inset) 0}
.game-tile .type-badge-card{--type-size:var(--tile-glyph-size);width:var(--type-size);height:var(--type-size);min-height:var(--type-size);padding:2px!important}
.game-tile .tile-card-header .tile-favorite{position:relative;inset:auto}
.tile-player-count{display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;white-space:nowrap;color:var(--ink)}
.tile-player-count svg{width:17px;height:17px;flex:none}
.tile-mechanics{position:relative;z-index:3;display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-height:18px;margin:1px var(--tile-action-inset) 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;flex:none}
.tile-mechanics::-webkit-scrollbar{display:none}
#app .tile-mechanics .pill{white-space:nowrap;flex:none;min-height:14px;padding:1px 5px;font-size:9px;line-height:1.1}
.game-tile .game-cover{padding-top:0}
@media(max-width:520px){.game-tile .game-cover,.game-tile:last-child .game-cover,.game-tile.featured .game-cover,.hub-edit-section .game-tile:last-child .game-cover{padding:4px 8px 0;min-height:40px}.tile-player-count{font-size:11px}.tile-player-count svg{width:15px;height:15px}.tile-mechanics{margin-top:1px;min-height:16px}.game-tile .tile-content{padding-top:4px}}
/* Text has reserved rows; cover size never depends on wrapping in its description. */
#app .game-tile .tile-content{
 position:absolute;left:var(--tile-action-inset);right:var(--tile-action-inset);bottom:var(--tile-action-inset);
 padding:0!important;z-index:3;display:block;
}
#app .game-tile .tile-title{
 margin:0;line-height:1.1;height:1.1em;min-height:1.1em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
#app .game-tile .tile-description{
 margin:2px 0 0;font-size:var(--tile-caption-size);line-height:1.2;height:2.4em;min-height:2.4em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
#app .game-tile .game-cover{
 position:absolute;left:0;right:0;top:calc(var(--tile-action-inset) + var(--tile-glyph-size) + 16px);
 bottom:calc(var(--tile-action-inset) + var(--tile-title-size)*1.1 + var(--tile-caption-size)*2.4 + 3px);height:auto!important;min-height:0!important;padding:0 6px!important;pointer-events:none;
 mask-image:none;
}

#app .game-tile .tile-title{display:flex;align-items:flex-end;text-shadow:none}
#app .game-tile .tile-title>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Fixed caption rows and a separate artwork area keep every card square. */
#app .game-tile{--tile-title-size:clamp(14px,1.6vw,20px);--tile-caption-size:10.5px;height:auto;min-height:0;aspect-ratio:1;display:flex;flex-direction:column;grid-column:auto}
#app .game-tile .tile-title{font-size:var(--tile-title-size)}
@media(max-width:520px){#app .game-tile{--tile-title-size:clamp(12px,3.3vw,14px);--tile-caption-size:9.5px;height:auto;min-height:0;aspect-ratio:1}}

/* Editing keeps the same card geometry; controls overlay its caption zone. */
#app .hub-edit-section .game-tile{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app .hub-edit-section .game-tile.is-dragging{cursor:grabbing}
#app .hub-edit-section .tile-edit-actions{position:absolute;left:var(--tile-action-inset);right:var(--tile-action-inset);bottom:var(--tile-action-inset);z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:4px;padding:0;pointer-events:none}
#app .hub-edit-section .tile-edit-actions button{pointer-events:auto;flex:none;min-width:32px;width:32px;min-height:36px;height:36px;padding:4px;box-shadow:0 2px 5px #20352d22}

/* Explicit track width prevents WebKit shrink-to-fit with inline-size containment and aspect-ratio. */
/* Scale the approved 178px card composition with its own content width. */
#app .game-tile{width:100%;container-type:inline-size;border-radius:14%;--tile-unit:calc(100cqw / 176);--tile-action-inset:calc(9 * var(--tile-unit));--tile-glyph-size:calc(24 * var(--tile-unit));--tile-title-size:calc(12.87 * var(--tile-unit));--tile-caption-size:calc(9.5 * var(--tile-unit))}
#app .game-tile .tile-card-header{gap:calc(4 * var(--tile-unit))}
#app .game-tile .type-badge-card{padding:calc(2 * var(--tile-unit))!important}
#app .game-tile :is(.type-badge-card,.tile-favorite)>svg{width:calc(20 * var(--tile-unit));height:calc(20 * var(--tile-unit))}
#app .game-tile .tile-favorite>svg{width:calc(18 * var(--tile-unit));height:calc(18 * var(--tile-unit))}
#app .game-tile .tile-player-count{gap:calc(4 * var(--tile-unit));font-size:calc(11 * var(--tile-unit));line-height:1.2}
#app .game-tile .tile-player-count svg{width:calc(15 * var(--tile-unit));height:calc(15 * var(--tile-unit))}
#app .game-tile .tile-mechanics{gap:calc(4 * var(--tile-unit));min-height:calc(16 * var(--tile-unit));margin-top:var(--tile-unit)}
#app .game-tile .tile-mechanics .pill{min-height:calc(14 * var(--tile-unit));padding:var(--tile-unit) calc(5 * var(--tile-unit));font-size:calc(9 * var(--tile-unit))}
#app .game-tile .game-cover{top:calc(49 * var(--tile-unit));bottom:calc(var(--tile-action-inset) + var(--tile-title-size)*1.1 + var(--tile-caption-size)*2.4 + 3 * var(--tile-unit));padding:0 calc(6 * var(--tile-unit))!important}
#app .game-tile .tile-title{letter-spacing:calc(-.4 * var(--tile-unit))}
#app .game-tile .tile-description{margin-top:calc(2 * var(--tile-unit))}
#app .hub-edit-section .tile-edit-actions{gap:calc(4 * var(--tile-unit))}
#app .hub-edit-section .tile-edit-actions button{min-width:calc(32 * var(--tile-unit));width:calc(32 * var(--tile-unit));min-height:calc(36 * var(--tile-unit));height:calc(36 * var(--tile-unit));padding:calc(4 * var(--tile-unit));border-radius:calc(9 * var(--tile-unit))}
#app .hub-edit-section .tile-edit-actions button svg{width:calc(22 * var(--tile-unit));height:calc(22 * var(--tile-unit))}

/* Collapsed library facets keep the scope controls visible. */
.hub-filters>.filters[hidden]{display:none}

/* Keep the sidebar footer readable on short landscape screens. */
@media(min-width:761px){
 .sidebar{min-height:0;overflow-y:auto;padding-top:24px;padding-bottom:18px;gap:12px}
 .side-nav{margin-top:22px;gap:6px}
 .sidebar-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:8px 2px 0;flex-shrink:0;overflow-wrap:anywhere}
 .sidebar-note .little-dice{display:flex;justify-content:center;align-items:center;flex:0 0 32px;margin:0}
 .sidebar-note .little-dice svg{width:32px;height:32px}
 .sidebar-note-copy{flex:1 1 115px;min-width:0}
 .sidebar-note .eyebrow{flex-basis:100%;white-space:normal;text-align:center}
}
@media(min-width:761px) and (max-height:650px){.sidebar{padding-top:14px;padding-bottom:12px;gap:8px}.side-nav{margin-top:8px;gap:4px}.side-nav .nav-item{padding-block:10px}.sidebar-note{line-height:1.35;gap:5px}}

/* Keep the familiar hero composition in exactly two compact lines. */
#app .intro h1 .intro-line{display:block;white-space:nowrap}
#app .intro h1 .intro-line:first-child{color:var(--ink)}
@media(max-width:760px){#app .intro h1{font-size:clamp(24px,8.33vw,32px);letter-spacing:-1.5px;line-height:1.12}}

/* Page navigation and appearance are separate groups. */
.side-nav .shared-page-tabs>.nav-item.current,.side-nav .shared-page-tabs>.nav-item:hover{background:transparent;}
.hub-pages{min-height:calc(100svh - 190px);}
@media(max-width:760px){
 .app-shell .side-nav{grid-template-columns:minmax(0,1fr);gap:10px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
 .side-nav>.hub-page-tabs{box-shadow:0 5px 22px #20352d1a;}
}

.intro-heading{display:flex;align-items:center;gap:12px;min-width:0;}
.intro-heading h1{min-width:0;}
#app .intro-heading .hub-hero-action{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--green);color:var(--color-action-on-primary,#fff);}
@media(prefers-reduced-motion:reduce){.intro-heading .hub-install-button{animation:none;}}
.reduced-motion .intro-heading .hub-install-button{animation:none;}

/* Text selection is an editing affordance, shared by every application surface. */
body,body *{-webkit-user-select:none;user-select:none}
body input,body textarea,body [contenteditable]:not([contenteditable="false"]),body [contenteditable]:not([contenteditable="false"]) *{-webkit-user-select:text;user-select:text}
body [contenteditable][contenteditable="false"],body [contenteditable][contenteditable="false"] *{-webkit-user-select:none;user-select:none}

/* Update notes use the normal modal scroller, never a fixed screen banner. */
.update-changes>section+section{border-top:1px solid var(--color-border-subtle,#c8cbbb);margin-top:1em;padding-top:1em}
.update-changes li{margin-block:.5em;overflow-wrap:anywhere}
.updates-modal .modal-foot{flex-wrap:wrap}

/* Pack-owned illustrations; host-owned rulebook layout, shared across games. */
.game-rules-help .rulebook-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 12px}
.game-rules-help .rulebook-figures.is-row{display:flex;flex-wrap:wrap;justify-content:center}
.game-rules-help .rulebook-figures.is-stack{grid-template-columns:1fr}
.game-rules-help .rulebook-figure{min-width:0;margin:0;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--color-surface-raised,var(--white));text-align:center}
.game-rules-help .rulebook-figures.is-row>.rulebook-figure{flex:1 1 88px;max-width:160px}
.game-rules-help .rulebook-illustration{height:112px;display:flex;justify-content:center;align-items:center}
.game-rules-help .is-control .rulebook-illustration{height:48px}
.game-rules-help .is-stack .is-control .rulebook-illustration{height:auto;display:block}
.game-rules-help .is-stack .is-control .rulebook-illustration>svg{width:100%;height:auto}
.game-rules-help .rulebook-illustration>svg{display:block;width:auto;max-width:100%;height:100%;overflow:visible}
.game-rules-help .rulebook-figure figcaption{font-size:13px;line-height:1.4;margin-top:4px}
.game-rules-help .rulebook-note{border-left:3px solid var(--green);padding:10px 12px;background:var(--color-surface-raised,var(--white));border-radius:0 10px 10px 0;margin:12px 0}

/* Illustrated descriptions: a stable picture column with text alongside. */
.game-rules-help .rulebook-figures.is-list{grid-template-columns:1fr;gap:8px}
.game-rules-help .is-list .rulebook-figure{display:grid;grid-template-columns:clamp(64px,20vw,96px) minmax(0,1fr);align-items:center;gap:12px;text-align:left}
.game-rules-help .is-list .rulebook-illustration{height:auto;aspect-ratio:1}
.game-rules-help .is-list figcaption{margin:0;white-space:pre-line;font-size:14px}
.game-rules-help .is-diagram .rulebook-illustration{height:auto;display:block}
.game-rules-help .is-diagram .rulebook-illustration>svg{width:100%;height:auto}
/* Short paragraphs, steps and comparisons in public rule documents. */
.game-rules-help .rulebook-section p{margin:0 0 12px;line-height:1.5}
.game-rules-help .rulebook-section :is(ul,ol){margin:8px 0 16px;padding-left:24px}
.game-rules-help .rulebook-section li{margin:0 0 8px;line-height:1.5}
.game-rules-help .rulebook-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:12px 0 18px;font-size:14px;line-height:1.5}
.game-rules-help .rulebook-table :is(th,td){border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:top;text-align:left;overflow-wrap:anywhere}
.game-rules-help .rulebook-table th{background:var(--color-surface-raised,var(--white));font-weight:700}
.game-rules-help .rulebook-table :is(th,td):first-child{width:29%;font-weight:600}
/* Rulebook scenes reuse the real piece renderers and common controls, without input. */
.game-rules-help .rulebook-illustration:has(>.rule-art){height:auto;display:block}
.game-rules-help .rule-art{display:grid;gap:10px;max-width:100%;color:var(--ink);pointer-events:none}
.game-rules-help .rule-art-row{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex-wrap:wrap}
.game-rules-help .rule-art [data-size-role="card"]{width:clamp(34px,12vw,60px)!important;height:auto!important;aspect-ratio:5/7;flex:none;min-width:0;padding:0;position:relative;transform:none;overflow:visible}
.game-rules-help .rule-art [data-size-role="card"]>svg{display:block;width:100%;height:100%}
.game-rules-help .rule-art button{opacity:1;filter:none}
.game-rules-help .rule-art .shared-die{width:40px;height:40px;min-width:0;min-height:0;padding:0;flex:none}
.game-rules-help .rule-art .shared-die>svg{width:100%;height:100%}
.game-rules-help .rule-art .scene-button{min-height:36px;padding:6px 10px;font-size:13px}
.game-rules-help .rule-art .ui-button--icon{width:36px;height:36px;padding:6px}
.game-rules-help .rule-art-arrow{font-size:22px;flex:none}
.game-rules-help .rule-art-selected{display:inline-flex;outline:3px solid var(--color-interaction-selected,#bd9434);outline-offset:2px;border-radius:12px}
.game-rules-help .rule-art-pawn{display:inline-flex;width:36px;height:36px;flex:none}
.game-rules-help .rule-art-pawn>svg{width:100%;height:100%}
.game-rules-help .rule-art-player{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--color-surface-selected,#e0e8cb);font-size:13px}
.game-rules-help .rule-art-player>svg{width:24px;height:24px}
.game-rules-help .rule-art-grid{display:grid;grid-template-columns:repeat(var(--rule-columns),minmax(0,1fr));width:min(100%,220px);margin:auto;border:1px solid var(--line)}
.game-rules-help .rule-art-cell{display:flex;justify-content:center;align-items:center;aspect-ratio:1;background:var(--color-surface-raised,#e6e9db);border:1px solid var(--line);font-size:15px;min-width:0}
.game-rules-help .rule-art-cell.dark{background:var(--color-material-board-dark,#84a187)}
.game-rules-help .rule-art-cell.target{outline:3px solid #bd9434;outline-offset:-3px}
.game-rules-help .rule-art-cell.hit{background:#f4c6bd;color:#9b453a}
.game-rules-help .rule-art-cell.miss{background:#fffbed;color:#7d8679}
.game-rules-help .rule-art-cell>svg{width:82%;height:82%}
.game-rules-help .rule-art-cell .rule-art-pawn{width:80%;height:80%}
.game-rules-help .rule-art-domino{display:inline-flex;width:64px;height:37px}
.game-rules-help .rule-art-domino>svg{width:100%;height:100%}
.game-rules-help .rule-art-score{width:100%;font-size:13px;border-collapse:collapse}
.game-rules-help .rule-art-score :is(td,th){border:1px solid var(--line);padding:6px;text-align:center}
.game-rules-help .rule-art-ship{display:inline-flex;width:90px;height:32px;color:#426f76}
.game-rules-help .rule-art-ship>svg{width:100%;height:100%}
.game-rules-help .rule-art .shared-page-tabs{width:100%;min-height:40px;font-size:12px}
.game-rules-help .rule-art .shared-page-tabs button{font-size:12px;min-width:0;white-space:normal}
.game-rules-help .rule-art-color{display:inline-block;width:30px;height:30px;border-radius:50%;border:2px solid var(--line)}
.game-rules-help .rule-art-checker{display:inline-flex;width:56px;height:56px;color:#4d8066}
.game-rules-help .rule-art-checker>svg{width:100%;height:100%}
.game-rules-help .rule-art-symbol{display:inline-flex;width:36px;height:36px}
.game-rules-help .rule-art-symbol>svg{width:100%;height:100%}
.game-rules-help .rule-art-cell.ship{background:#65949a;box-shadow:inset 0 0 0 3px #426f76}
.game-rules-help .rule-art .ttt-mark{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round}
.game-rules-help .rule-art .rule-art-domino{width:64px;height:37px;min-width:0;padding:3px;flex:none;flex-direction:row}
.game-rules-help .rule-art .checker-piece{display:inline-flex;width:80%;height:80%}
.game-rules-help .rule-art-checker .checker-piece{width:100%;height:100%}

.game-rules-help .rule-art .red-suit{color:var(--color-material-card-red,#d97459)}
/* Route examples stay small; real effect cells retain their game palette and glyphs. */
.game-rules-help .rule-art-route{position:relative;width:min(100%,160px);margin:auto}
.game-rules-help .rule-art-route .rule-art-grid{width:100%}
.game-rules-help .rule-art-route>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.game-rules-help .is-list .rulebook-figure:has(.snakes-cell){grid-template-columns:clamp(32px,10vw,48px) minmax(0,1fr)}
.game-rules-help .rulebook-illustration>.snakes-cell{width:100%;aspect-ratio:1}

/* Temporary control preserves the human seat and uses a compact status label. */
.temporary-player-control{display:inline-block;margin-inline-start:.35em;font-size:.7em;line-height:1.2;padding:.15em .4em;border-radius:.5em;background:var(--color-surface-raised,#e7ebde);color:var(--muted);vertical-align:middle}
.player-control-modal .friend-card{width:100%;display:flex;align-items:center;gap:var(--space-3,12px)}
.player-control-modal .friend-card>span:not(.avatar){flex:1;min-width:0}.player-control-modal .friend-card small{display:block;color:var(--muted)}
.player-control-modal .friend-card .icon-btn{flex:none}.player-control-error:empty{display:none}

#app .filter[data-filter=favorites],#app .game-tile .tile-favorite{color:#d6aa36}
#app .filter[data-filter=favorites] svg,#app .game-tile .tile-favorite svg{fill:none}
#app .filter[data-filter=favorites].active svg,#app .game-tile .tile-favorite.active svg,#app .game-tile .tile-favorite[aria-pressed=true] svg{fill:currentColor}

.updates-modal [hidden]{display:none!important}
.update-download{margin:0 0 14px}.update-download-caption{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.updates-modal .update-download-line{height:6px;border-radius:8px;background:var(--line);margin:6px 0;overflow:hidden}
.update-download-line>i{display:block;flex:none;width:var(--download-progress,0%);height:100%;border-radius:inherit;background:var(--green);transition:width .15s ease}
.update-actions{justify-content:flex-end;gap:8px}.updates-modal .update-apply{background:var(--green);color:var(--color-action-on-primary,#fffdf4)}
#app .hub-install-button[data-update-phase=available]{background:#559fbe;border-color:#559fbe;color:#fffdf4}
#app .hub-install-button[data-update-phase=downloading]{background:#4f8381;border-color:#4f8381;color:#fffdf4}
#app .hub-install-button[data-update-phase=paused]{background:var(--color-feedback-error,#a84938);border-color:var(--color-feedback-error,#a84938);color:#fffdf4}
#app .hub-install-button[data-update-phase=ready]{background:var(--green);color:var(--color-action-on-primary,#fffdf4)}
@media(prefers-reduced-motion:no-preference){.hub-install-button[data-update-phase=downloading] svg{animation:update-download-spin 1.6s linear infinite}}
@keyframes update-download-spin{to{transform:rotate(360deg)}}

.update-actions [data-update-download],.update-actions [data-update-status]{flex-basis:100%;min-width:0;width:100%;margin:0}.update-actions [data-update-status]{font-size:13px;line-height:1.4}.update-actions [data-update-status]:empty{display:none}.update-actions [data-update-status][role=alert]{color:var(--color-feedback-error,#a84938)}

@keyframes room-needs-ready{0%,100%{opacity:1;box-shadow:0 0 0 2px var(--green)}50%{opacity:.6;box-shadow:0 0 0 5px transparent}}
.room-needs-ready{animation:room-needs-ready 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.room-needs-ready{animation:none;outline:2px solid var(--green)}}

/* Both library pages share a full-width filter row and compact summary actions. */
.intro-heading{justify-content:space-between}
.library-heading{display:flex;flex-wrap:wrap;gap:0}.library-heading>.hub-filters{width:100%}
.library-heading>.hub-library-tools{width:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px;border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.library-heading :is(.collection-count,.saved-count){margin:0;padding:0;line-height:1.3}
#app .library-heading .hub-compact-action{width:32px;min-width:32px;height:32px;min-height:32px;padding:6px;border-radius:10px;flex:none}
#app .library-heading .hub-compact-action svg{width:18px;height:18px}

/* Keep the library header in viewport coordinates, outside sticky scroll calculations. */
:root{--hub-safe-top:env(safe-area-inset-top,0px)}
:root:fullscreen{--hub-safe-top:0px}
#app .hub-topbar-slot{height:calc(44px + var(--hub-safe-top) / var(--ui-interface-scale,1));min-width:0}
#app .hub-main .topbar{position:fixed;top:0;left:var(--hub-header-left,0px);width:var(--hub-header-width,100%);height:calc(44px + var(--hub-safe-top) / var(--ui-interface-scale,1));min-height:44px;padding-top:calc(var(--hub-safe-top) / var(--ui-interface-scale,1));margin:0;box-sizing:border-box;z-index:40;background:var(--paper)}
#app .hub-main .topbar::before{content:"";position:absolute;inset:0 -12px -8px;z-index:-1;background:var(--paper);pointer-events:none}