html:has(.table-page){height:100%;overflow:hidden;overscroll-behavior:none}body.table-page{height:100dvh;min-height:0;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}.table-page .shell{height:100%;max-width:1500px;padding:0 clamp(12px,3.5vw,48px)}.table-page .play-header{height:68px;min-height:68px}.table-page .world-motion{opacity:.09}.table-page .table-layout{--board-size:min(calc(100vw - clamp(24px,7vw,96px) - 330px),calc(100dvh - 158px),800px);display:grid;grid-template-columns:var(--board-size) 260px;align-items:center;justify-content:center;gap:clamp(26px,4vw,64px);height:calc(100% - 68px);padding:8px 0 22px}.table-stage{min-width:0;width:var(--board-size);justify-self:center}.table-surface{padding:14px;border-radius:16px;background:linear-gradient(145deg,#353535,#242424);box-shadow:inset 0 1px #ffffff15,inset 0 -1px 2px #00000099,0 18px 60px #00000044}.table-board{position:relative;aspect-ratio:1;isolation:isolate;border-radius:7px;background:#2d2d2d url('../art/card-grain.svg');box-shadow:inset 0 1px 4px #00000055;touch-action:manipulation}.table-cell{padding:0;margin:0;border:0;background:transparent;position:relative;min-width:0;touch-action:manipulation;cursor:default;display:grid;place-items:center;isolation:isolate;outline:none}.table-cell[aria-disabled=false]{cursor:pointer}.table-cell:focus-visible{outline:1px solid #dddddd;outline-offset:-2px;z-index:25}.table-players{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 8px;color:#a7a7a7;font-size:12px}.table-player{display:flex;align-items:center;gap:8px;min-width:0;max-width:48%}.table-player>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.table-player::after{content:'';width:4px;height:4px;flex:none;border-radius:50%;background:#d3d3d3;opacity:0}.table-player[data-turn=true]{color:#dddddd}.table-player[data-turn=true]::after{opacity:1}.table-player-token{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#bbbbbb;background:#292929;box-shadow:inset 0 1px #ffffff12;flex:none}.table-sidebar{height:100%;max-height:calc(var(--board-size) + 44px);display:flex;flex-direction:column;min-height:0}.table-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px}.table-heading h1{font:400 clamp(26px,2.5vw,36px)/1.15 var(--sans);letter-spacing:-.05em;margin:0}.table-page button{touch-action:manipulation;font-family:inherit}.table-help{border:0;background:transparent;color:#aaaaaa;width:40px;height:40px;border-radius:10px;font-size:18px}.table-modes{display:flex;gap:4px;padding:4px;border-radius:12px;background:#1e1e1e;box-shadow:inset 0 1px 4px #00000033}.table-modes button{border:0;background:transparent;flex:1;min-height:40px;min-width:0;color:#999999;border-radius:8px;font-size:12px;padding:6px}.table-modes [aria-pressed=true]{background:linear-gradient(145deg,#3a3a3a,#2e2e2e);color:#e0e0e0;box-shadow:inset 0 1px #ffffff0c,0 2px 6px #00000033}.table-status{margin:28px 0 0;font-size:20px;font-weight:400;letter-spacing:-.035em;min-height:26px}.table-hint{font-size:12px;line-height:1.7;color:#999999;margin:10px 0 22px;min-height:20px}.table-move-count{display:flex;align-items:baseline;gap:8px;color:#999999;font-size:12px;margin:auto 0 30px}.table-move-count strong{font-size:56px;line-height:1;font-weight:300;letter-spacing:-.06em;color:#c7c7c7;font-variant-numeric:tabular-nums}.table-actions{display:flex;gap:8px}.table-actions button{border:0;min-height:52px;border-radius:11px;flex:1;color:#c5c5c5;background:linear-gradient(150deg,#333333,#282828);box-shadow:inset 0 1px #ffffff0b,0 3px 8px #00000033;font-size:12px}.table-actions button:disabled{opacity:.3}.table-actions button:active:not(:disabled){transform:translateY(1px)}.table-page [hidden]{display:none!important}.table-result-symbol{font:300 88px/1.2 var(--sans);text-align:center;margin:10px 0 24px;color:#cfcfcf}.table-dialog-center{text-align:center}.table-page .table-room-state{display:flex;align-items:center;gap:8px;min-height:32px;color:#aaaaaa;font-size:12px;margin-top:10px}.table-room-state button{border:0;border-radius:8px;padding:8px 12px;background:#333333;color:#dddddd;font-size:12px}.table-surface.is-new{animation:table-in .5s cubic-bezier(.2,.8,.2,1)}@keyframes table-in{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Recessed intersections, ceramic stones. */
.gomoku-board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);background-color:#3b3b3b}.gomoku-lines{position:absolute;inset:calc(100% / 30);background-image:linear-gradient(to right,#19191988 1px,transparent 1px),linear-gradient(to bottom,#19191988 1px,transparent 1px);background-size:calc(100% / 14) calc(100% / 14);box-shadow:inset -1px -1px #19191988;pointer-events:none}.gomoku-star{position:absolute;width:4px;height:4px;border-radius:50%;background:#191919c0;transform:translate(-50%,-50%);pointer-events:none}.go-stone{width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 23%,#5b5b5b,#303030 55%,#202020 95%);box-shadow:0 2px 3px #00000088,inset 0 1px 1px #ffffff28,inset 0 -1px 1px #00000088;pointer-events:none}.side-1 .go-stone{background:radial-gradient(circle at 34% 23%,#e6e6e6,#c6c6c6 60%,#a2a2a2);box-shadow:0 2px 3px #00000077,inset 0 1px 1px #ffffff88,inset 0 -1px 1px #77777755}.gomoku-cell.last .go-stone::after{content:'';position:absolute;width:12%;aspect-ratio:1;background:#bbbbbb;border-radius:50%;top:44%;left:44%}.gomoku-cell.side-1.last .go-stone::after{background:#666666}.gomoku-cell.winning .go-stone{outline:1px solid #eeeeee;outline-offset:2px}
/* A graphite board with engraved river, ring-cut pieces. */
.xiangqi-board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(10,1fr);background-color:#414141}.xiang-grid{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#1c1c1ca6;stroke-width:.13;pointer-events:none}.xiang-grid .xiang-marks{stroke-width:.1}.xiang-grid text{stroke:none;fill:#aaaaaa99;font:2.5px sans-serif;letter-spacing:1px}.xiang-piece{display:grid;place-items:center;width:78%;height:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#d8d8d8,#bababa 65%,#919191);box-shadow:inset 0 1px 1px #ffffffa6,inset 0 -2px 1px #707070,0 3px 3px #00000088;position:relative;color:#353535;pointer-events:none}.xiang-piece::before{content:'';position:absolute;inset:9%;border-radius:50%;box-shadow:inset 0 0 0 1px #40404077,0 1px #ffffff44}.xiang-piece>span{font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-size:clamp(18px,calc(var(--board-size) / 22),34px);font-weight:500;line-height:1;transform:translateY(-1%)}.xiang-cell.side-1 .xiang-piece{background:radial-gradient(ellipse at 35% 20%,#4c4c4c,#2b2b2b 70%,#232323);color:#b5b5b5;box-shadow:inset 0 1px 1px #ffffff3c,inset 0 -2px 1px #121212,0 3px 3px #00000077}.xiang-cell.side-1 .xiang-piece::before{box-shadow:inset 0 0 0 1px #a9a9a955,0 1px #00000044}.xiang-cell.selected .xiang-piece{outline:1px solid #e2e2e2;outline-offset:3px;z-index:12}.xiang-cell.legal::after{content:'';position:absolute;inset:41%;border-radius:50%;background:#c3c3c3;pointer-events:none}.xiang-cell.legal.occupied::after{inset:8%;border:1px solid #dfdfdf;background:transparent}.xiang-cell.last:not(.occupied)::before{content:'';position:absolute;inset:38%;border:1px solid #c3c3c377;border-radius:50%;pointer-events:none}.xiangqi-page .table-layout{--board-size:min(calc(100vw - clamp(24px,7vw,96px) - 330px),calc((100dvh - 158px)*.9),740px)}.xiangqi-board{aspect-ratio:9/10}
/* Symbol-coded routes keep the table monochrome. */
.flight-map{position:absolute;inset:0;pointer-events:none}.flight-map>svg{width:100%;height:100%}.flight-track{fill:#383838;stroke:#181818;stroke-width:.25}.flight-lane{fill:#454545;stroke:#222222;stroke-width:.25}.flight-symbol{font:3.7px sans-serif;fill:#999999;opacity:.7}.hangar-symbol{font:12px sans-serif;fill:#ffffff0e}.flight-center{fill:#b0b0b0;stroke:#eeeeee;stroke-width:.2}.flight-route{fill:none;stroke:#aaaaaa44;stroke-width:.5;stroke-dasharray:1.5 2}.flight-board{background-color:#262626}.flight-plane{position:absolute;width:6.2%;height:6.2%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(140deg,#d2d2d2,#aaaaaa);color:#3a3a3a;box-shadow:0 2px 3px #00000088,inset 0 1px #ffffff77;z-index:4}.flight-plane svg{width:81%;height:81%;filter:drop-shadow(0 1px #ffffff44);pointer-events:none}.flight-plane.plane-1{background:linear-gradient(140deg,#626262,#404040);color:#d6d6d6}.flight-plane.plane-2{background:linear-gradient(140deg,#929292,#676767);color:#e5e5e5}.flight-plane.plane-3{background:linear-gradient(140deg,#353535,#202020);color:#bbbbbb}.flight-plane.legal{outline:1px solid #e3e3e3;outline-offset:2px}.plane-number{position:absolute;bottom:-3px;right:-3px;font:8px/12px var(--sans);width:12px;height:12px;color:#cccccc;background:#202020;border-radius:50%;pointer-events:none}.flight-plane.landed{opacity:.55}.flight-dice-area{display:flex;align-items:center;gap:18px;margin:22px 0}.flight-dice{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14px;gap:6px;width:82px;height:82px;flex:none;border:0;border-radius:18px;background:linear-gradient(145deg,#dcdcdc,#a8a8a8);box-shadow:inset 0 1px #ffffff99,inset 0 -3px #77777755,0 7px 12px #00000055;cursor:pointer;transform:rotate(-4deg)}.flight-dice i{display:block;aspect-ratio:1;border-radius:50%;background:#444444;box-shadow:inset 0 1px 2px #00000066;pointer-events:none}.flight-dice i.off{visibility:hidden}.flight-dice:disabled{cursor:default}.flight-dice-label{font-size:13px;color:#bbbbbb}.flight-dice.rolling{animation:dice-roll .36s cubic-bezier(.2,.8,.2,1)}@keyframes dice-roll{0%{transform:rotate(-4deg)}35%{transform:rotate(15deg) translateY(-6px)}75%{transform:rotate(-9deg)}100%{transform:rotate(-4deg)}}
@media(max-width:1000px) and (orientation:portrait){.table-page .shell{padding:0 max(12px,env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-right))}.table-page .play-header{height:calc(52px + env(safe-area-inset-top));min-height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}.table-page .table-layout{--board-size:min(calc(100vw - 24px),calc(100dvh - 260px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));height:calc(100% - 52px - env(safe-area-inset-top));grid-template-columns:minmax(0,1fr);grid-template-rows:44px auto 34px 48px;gap:4px;align-content:center;padding:4px 0 max(12px,env(safe-area-inset-bottom))}.table-sidebar{display:contents}.table-heading,.table-hint,.table-move-count{display:none}.table-modes{grid-row:1;justify-self:center;width:min(100%,420px);padding:3px}.table-modes button{min-height:38px}.table-stage{grid-row:2}.table-surface{padding:8px;border-radius:11px}.table-players{min-height:36px;font-size:11px;padding:4px}.table-player-token{width:23px;height:23px}.table-status{grid-row:3;grid-column:1;font-size:14px;margin:0;min-height:0;padding-left:4px;align-self:center;justify-self:center}.table-actions{grid-row:4;justify-self:center;width:min(100%,420px)}.table-actions button{min-height:46px}.table-room-state{grid-row:3;grid-column:1;justify-self:end;margin:0!important}.table-room-state:not(:empty)~.table-status{max-width:60%}.xiangqi-page .table-layout{--board-size:min(calc(100vw - 24px),calc((100dvh - 260px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.9))}.xiang-piece>span{font-size:calc(var(--board-size) / 22)}.flight-page .table-layout{--board-size:min(calc(100vw - 24px),calc(100dvh - 305px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));grid-template-rows:44px auto 66px 46px}.flight-page .table-status{display:none}.flight-dice-area{grid-row:3;grid-column:1;justify-self:center;margin:0;gap:18px}.flight-dice{width:55px;height:55px;border-radius:12px;padding:9px;gap:4px}.flight-page .table-players{flex-wrap:wrap;row-gap:6px;padding:8px 4px}.flight-page .table-player{width:46%}.flight-map{inset:0}.flight-plane{width:7%;height:7%}.flight-dice-label{font-size:12px}}
@media(max-height:500px) and (orientation:landscape){.table-page .shell{padding:0 20px}.table-page .play-header{height:46px;min-height:46px}.table-page .table-layout{--board-size:min(calc(100dvh - 112px),calc(100vw - 310px));height:calc(100% - 46px);grid-template-columns:var(--board-size) 230px;gap:24px;padding:3px 0 12px}.xiangqi-page .table-layout{--board-size:calc((100dvh - 112px)*.9)}.table-heading{display:none}.table-status{margin-top:18px;font-size:16px}.table-hint{margin:8px 0;font-size:11px}.table-move-count{margin:auto 0 12px}.table-move-count strong{font-size:32px}.table-actions button{min-height:42px}.table-surface{padding:6px}.flight-dice-area{margin:16px 0}.flight-dice{width:60px;height:60px;padding:10px;gap:4px}.table-players{min-height:34px}.table-modes button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.table-surface.is-new,.flight-dice.rolling{animation:none}}@media(hover:hover){.gomoku-cell[aria-disabled=false]:hover::before{content:'';width:60%;height:60%;border-radius:50%;background:#ffffff19}.table-help:hover{background:#ffffff08}.table-actions button:hover:not(:disabled){filter:brightness(1.08)}}

.table-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.board-avatar svg{width:100%;height:100%}
.table-actions #table-records{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:46px;border-radius:11px;background:linear-gradient(150deg,#333,#282828);box-shadow:inset 0 1px #ffffff0b;color:#c5c5c5;font-size:11px;text-align:center}
.table-page[data-finished=true] #table-new{background:linear-gradient(145deg,#d2d2d2,#aaa);color:#242424}
.table-page[data-finished=true] #table-undo{display:none}
.table-page[data-finished=true] .turn-cue-token{background:#c8c8c8;color:#222}