/* Tak 1.1 — Material 3 roles, original game pieces and responsive table. */
:root{color-scheme:light;--md-sys-color-primary:#7D4E39;--md-sys-color-on-primary:#fff;--md-sys-color-primary-container:#FFDBCA;--md-sys-color-on-primary-container:#633922;--md-sys-color-secondary:#755846;--md-sys-color-on-secondary:#fff;--md-sys-color-secondary-container:#FFDBC6;--md-sys-color-on-secondary-container:#5A412F;--md-sys-color-tertiary:#54633D;--md-sys-color-tertiary-container:#D7E8B7;--md-sys-color-on-tertiary-container:#3D4B28;--md-sys-color-surface:#FFF8F4;--md-sys-color-on-surface:#241913;--md-sys-color-surface-container-lowest:#fff;--md-sys-color-surface-container-low:#FCF2EB;--md-sys-color-surface-container:#F6ECE5;--md-sys-color-surface-container-high:#F0E6DF;--md-sys-color-surface-container-highest:#EADFD8;--md-sys-color-on-surface-variant:#55443B;--md-sys-color-outline:#88746A;--md-sys-color-outline-variant:#DCCCC2;--md-sys-color-error:#BA1A1A;--md-sys-color-on-error:#fff;--md-sys-color-error-container:#FFDAD6;--md-sys-color-on-error-container:#410002;--ink:var(--md-sys-color-on-surface);--muted:var(--md-sys-color-on-surface-variant);--gold:var(--md-sys-color-primary);--line:var(--md-sys-color-outline-variant);--surface:var(--md-sys-color-surface);--shadow:0 12px 40px #25130d1a;--ease:cubic-bezier(.2,.8,.2,1);--piece-radius:22%;--piece-grain:linear-gradient(150deg,#ffffff22,transparent);--cap-clip:polygon(50% 2%,91% 26%,91% 75%,50% 98%,9% 75%,9% 26%);--board-tone:#D9C4AB;--board-tile:#E8D8C2;--board-tile-alt:#E4D1B9;--board-edge:#BFA68D;--board-line:#9C806045}
*{box-sizing:border-box}html{min-height:100%;background:var(--surface);scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{margin:0;color:var(--ink);background:var(--surface);font-family:'Roboto Flex',Roboto,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;position:relative}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--md-sys-color-tertiary);outline-offset:4px}button:not(:disabled):active{transform:scale(.975)}button,button::before{transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}svg{width:24px;height:24px;flex-shrink:0;vertical-align:middle;pointer-events:none}img{max-width:100%}h1,h2,h3,p{margin:0}a{color:var(--md-sys-color-primary);text-underline-offset:3px}em{font-style:normal}button strong,button b{font-weight:650}button small{display:block}.page{width:min(100%,680px);margin:0 auto;padding:18px 24px 108px}.brandbar{height:54px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.brand-lockup{display:flex;align-items:center;gap:11px;padding:0;text-align:left}.brand-lockup img{width:40px;height:40px}.brand-lockup>span{font-size:29px;font-weight:760;letter-spacing:-1.7px;line-height:.94}.brand-sub{display:block;margin-top:5px;font-size:9px;letter-spacing:1.6px;font-weight:560;text-transform:uppercase;color:var(--muted)}.iconbtn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;padding:12px;flex-shrink:0}.iconbtn:hover{background:var(--md-sys-color-surface-container-high)}.iconbtn.tonal{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.iconbtn.tonal:hover{background:var(--md-sys-color-surface-container-highest)}.eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.2;letter-spacing:.5px;font-weight:630}.live-dot{height:6px;width:6px;border-radius:50%;display:inline-block;background:currentColor}.hero{min-height:326px;padding:25px 25px 0;border-radius:32px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);position:relative;overflow:hidden;isolation:isolate}.hero-copy{position:relative;z-index:2}.hero h1{font-size:42px;line-height:1.06;letter-spacing:-1.9px;font-weight:720;margin:17px 0 12px;font-variation-settings:'GRAD' 0}.hero h1 em{color:var(--md-sys-color-primary)}.hero p{font-size:13px;max-width:300px;line-height:1.5}.hero-board-wrap{position:absolute;right:-8px;bottom:-34px;width:200px;height:190px;pointer-events:none}.hero-board{position:absolute;right:0;bottom:0;width:190px;transform:rotate(-17deg) skew(3deg,3deg);filter:drop-shadow(0 12px 12px #49261430)}.hero-orbit{position:absolute;width:300px;height:300px;left:-21px;top:10px;border:1px solid currentColor;border-radius:50%;opacity:.12}.hero-orbit:after{content:'';position:absolute;inset:18px;border:1px solid currentColor;border-radius:50%}.hero-board .board-frame{margin:0;padding:0}.hero-board .board{border-width:6px;border-radius:13px;padding:5px;gap:2px;box-shadow:none}.hero-board .coords{display:none}.hero-board .square{border-radius:4px}.hero-board .piece{width:64%;height:64%}.hero-board .piece.wall{width:22%;height:73%}.hero-board .piece.cap{height:74%;width:68%}.hero-board .stack-badge{font-size:8px;min-width:13px;height:13px;right:1px;bottom:1px}.hero-token{position:absolute;bottom:40px;left:-25px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#AE8243;color:#F7E0B4;border:3px double #E6C895;font-size:18px;font-weight:650;box-shadow:0 4px 0 #73552D,0 7px 9px #45291330;transform:rotate(-15deg)}.hero-tag{position:absolute;bottom:23px;left:25px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;font-size:11px;font-weight:620;background:var(--md-sys-color-on-primary-container);color:var(--md-sys-color-primary-container)}.hero-tag svg{width:16px;height:16px}.home-actions{display:grid;gap:10px;margin-top:18px}.primary,.secondary,.danger,.quiet{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:28px;padding:13px 21px;font-size:14px;font-weight:630;line-height:1.25;letter-spacing:.1px}.primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:0 2px 5px #2110090c}.primary:hover{box-shadow:0 4px 14px #21100924}.secondary{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.secondary:hover{box-shadow:inset 0 0 0 100px #00000008}.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.quiet{color:var(--md-sys-color-primary);background:transparent}.quiet:hover{background:var(--md-sys-color-surface-container-high)}.full{width:100%}.primary svg,.secondary svg,.quiet svg,.danger svg{width:21px;height:21px}.btnlabel{flex:1;text-align:left}.btnsub{display:block;font-size:11px;opacity:.82;margin-top:3px;font-weight:450}.home-actions .primary{min-height:56px}.home-meta{text-align:center;color:var(--muted);font-size:11px;margin:10px 0 25px}.section-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.section-heading h2{font-size:20px;font-weight:680;letter-spacing:-.5px}.section-heading>span{font-size:10px;color:var(--muted)}.edition-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.edition-card{background:var(--md-sys-color-surface-container);border-radius:23px;padding:0;overflow:hidden;text-align:left;border:2px solid transparent;min-width:0}.edition-card.chosen{border-color:var(--md-sys-color-primary)}.edition-visual{height:92px;background:var(--md-sys-color-surface-container-high);position:relative;overflow:hidden}.edition-card[data-edition=tavern] .edition-visual{background:#D8B991;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 14px,#7A50270C 15px,#7A50270C 16px)}.edition-card[data-edition=classic] .edition-visual{background:#DCDACF;background-image:linear-gradient(90deg,#86977D22 1px,transparent 1px),linear-gradient(#86977D22 1px,transparent 1px);background-size:32px 32px}.mini-tile{position:relative;margin:auto;width:140px;height:92px;transform:rotate(-12deg)}.mini-tile .piece{width:39px;height:39px;left:30%;top:56%}.mini-tile .piece:nth-child(2){left:55%;top:47%}.mini-tile .piece:nth-child(3){left:79%;top:46%;width:40px;height:45px}.edition-check{position:absolute;top:7px;right:7px;border-radius:50%;width:22px;height:22px;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);display:none;place-items:center}.edition-check svg{width:15px;height:15px}.chosen .edition-check{display:grid}.edition-copy{display:block;padding:12px 12px 13px}.edition-copy strong{font-size:15px;display:block}.edition-copy small{font-size:10px;color:var(--muted);margin-top:2px}.edition-note{font-size:11px;color:var(--muted);line-height:1.5;margin:11px 2px 22px;min-height:33px}.practice-card,.resume{display:flex;align-items:center;gap:12px;text-align:left;width:100%;border-radius:22px;padding:16px;background:var(--md-sys-color-surface-container);min-height:78px}.practice-card>span:nth-child(2),.resume>span:not(.resume-icon){flex:1;min-width:0}.practice-card strong,.resume strong{display:block;font-size:14px}.practice-card small,.resume small{font-size:11px;line-height:1.5;color:var(--muted);margin-top:3px}.practice-icon,.resume-icon{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:15px;background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.practice-card>svg,.resume>svg{height:18px;width:18px}.resume{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);margin:0 0 22px;padding:14px}.resume small{color:inherit;opacity:.85}.resume-icon{background:var(--md-sys-color-surface-container-low)}.local-resume{margin-top:12px;background:var(--md-sys-color-surface-container-low)}.footer{text-align:center;margin:25px 0 0}.footer button{font-size:10px;color:var(--muted);padding:10px 0;line-height:1.6;min-height:40px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:8;display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,680px);padding:10px 12px max(10px,env(safe-area-inset-bottom));background:var(--md-sys-color-surface-container);box-shadow:0 -1px 0 #00000005;gap:4px}.bottom-nav button{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;min-height:54px;border-radius:18px;color:var(--muted);padding:0 4px}.bottom-nav button>span{display:grid;place-items:center;min-width:60px;height:30px;border-radius:20px}.bottom-nav button.active>span{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.bottom-nav button b{font-size:10px;font-weight:580}.bottom-nav button.active b{font-weight:720;color:var(--ink)}.bottom-nav svg{height:21px;width:21px}
/* Original piece geometry. Color roles never change the sides of a game. */
[data-edition=classic]{--piece-radius:22%;--piece-grain:linear-gradient(150deg,#ffffff22,transparent);--cap-clip:polygon(50% 2%,91% 26%,91% 75%,50% 98%,9% 75%,9% 26%);--board-tone:#C6C9BD;--board-tile:#E6E6D9;--board-tile-alt:#D7DCCB;--board-edge:#A6B19C;--board-line:#61755938}
[data-edition=tavern]{--piece-radius:9%;--piece-grain:repeating-linear-gradient(5deg,transparent 0,transparent 4px,#4F2C0B0C 5px,transparent 6px);--cap-clip:polygon(35% 2%,65% 2%,78% 9%,82% 23%,73% 36%,64% 42%,62% 53%,70% 57%,70% 64%,63% 68%,69% 77%,87% 81%,91% 94%,9% 94%,13% 81%,31% 77%,37% 68%,30% 64%,30% 57%,38% 53%,36% 42%,27% 36%,18% 23%,22% 9%);--board-tone:#C9A67F;--board-tile:#E0C3A0;--board-tile-alt:#DABD98;--board-edge:#B48F65;--board-line:#68452638}
.piece{display:block;position:absolute;width:62%;height:62%;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:var(--piece-radius);border:1px solid #60432055;z-index:3;box-shadow:inset 0 1px 0 #FFFFFF75,inset 0 -3px 0 #4D2C181B,0 3px 0 #826347,0 5px 6px #2F1B2230;background-color:#F6E4C4;background-image:var(--piece-grain),linear-gradient(135deg,#FFF2D9,#DBC2A0)}.piece.black{background-color:#594336;background-image:var(--piece-grain),linear-gradient(135deg,#806049,#3A2B22);border-color:#3C281D;box-shadow:inset 0 1px 0 #C6A07875,inset 0 -3px 0 #180D0744,0 3px 0 #302119,0 5px 6px #1C0C093D}.piece.wall{width:23%;height:73%;border-radius:4px;transform:translate(-50%,-50%) rotate(-10deg);box-shadow:inset 3px 0 0 #ffffff35,3px 3px 0 #9E7C52,5px 7px 6px #24100B35}.piece.wall.black{box-shadow:inset 2px 0 0 #D7B39730,3px 3px 0 #332319,5px 7px 6px #24100B40}.piece.cap{width:64%;height:76%;border:0;clip-path:var(--cap-clip);border-radius:0;background-image:linear-gradient(90deg,#80604220,transparent 45%,#FFFFFF45 53%,#6A442430),linear-gradient(135deg,#FFF2DA,#D4B995);filter:drop-shadow(0 3px 1px #4E301C66);box-shadow:inset 0 -6px 0 #A47C5444}.piece.cap.black{background-image:linear-gradient(90deg,#00000040,transparent 45%,#DAB69240 53%,#0E090838),linear-gradient(135deg,#9A7656,#3F2B1E);box-shadow:inset 0 -6px 0 #24150D99}.piece.under{z-index:1;transform:translate(-50%,calc(-50% + var(--layer)*4px));box-shadow:0 2px 0 #826347}.piece.under.black{box-shadow:0 2px 0 #302119}.piece.ghost{opacity:.75;animation:place .24s var(--ease) both}.piece-swatch{position:relative;display:inline-block;width:35px;height:39px;flex-shrink:0;vertical-align:middle}.piece-swatch .piece{width:27px;height:27px}.piece-swatch .piece.wall{width:11px;height:32px}.piece-swatch .piece.cap{width:30px;height:35px}
/* The table */
.game{max-width:520px;margin:0 auto;padding:10px 18px max(18px,env(safe-area-inset-bottom))}.gamebar{display:flex;align-items:center;gap:6px;min-height:48px;margin-bottom:10px}.gamebar .iconbtn{width:42px;height:46px;padding:10px}.gamebar-title{flex:1;min-width:0}.gamebar-title strong{display:block;font-size:18px;letter-spacing:-.3px;font-weight:720}.gamebar-title span{display:block;font-size:10px;color:var(--muted)}.connection{font-size:10px;display:flex;align-items:center;gap:5px;white-space:nowrap;padding:6px 9px;background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:20px}.connection i{height:5px;width:5px;background:currentColor;border-radius:50%}.connection.bad{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.connection-banner{font-size:12px;padding:12px 14px;background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-radius:18px;margin:10px 0;display:flex;align-items:center;gap:8px}.player{display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 13px;background:var(--md-sys-color-surface-container);border-radius:20px;box-shadow:inset 0 0 0 1.5px transparent;transition:background .2s var(--ease),box-shadow .2s var(--ease)}.player.active{background:var(--md-sys-color-secondary-container);box-shadow:inset 0 0 0 1.5px var(--md-sys-color-secondary)}.avatar{width:36px;height:36px;position:relative;flex-shrink:0}.avatar .piece{width:26px;height:26px}.player-info{flex:1;min-width:0}.player-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:670;line-height:1.3}.player-info small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.reserve{display:flex;gap:9px;align-items:center;font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.reserve-part{display:flex;align-items:center;gap:4px}.reserve-part span{color:var(--muted);font-size:15px;font-weight:400}.reserve-label{text-align:right;color:var(--muted);font-size:8px;line-height:1.3;margin-top:1px}.status{padding:16px 2px 12px;display:flex;align-items:center;gap:12px;min-height:80px}.status>div{flex:1;min-width:0}.status h2{font-size:23px;line-height:1.1;letter-spacing:-.65px;font-weight:710}.status p{font-size:11px;color:var(--muted);line-height:1.45;margin-top:6px;max-width:340px}.turn-number{text-align:center;display:flex;flex-direction:column;justify-content:center;min-width:40px;height:45px;background:var(--md-sys-color-surface-container-high);border-radius:13px;font-size:18px;line-height:1.15;font-weight:670}.turn-number small{font-size:8px;letter-spacing:.8px;font-weight:550;color:var(--muted);margin-bottom:2px}.table-surface{position:relative}.board-frame{position:relative;width:100%;margin:0 auto;padding:0 0 16px 16px}.board{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));aspect-ratio:1/1;gap:3px;border:8px solid var(--board-edge);padding:4px;background:var(--board-tone);border-radius:20px;box-shadow:0 4px 0 #4E2E1921,0 7px 18px #48261313,inset 0 1px 0 #fff5;position:relative}.square{padding:0;display:block;width:100%;aspect-ratio:1/1;border-radius:6px;position:relative;background-color:var(--board-tile);background-image:repeating-linear-gradient(0deg,transparent 0,transparent 8px,#703F1304 9px,#703F1304 10px);box-shadow:inset 0 0 0 1px var(--board-line);transition:background .18s var(--ease),box-shadow .18s var(--ease)}.square:nth-child(2n){background-color:var(--board-tile-alt)}.square:hover{box-shadow:inset 0 0 0 2px #795B3B70}.square:active{transform:none!important}.square.last:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;bottom:5px;left:5px;background:#60472C99;z-index:4}.square.selected{box-shadow:inset 0 0 0 3px #315750;background-color:#C1D4B7}.square.target:before{content:'';position:absolute;left:50%;top:50%;width:21%;height:21%;border-radius:50%;background:#31575077;transform:translate(-50%,-50%);z-index:5;box-shadow:0 0 0 4px #FFFFFF55}.square.target:has(.piece):before{width:80%;height:80%;background:transparent;border:2px solid #315750;border-radius:10px;box-shadow:none}.square.path{box-shadow:inset 0 0 0 3px #315750;background-color:#CADCBF}.square.road{background-color:#ABC89A;box-shadow:inset 0 0 0 2px #456D3E;z-index:1}.square.road:after{background:#335B30}.square.road .piece{filter:drop-shadow(0 0 4px #EFFFE0)}.stack-badge{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:8px;background:#2D241D;color:#FFF2DD;font-size:10px;font-weight:750;line-height:1;z-index:6;border:1px solid #FFF2DD}.coords{display:flex;position:absolute;user-select:none;pointer-events:none;font-size:9px;color:var(--muted);font-weight:540}.coords span{flex:1;text-align:center}.coords.x{left:27px;right:11px;bottom:0;height:13px}.coords.y{top:11px;bottom:27px;left:0;width:12px;flex-direction:column}.coords.y span{display:grid;place-items:center}.board-caption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:9px;line-height:1.45;color:var(--muted);min-height:26px;padding:2px 0 9px}.board-caption>span{display:inline-flex;align-items:center;gap:4px;font-weight:660}.score-dot{width:8px;height:8px;border:1px solid #806046;display:inline-block;border-radius:3px;margin-left:4px}.score-dot.light{background:#F4E2C2}.score-dot.dark{background:#574130}.controls-area{padding-top:12px}.piece-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--md-sys-color-surface-container);border-radius:24px;padding:4px}.pick{display:flex;align-items:center;justify-content:center;gap:5px;min-height:66px;padding:8px 5px;border-radius:20px;text-align:left;border:1px solid transparent}.pick.chosen{background:var(--md-sys-color-secondary-container);border-color:var(--md-sys-color-secondary)}.pick b{display:block;font-size:11px;line-height:1.3}.pick small{display:block;font-size:8px;line-height:1.4;margin-top:3px;color:var(--muted)}.pick .piece-swatch{width:27px}.pick .piece-swatch .piece.flat{width:22px;height:22px}.pick .piece-swatch .piece.cap{width:25px;height:29px}.pick .piece-swatch .piece.wall{width:9px;height:27px}.hintline{color:var(--muted);font-size:10px;text-align:center;line-height:1.5;margin:10px 0 5px;min-height:16px}.game-tools{display:flex;align-items:center;justify-content:space-around;gap:4px;padding:3px 0}.game-tools button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px;border-radius:22px;color:var(--md-sys-color-primary);font-size:10px;font-weight:580}.game-tools button:hover{background:var(--md-sys-color-surface-container-high)}.game-tools svg{width:17px;height:17px}.action-panel{border-radius:23px;background:var(--md-sys-color-surface-container-high);padding:16px;animation:appear .2s var(--ease)}.action-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}.action-head>div{min-width:0}.action-head strong{font-size:14px;font-weight:670;line-height:1.35}.action-head p{font-size:10px;color:var(--muted);line-height:1.5;margin-top:4px}.preview-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:50%}.preview-mark svg{width:20px;height:20px}.confirm-row{display:grid;grid-template-columns:.8fr 1.5fr;gap:8px}.confirm-row button{font-size:12px;min-height:48px;padding:12px}.small-btn{font-size:10px;min-height:40px;border-radius:22px;background:var(--md-sys-color-surface-container-lowest);padding:10px 13px;color:var(--md-sys-color-primary);flex-shrink:0}.count-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0 14px}.count-row>span{font-size:10px;color:var(--muted);margin-right:auto}.count-btn{height:40px;min-width:36px;border:1px solid var(--line);border-radius:13px;background:var(--md-sys-color-surface-container-lowest);font-size:13px;font-weight:600}.count-btn.chosen,.split-btn.chosen{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-color:var(--md-sys-color-primary)}.split-label{font-size:11px;color:var(--muted);line-height:1.5;margin:10px 0}.split-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.split-btn{padding:10px 13px;min-height:40px;border:1px solid var(--line);border-radius:15px;background:var(--md-sys-color-surface-container-lowest);font-size:12px}.game.has-pending .piece-picker{display:none}.result-panel{padding:20px 20px 18px;text-align:center;background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:28px;animation:appear .35s var(--ease)}.result-icon{font-size:33px;line-height:1;margin-bottom:10px}.result-panel h2{font-size:24px;font-weight:720;letter-spacing:-.7px;line-height:1.15}.result-panel p{font-size:11px;line-height:1.6;margin-top:9px}.result-panel .primary{margin-top:16px}.invite-panel{position:relative;z-index:2;border-radius:28px;padding:23px 22px;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);text-align:center;margin:0 0 18px}.invite-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;margin:0 auto 10px;background:var(--md-sys-color-surface-container-low)}.invite-panel p{font-size:11px;line-height:1.6}.room-code{font-size:36px;font-weight:750;letter-spacing:5px;font-variant-numeric:tabular-nums;line-height:1.4;color:var(--md-sys-color-on-secondary-container);margin:13px 0 18px}.invite-panel .primary{width:100%;min-height:50px}.invite-panel .waiting-label{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:15px}.waiting-dots{display:inline-flex;gap:3px;align-items:center}.waiting-dots i{height:4px;width:4px;border-radius:50%;background:currentColor;animation:pulse 1.3s ease infinite}.waiting-dots i:nth-child(2){animation-delay:.2s}.waiting-dots i:nth-child(3){animation-delay:.4s}.waiting-room .table-surface{max-width:190px;margin:0 auto 8px;opacity:.8}.waiting-room .board-caption{display:none}.waiting-room .controls-area{display:none}
/* Bottom sheets and settings */
.modal-root{position:fixed;inset:0;z-index:12;display:flex;align-items:flex-end;justify-content:center;background:#170D0B66;padding:18px 0 0;backdrop-filter:blur(3px)}.modal-root[hidden]{display:none}.sheet{background:var(--md-sys-color-surface-container-low);color:var(--ink);border-radius:30px 30px 0 0;padding:10px 24px max(26px,env(safe-area-inset-bottom));width:min(100%,520px);max-height:94dvh;overflow:auto;overscroll-behavior:contain;box-shadow:0 -10px 50px #1E110B1F;animation:slideup .3s var(--ease)}.sheet-handle{width:32px;height:4px;border-radius:3px;background:var(--md-sys-color-outline-variant);margin:0 auto 13px}.sheet-header{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;margin-bottom:23px}.sheet-header>div{flex:1;min-width:0}.sheet-header h2{font-size:25px;font-weight:690;letter-spacing:-.7px;line-height:1.15;padding-top:7px}.sheet-header p{font-size:12px;color:var(--muted);line-height:1.6;margin-top:8px}.sheet-header .iconbtn{width:40px;height:40px;padding:10px;margin-right:-9px}.field{display:block;margin:18px 0}.field>span{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:0 0 9px 2px}.field input{display:block;width:100%;min-height:56px;border:1px solid var(--md-sys-color-outline);border-radius:15px;background:transparent;color:var(--ink);padding:14px 16px;outline-offset:0;font-size:16px;transition:border .2s}.field input::placeholder{color:var(--muted);opacity:.8}.field input:focus{outline:2px solid var(--md-sys-color-primary);border-color:transparent}.field .code-input{text-transform:uppercase;letter-spacing:6px;font-size:25px;font-weight:650;text-align:center}.field-help{font-size:10px;color:var(--muted);display:block;line-height:1.55;margin:9px 2px 0}.segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;background:var(--md-sys-color-surface-container-high);border-radius:20px}.segment.two{grid-template-columns:1fr 1fr}.segment button{min-height:56px;border-radius:17px;padding:10px 7px;font-size:14px;line-height:1.3;border:1px solid transparent;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}.segment button small{width:100%;font-size:10px;font-weight:470;color:var(--muted)}.segment button svg{width:19px;height:19px}.segment .chosen{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-secondary)}.appearance-segment button{font-size:10px;gap:5px;flex-direction:column;min-height:67px}.appearance-segment button svg{width:23px;height:23px}.palette-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette-options button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px;border:1px solid var(--line);border-radius:18px;font-size:11px;line-height:1.3;padding:10px 8px;background:var(--md-sys-color-surface-container)}.palette-options button.chosen{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary)}.palette-options svg{width:19px;height:19px}.settings-group{border-radius:22px;overflow:hidden;background:var(--md-sys-color-surface-container);margin:22px 0}.setting-row{display:flex;gap:12px;align-items:center;width:100%;min-height:74px;padding:15px 14px;text-align:left}.setting-row+.setting-row{border-top:1px solid var(--md-sys-color-outline-variant)}.setting-row>svg{width:22px;height:22px;color:var(--muted)}.setting-row>span{flex:1;min-width:0}.setting-row strong{font-size:12px;line-height:1.3;display:block}.setting-row small{font-size:10px;color:var(--muted);line-height:1.4;margin-top:4px}.switch{display:block;position:relative;width:43px;height:27px;border:2px solid var(--md-sys-color-outline);border-radius:20px;background:var(--md-sys-color-surface-container-highest);flex-shrink:0}.switch:before{content:'';position:absolute;left:4px;top:4px;width:15px;height:15px;background:var(--md-sys-color-outline);border-radius:50%;transition:transform .2s var(--ease),background .2s var(--ease)}.switch.on{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary)}.switch.on:before{background:var(--md-sys-color-on-primary);width:19px;height:19px;top:2px;left:2px;transform:translateX(16px)}.server-details{margin:20px 0 23px}.server-details summary{font-size:12px;min-height:40px;padding:9px 0;color:var(--muted);cursor:pointer}.note{font-size:11px;color:var(--muted);line-height:1.65;margin:14px 0}.form-error{color:var(--md-sys-color-on-error-container);background:var(--md-sys-color-error-container);padding:12px 14px;border-radius:14px;font-size:12px;line-height:1.5;margin:12px 0}.form-error[hidden]{display:none}#game-form>.primary,#settings-form>.primary{margin-top:20px}.rules-demo{display:flex;justify-content:space-around;align-items:center;background:var(--md-sys-color-surface-container-high);border-radius:23px;padding:20px 10px;margin-bottom:24px}.rules-demo>div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:600}.rules-demo .piece-swatch{height:46px;width:44px}.rules-demo .piece-swatch .piece{height:34px;width:34px}.rules-demo .piece-swatch .piece.wall{width:13px;height:41px}.rules-demo .piece-swatch .piece.cap{width:37px;height:44px}.rule{margin:0 0 20px}.rule h3{font-size:15px;font-weight:650;margin-bottom:5px;line-height:1.3}.rule p{font-size:12px;color:var(--muted);line-height:1.7}.rules-table{width:100%;border-collapse:collapse;font-size:11px;text-align:left;background:var(--md-sys-color-surface-container);border-radius:15px;overflow:hidden;margin:20px 0}.rules-table th,.rules-table td{padding:12px 10px;border-bottom:1px solid var(--line)}.rules-table th{font-size:10px;color:var(--muted);font-weight:600}.rules-table tr:last-child td{border-bottom:0}.rules-title{font-weight:650;font-size:17px;margin-top:25px}.stack-inspect{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0;padding:14px 10px;background:var(--md-sys-color-surface-container-high);border-radius:20px}.stack-inspect .piece-swatch{width:40px;height:59px}.stack-inspect .piece-swatch .piece{top:36%;width:29px;height:29px}.stack-inspect .piece-swatch .piece.cap{height:35px;width:31px}.stack-inspect .piece-swatch .piece.wall{width:11px;height:34px}.stack-inspect small{position:absolute;bottom:0;left:0;right:0;font-size:9px;text-align:center;color:var(--muted)}.menu-list{display:grid;gap:9px}.menu-list .secondary,.menu-list .danger,.menu-list .quiet{justify-content:flex-start;border-radius:19px;min-height:54px;font-size:13px;padding:15px 18px}.menu-list .primary{width:100%}.history{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--md-sys-color-surface-container);border-radius:20px;padding:14px}.history>span{font-variant-numeric:tabular-nums;font-size:13px;padding:7px}.history small{color:var(--muted);font-size:10px;margin-right:6px}.about p{font-size:12px;line-height:1.75;color:var(--muted);margin-bottom:17px}.about strong{color:var(--ink)}
/* Secondary destinations */
.page-heading{padding:19px 2px 27px}.page-heading .eyebrow{color:var(--md-sys-color-primary);font-size:10px}.page-heading h1{font-size:40px;line-height:1.1;letter-spacing:-1.5px;font-weight:700;margin:15px 0 12px}.page-heading p{color:var(--muted);font-size:13px;line-height:1.65;max-width:440px}.saved-rooms{display:grid;gap:12px}.room-card{padding:18px 15px;border-radius:23px;background:var(--md-sys-color-surface-container);display:flex;align-items:center;gap:13px;text-align:left;min-height:109px}.room-card>span:nth-child(2){flex:1;min-width:0}.room-card-icon{width:45px;height:45px;border-radius:16px;display:grid;place-items:center;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);flex-shrink:0}.room-card strong{display:block;font-size:18px;letter-spacing:.4px}.room-card strong small{color:var(--muted);font-size:10px;letter-spacing:0;font-weight:450;margin-top:3px}.room-card>svg{width:18px;height:18px}.room-players{display:block;font-size:12px;margin:7px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-state{display:inline-block!important;padding:4px 9px;border-radius:14px;background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);font-size:9px}.empty-state{padding:32px 20px;background:var(--md-sys-color-surface-container);border-radius:30px;text-align:center}.empty-state>svg{width:48px;height:48px;color:var(--md-sys-color-primary);margin:12px 0 20px}.empty-state h2{font-size:23px;font-weight:650;letter-spacing:-.6px;line-height:1.2}.empty-state p{font-size:12px;color:var(--muted);line-height:1.65;margin:12px 0 25px}.empty-state .primary{margin:auto}.learn-pieces{display:grid;gap:10px}.learn-pieces article{display:flex;align-items:center;gap:18px;padding:19px;background:var(--md-sys-color-surface-container);border-radius:23px}.learn-pieces .piece-swatch{width:57px;height:57px}.learn-pieces .piece-swatch .piece{height:43px;width:43px}.learn-pieces .piece-swatch .piece.wall{width:17px;height:51px}.learn-pieces .piece-swatch .piece.cap{height:54px;width:48px}.learn-pieces h2,.learn-tip h2{font-size:17px;letter-spacing:-.3px;font-weight:660;margin-bottom:4px}.learn-pieces p,.learn-tip p{font-size:12px;color:var(--muted);line-height:1.6}.learn-tip{display:flex;align-items:flex-start;gap:14px;background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:24px;padding:21px 18px;margin-top:22px}.learn-tip p{color:inherit;opacity:.9}.learn-tip>span{padding-top:3px}.learn-page>.note{padding:0 3px}.boot{display:flex;min-height:85dvh;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted)}.boot-mark{font-size:48px;letter-spacing:6px;font-weight:750;color:var(--md-sys-color-primary)}.boot p{font-size:13px}#toast{position:fixed;bottom:max(90px,calc(20px + env(safe-area-inset-bottom)));left:50%;transform:translate(-50%,20px);background:var(--md-sys-color-on-surface);color:var(--md-sys-color-surface);padding:14px 19px;border-radius:20px;box-shadow:var(--shadow);font-size:12px;z-index:20;max-width:calc(100% - 32px);width:max-content;pointer-events:none;opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);line-height:1.5}#toast.show{opacity:1;transform:translate(-50%,0)}.spinning{animation:spin 1.1s linear infinite}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes slideup{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}@keyframes place{from{opacity:.25;transform:translate(-50%,-65%) scale(.8)}to{opacity:.75;transform:translate(-50%,-50%) scale(1)}}@keyframes pulse{50%{opacity:.2}}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:650px){.page{padding:26px 34px 118px}.hero{min-height:295px;padding:30px 32px}.hero h1{font-size:51px;margin-top:20px}.hero p{font-size:15px;max-width:300px}.hero-board-wrap{right:-55px;bottom:-26px;width:240px;height:225px}.hero-board{width:220px;right:0;bottom:0}.hero-tag{bottom:26px;left:32px}.hero-token{left:0;bottom:36px}.home-actions{grid-template-columns:1.15fr 1fr}.hero .eyebrow{font-size:11px}.home-meta{margin-bottom:32px}.edition-visual{height:125px}.mini-tile{height:125px;transform:rotate(-12deg) scale(1.23)}.edition-copy{padding:15px 17px}.edition-copy strong{font-size:18px}.edition-copy small{font-size:12px}.section-heading h2{font-size:24px}.section-heading>span{font-size:12px}.edition-note{font-size:12px}.bottom-nav{bottom:14px;border-radius:28px;width:calc(min(100%,680px) - 48px);padding:10px 16px;box-shadow:0 6px 30px #26170D17;border:1px solid var(--md-sys-color-outline-variant)}.modal-root{align-items:center;padding:24px}.sheet{border-radius:30px;max-height:90dvh;padding-bottom:28px}.sheet-handle{display:none}.sheet-header{margin-top:10px}.game{padding-top:22px}.gamebar{margin-bottom:18px}.status{padding-top:20px;padding-bottom:18px}.player{min-height:69px}.status h2{font-size:27px}.status p{font-size:12px}.pick b{font-size:13px}.pick small{font-size:10px}.pick{min-height:78px}.game-tools button{font-size:12px}.hintline{font-size:12px;margin:15px 0 10px}.room-card{padding:21px}.learn-pieces article{padding:25px}.learn-pieces h2,.learn-tip h2{font-size:19px}.learn-pieces p,.learn-tip p{font-size:13px}}
@media(min-width:1000px){.game{max-width:950px;padding:28px 32px}.gamebar{max-width:none}.game-layout{display:grid;grid-template-columns:480px 1fr;gap:34px;align-items:start}.controls-area{padding-top:146px}.game.waiting-room .game-layout{display:block;max-width:480px;margin:auto}.game .piece-picker{grid-template-columns:1fr;padding:6px;border-radius:25px}.game .pick{justify-content:flex-start;gap:16px;padding:15px 20px;min-height:72px}.game .pick .piece-swatch{width:35px}.game .pick small{font-size:11px}.game .pick b{font-size:14px}.game .hintline{padding:8px;line-height:1.65}.game .game-tools{flex-wrap:wrap}.game .game-tools button{font-size:11px}.game.has-pending .controls-area{padding-top:148px}}
@media(max-width:370px){.page{padding:12px 18px 102px}.brandbar{margin-bottom:14px}.hero{min-height:310px;padding:23px 21px 0;border-radius:29px}.hero h1{font-size:38px}.hero .eyebrow{font-size:10px}.hero p{font-size:12px;max-width:280px}.hero-board-wrap{right:-9px;bottom:-29px;width:180px}.hero-board{width:177px}.hero-tag{left:21px;bottom:21px}.hero-token{left:-18px;bottom:35px}.home-actions{margin-top:14px;gap:8px}.home-meta{font-size:10px;margin-bottom:20px}.edition-grid{gap:10px}.edition-copy{padding:10px}.edition-copy small{font-size:9px}.section-heading h2{font-size:19px}.section-heading>span{font-size:9px}.practice-card{padding:14px 12px;gap:10px}.practice-card small{font-size:10px}.game{padding:8px 12px 18px}.gamebar{gap:3px;margin-bottom:8px}.gamebar-title strong{font-size:17px}.gamebar .iconbtn{width:39px}.player{min-height:56px;padding:8px 11px;border-radius:18px}.status{min-height:75px;padding:14px 1px 11px}.status h2{font-size:22px}.status p{font-size:10px}.board{border-width:7px;padding:3px;gap:2px;border-radius:18px}.board-frame{padding:0 0 15px 14px}.coords.x{left:24px;right:10px}.coords.y{top:10px;bottom:25px}.piece-picker{border-radius:22px}.pick{min-height:60px;gap:3px;padding:7px 3px;border-radius:18px}.pick .piece-swatch{width:24px}.pick b{font-size:10px}.pick small{font-size:7px}.controls-area{padding-top:10px}.hintline{font-size:9px}.board-caption{font-size:8px;min-height:24px}.action-panel{padding:14px}.action-head strong{font-size:13px}.count-btn{min-width:32px}.count-row{gap:4px}.sheet{padding-left:20px;padding-right:20px}.sheet-header h2{font-size:24px}.setting-row{gap:10px;padding:14px 11px}.setting-row strong{font-size:11px}.setting-row small{font-size:9px}.appearance-segment button{font-size:9px}.room-code{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}