#catalogDialog{width:min(900px,calc(100vw - 24px));max-height:88dvh;overflow:auto}
#catalogGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;margin:20px 0}
.catalog-tile{padding:12px;border:1px solid var(--line);border-radius:9px;background:#f0f2e8;text-align:center}
.catalog-tile>svg{width:100%;max-width:130px;aspect-ratio:1;border-radius:5px}
.catalog-tile h3{font-size:14px;margin:9px 0}.catalog-tile strong{font-size:12px;color:#53674d}.catalog-tile p,.catalog-tile small{font-size:11px;line-height:1.6;margin:6px 0;color:#69775d}
#undoPanel{position:fixed;top:100px;left:50%;transform:translateX(-50%);z-index:55;width:min(510px,calc(100vw - 24px));padding:16px;border:1px solid #becbaa;border-radius:12px;background:#faf9f3f2;box-shadow:0 8px 30px #24332828;max-height:60dvh;overflow:auto}
#undoPanel strong{font-size:14px}#undoPanel p{font-size:12px;line-height:1.7}#undoPanel>div{display:flex;gap:9px}#undoPanel button{flex:1;min-height:44px;margin:0}
@media(max-width:820px),(max-width:1000px) and (max-height:500px){
 body:not(.in-lobby) main,body.has-pending:not(.in-lobby) main{position:fixed;inset:0;display:block;padding:0;overflow:hidden}
 body:not(.in-lobby) header{position:fixed;top:0;left:0;right:0;height:calc(48px + env(safe-area-inset-top));min-height:48px;padding:env(safe-area-inset-top) 10px 0;z-index:40;background:rgba(248,246,240,.63);border-bottom:1px solid #e3e5d380}
 .brand{font-size:18px}.brand small{display:none}.brand-mark{font-size:25px}.header-controls button{min-width:42px;font-size:11px}.header-controls{gap:0}
 body:not(.in-lobby) .players-panel{position:absolute;top:calc(48px + env(safe-area-inset-top));left:0;right:0;z-index:20;padding:4px 9px;background:rgba(248,246,240,.57);border-bottom:0;pointer-events:none}
 #players{pointer-events:auto}.player{padding:5px 8px;min-width:130px;background:rgba(250,249,243,.66)}.player.active{background:rgba(233,238,223,.72)}
 body:not(.in-lobby) .play-area{position:absolute;inset:0;padding:0;margin:0;display:block}
 body:not(.in-lobby) #boardViewport{position:absolute;inset:0;min-height:0;border:0;border-radius:0;width:100%;height:100%}
 body:not(.in-lobby) .board-heading{position:absolute;top:calc(105px + env(safe-area-inset-top));left:10px;z-index:15;height:36px;pointer-events:none}
 .board-heading h1{display:none}.phase-pill{background:#f5f5e999;font-size:9px;padding:5px}
 body:not(.in-lobby) .board-toolbar{position:absolute;top:calc(102px + env(safe-area-inset-top));left:100px;right:8px;z-index:16;height:42px;gap:4px;pointer-events:none}
 .board-toolbar>div:first-child{font-size:10px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#faf9f399;border-radius:4px;padding:4px}
 .board-actions{pointer-events:auto;gap:2px}.board-actions button{width:32px;height:36px;background:#faf9f3b3}.board-actions>span{width:25px;font-size:9px}
 body:not(.in-lobby) .bottom-status{position:absolute;left:10px;bottom:calc(175px + env(safe-area-inset-bottom));z-index:10;background:rgba(250,249,243,.55);border-radius:4px;padding:4px;height:auto;pointer-events:none}
 .board-caption,.board-help,.compass{display:none}
 body:not(.in-lobby) .action-panel,body.has-pending:not(.in-lobby) .action-panel{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;height:calc(168px + env(safe-area-inset-bottom));padding:8px 12px calc(56px + env(safe-area-inset-bottom));grid-template-columns:62px minmax(0,1fr);grid-template-rows:17px 20px 24px 34px;gap:3px 10px;background:rgba(250,249,243,.61);border-radius:12px 12px 0 0;box-shadow:0 -3px 15px #35432b0a;pointer-events:none}
 .action-panel button{pointer-events:auto}.tile-preview{width:62px;height:77px;background:#f1f0e560}.tile-preview svg{width:57px;height:57px}.tile-hint{font-size:10px}.tile-name h3{font-size:13px}#rotate{min-height:34px;background:#faf9f366;padding:6px}
 .mobile-controls{left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;grid-template-columns:86px minmax(0,1fr) 40px;gap:6px}
 .mobile-controls button{background:#faf9f3a6}.mobile-controls .primary{background:#486343d9;color:#fff}
 body.has-pending #claimChoices{left:84px;right:12px;bottom:calc(57px + env(safe-area-inset-bottom));width:auto;max-height:74px;gap:5px}
 body.has-pending #claimChoices button{min-width:70px;min-height:34px;background:#f1f3e8cc;padding:5px;font-size:11px}
 body.has-pending #confirmTile{visibility:visible}
 #undoPanel{top:calc(150px + env(safe-area-inset-top))}.toast{bottom:calc(185px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){.header-controls #connection{display:none}.board-toolbar>div:first-child{max-width:60px}.brand{font-size:16px}}
@media(max-width:1000px) and (max-height:500px){
 body:not(.in-lobby) .action-panel,body.has-pending:not(.in-lobby) .action-panel{left:auto;right:8px;bottom:8px;width:220px;height:170px;border-radius:12px}
 .mobile-controls{left:auto;right:20px;width:196px;grid-template-columns:64px minmax(0,1fr) 34px;bottom:18px}.mobile-controls button{font-size:10px}
 body.has-pending #claimChoices{left:auto;right:20px;width:140px;bottom:66px}
 body:not(.in-lobby) .bottom-status{bottom:12px}#undoPanel{top:120px;max-height:calc(100dvh - 140px)}
}
.slot{background:rgba(47,99,52,.48);border:2px dashed #2e6036;color:#174423;box-shadow:inset 0 0 0 2px #ffffff48;font-weight:700;opacity:1}
.slot:hover,.slot:focus-visible{background:rgba(47,99,52,.6);border-color:#153c20;color:#fff}
.slot.unmarked,.slot.unmarked:hover,.slot.unmarked:focus-visible{background:transparent;border-color:transparent;color:transparent;box-shadow:none}
.slot.unmarked:focus-visible{outline:2px solid #a87913;outline-offset:-4px}
.board-tile.last-placement{outline:3px solid var(--last-move-color);outline-offset:2px;z-index:2;box-shadow:0 0 0 5px #fffdf69c,0 3px 7px #3b4c3926}
.last-placement-label{position:absolute;top:3px;left:3px;z-index:7;font-size:9px;line-height:14px;padding:0 4px;border-radius:3px;border-left:3px solid var(--last-move-color);background:#fffdf6d9;color:#31452e;pointer-events:none}
.last-follower-hint{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%);border:2px solid #fffdf6;outline:2px solid var(--last-move-color);border-radius:50%;z-index:3;pointer-events:none}
.last-follower-hint.returned-follower{border-style:dashed}
.last-follower-hint.returned-follower svg{width:100%;height:100%;opacity:.35}
.hint-settings h3{margin:0 0 12px;font-size:15px}
.hint-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;margin:8px 0;padding:8px 12px;background:#eff2e9;border:1px solid var(--line);border-radius:8px;font-size:13px;cursor:pointer}
.hint-toggle input{width:20px;height:20px;flex-shrink:0;accent-color:#486343;cursor:pointer}
.hint-toggle:has(input:disabled){opacity:.6;cursor:default}
.hint-settings .subtle{font-size:11px;line-height:1.7}
.selected-preview{opacity:1;outline:3px solid #a87913;pointer-events:none}
.selected-preview .claim-button{pointer-events:auto;z-index:5}
.selected-preview .claim-marker{pointer-events:none;z-index:4}
.selected-feature{background:#355d39!important;color:#fff!important;border-color:#173e21!important}
.claim-button{width:24px;height:24px;font-size:16px;line-height:22px;background:rgba(253,250,240,.3);border-color:#ffffff70;box-shadow:0 1px 3px #35482c30}
.claim-button:hover{background:rgba(253,250,240,.5)}
.claim-button.selected-feature{background:rgba(53,93,57,.42)!important;color:#fff!important;border-color:#173e2180!important}
.board-tile{overflow:visible}
.board-tile>svg{pointer-events:none;border-radius:3px}
.board-tile>svg,.tile-preview>svg,.catalog-tile>svg{filter:saturate(.86)}
.claim-marker{width:40px;height:40px;z-index:4;filter:drop-shadow(0 1px 1.5px #27321e95)}
.claim-marker>svg{width:100%;height:100%;display:block}
#endDialog .primary{width:100%;margin-top:10px}
#undoPanel>div{flex-wrap:wrap}
#undoPanel #endVoteReset{flex-basis:100%;margin-top:8px}
@media(max-width:820px),(max-width:1000px) and (max-height:500px){
 .claim-button::before{content:"";position:absolute;inset:-10px;border-radius:50%}
 #confirmMove{display:none}
 body.has-preview:not(.in-lobby) .action-panel{height:calc(212px + env(safe-area-inset-bottom))}
 body.has-preview #claimChoices{display:flex;position:fixed;left:84px;right:12px;bottom:calc(57px + env(safe-area-inset-bottom));gap:5px;flex-wrap:wrap;z-index:32;max-height:44px;overflow:auto}
 body.has-preview #claimChoices button{min-height:36px;min-width:68px;flex:1;padding:5px;font-size:11px;margin:0;background:#f1f3e8b3}
 body.has-preview .bottom-status{bottom:calc(219px + env(safe-area-inset-bottom))}
 .tile-name h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 180px)}
}
@media(max-width:1000px) and (max-height:500px){
 body.has-preview:not(.in-lobby) .action-panel{height:212px;left:auto;right:8px;bottom:8px;width:220px}
 body.has-preview #claimChoices{left:auto;right:20px;width:196px;bottom:64px;max-height:44px}
 body.has-preview .bottom-status{bottom:12px}
 .tile-name h3{max-width:130px}
}
.tile-preview.can-drag,.own-preview[data-drag-tile],.follower-handle,[data-drag-follower]{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.tile-preview.can-drag{pointer-events:auto}
.tile-preview.can-drag>svg,.follower-handle>svg{pointer-events:none}
.selected-preview.own-preview[data-drag-tile]{pointer-events:auto}
.selected-preview.own-preview [data-drag-follower]{pointer-events:auto;cursor:grab;z-index:6}
.remote-preview{outline:3px dashed var(--preview-color);opacity:.78;pointer-events:none}
.remote-preview>span{max-width:none;white-space:nowrap;background:var(--preview-color)}
.drag-ghost{position:fixed;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);opacity:.82;filter:drop-shadow(0 4px 5px #263d2855)}
.tile-ghost{width:84px;height:84px}.follower-ghost{width:38px;height:38px}.drag-ghost svg{display:block;width:100%;height:100%}
.drag-ghost.invalid-drop{opacity:.35}.dragging-piece,.dragging-piece *{cursor:grabbing!important}
.dragging-follower .claim-button{width:32px;height:32px;background:#faf9f355;border:2px solid #486343;box-shadow:0 0 0 5px #48634330}
#followerTools{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;align-items:center;margin:12px 0}
.follower-handle{width:46px;height:46px;padding:5px;background:#faf9f3;border:1px solid #cbd4bf;border-radius:8px}
#followerHint{font-size:11px;line-height:1.6;color:#7e8974;margin:0}
#desktopClaimChoices{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
#desktopClaimChoices button{flex:1;min-width:72px;min-height:42px;margin:0;font-size:12px;padding:6px}
@media(max-width:820px),(max-width:1000px) and (max-height:500px){
 body:not(.has-preview):not(.has-pending) #followerTools{display:none}
 #followerTools{position:absolute;left:12px;bottom:calc(57px + env(safe-area-inset-bottom));margin:0;display:block;z-index:34;pointer-events:auto}
 #followerHint,#desktopClaimChoices{display:none}.follower-handle{width:58px;height:38px;padding:3px}.follower-handle svg{height:100%;width:100%}
}