:root{--ink:#193e3b;--muted:#647b77;--paper:#f7f5ee;--green:#176b58;--accent:#efac4c;--line:#dce3d9;--p0:#1b796c;--p1:#ce674e;--p2:#d39f22;--p3:#7d63b4;--face:0deg}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;-webkit-tap-highlight-color:transparent}button,select,input{font:inherit}button,a{touch-action:manipulation}button{min-height:44px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);padding:9px 14px;font-weight:700;cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:var(--green);font-weight:650}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.primary{background:var(--green);color:white;border-color:var(--green)}.wide{width:100%;margin-top:12px}.text-button{border:0;background:transparent;color:var(--green)}[hidden]{display:none!important}#home{max-width:1160px;margin:auto;padding:28px}.home-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:26px;font-weight:850;color:var(--ink)}.brand small{display:block;font-size:9px;letter-spacing:2px}.brand-icon{display:grid;place-items:center;width:52px;height:52px;background:var(--green);color:#fff;border-radius:17px;font-size:36px}.home-header>a:last-child{font-size:13px}.hero{padding:54px 0 35px;position:relative;background:radial-gradient(ellipse at 88% 30%,#eee4cb 0,transparent 53%)}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--muted)}.hero h1{font-size:clamp(44px,7vw,78px);line-height:1.04;letter-spacing:-3px;margin:17px 0 22px;font-weight:850}.hero p{color:var(--muted);font-size:16px;line-height:1.7}.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-tags span{border:1px solid #d7dfd3;background:#fff9;padding:7px 12px;border-radius:30px;font-size:12px}.game-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.game-card{text-align:left;padding:0;overflow:hidden;border:1px solid #dce2d6;border-radius:22px;background:#fff;box-shadow:0 8px 30px #183a2c06;transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #183a2c14}.card-art{height:140px;background:#e8eee4;display:grid;place-items:center}.card-art svg{width:130px;height:110px}.game-card:nth-child(3n+2) .card-art{background:#f4e4d4}.game-card:nth-child(3n) .card-art{background:#e5e7f0}.card-copy{padding:19px 21px 23px}.card-copy h2{margin:0 0 6px;font-size:21px}.card-copy p{margin:0;color:var(--muted);font-size:13px;font-weight:400;min-height:39px}.card-copy small{display:block;margin-top:18px;color:var(--green);font-size:12px}.home-header,footer{gap:16px}footer{display:flex;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--line);padding:26px 0;margin-top:34px;font-size:12px}dialog{border:0;border-radius:23px;padding:27px;width:min(520px,94vw);max-height:90svh;overflow:auto;color:var(--ink);background:#fffdf8;box-shadow:0 20px 80px #17393445}dialog::backdrop{background:#10382e99;backdrop-filter:blur(5px)}dialog.from-top{transform:rotate(180deg)}dialog h2{font-size:28px;line-height:1.15;margin:10px 22px 18px 0;letter-spacing:-.6px}dialog p,dialog li{font-size:14px;color:var(--muted)}dialog h3{font-size:16px;margin:18px 0 8px}dialog ul{padding-left:20px}.close{position:absolute;right:10px;top:10px;font-size:24px;border:0;background:transparent;padding:0;width:36px;min-height:36px}label{display:block;font-size:13px;font-weight:650}select,input[type=text]{display:block;width:100%;min-height:44px;border:1px solid #d3dfd5;border-radius:10px;background:white;padding:9px;margin:6px 0 12px;color:var(--ink)}.check{display:flex;gap:8px;align-items:center;margin:14px 0}input[type=checkbox]{width:21px;height:21px;accent-color:var(--green)}#nameFields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}#play{height:100svh;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:hidden}.play-header{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,900px)}.play-header h1{margin:0;font-size:21px;text-align:center;line-height:1.15}.play-header small{display:block;text-align:center;font-size:10px;color:var(--muted)}.play-header button{font-size:12px;padding:8px 10px}#arena{width:500px;max-width:100%;flex-shrink:0;padding:8px;background:#fff;border:1px solid #d6e1d8;border-radius:18px;box-shadow:0 10px 36px #213e2e14;margin:auto 0}.seat{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:53px;padding:5px 10px;border-radius:11px}.seat.active{background:var(--green);color:white}.seat>div:first-child{min-width:0}.player-name{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-info{display:block;font-size:11px;opacity:.8}.seat button{padding:0;width:38px;min-height:38px;background:#edf2ed;border:0;font-size:19px}.seat.active button{background:#ffffff25;color:white}body.tabletop .top-seat,body.tabletop #topSeat{transform:rotate(180deg)}#boardWrap{position:relative;margin:7px 0}#board{position:relative;width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#ead9b3;isolation:isolate}#board.grid8{display:grid;grid-template-columns:repeat(8,1fr);border:2px solid #436b58}.cell{position:relative;min-height:0;min-width:0;padding:0;border:0;border-radius:0;aspect-ratio:1;background:#f3eedb;display:grid;place-items:center;isolation:isolate}.cell.dark{background:#91ac92}.cell img{width:85%;height:85%;pointer-events:none;transform:rotate(var(--face));transition:transform .35s}.cell.selected,.node.selected{background:#f4cd74}.cell.legal:after,.node.legal:after,.point.legal:after{content:'';position:absolute;inset:3px;border:3px solid #10a26a;border-radius:5px;pointer-events:none;z-index:4}.cell.capture:after{border-color:#ee882c}.cell.last{box-shadow:inset 0 0 0 3px #278baf80}.coord{position:absolute;top:1px;left:2px;font-size:9px;color:#244f40;pointer-events:none}.stone{width:72%;height:72%;border-radius:50%;background:var(--p0);border:3px solid #fff8;box-shadow:0 3px 2px #0003;display:grid;place-items:center;color:white;font-size:clamp(10px,3vw,24px);font-weight:800;pointer-events:none}.stone.p1{background:var(--p1)}.stone.p2{background:var(--p2)}.stone.p3{background:var(--p3)}.reversi .stone.p0{background:#263937}.reversi .stone.p1{background:#fbfaf2;border-color:#c5cec3;color:#263937}.grid4{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);padding:5px;background:#37688b!important;gap:4px;aspect-ratio:7/6!important}.grid4 .cell{border-radius:50%;background:#dce7eb;aspect-ratio:auto}.grid4 .stone{width:95%;height:95%}.grid4 .stone.p0{background:#e5af32}.grid4 .stone.p1{background:#d06b54}.grid4 .cell:after{border-radius:50%}.board-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.node{position:absolute;width:8%;height:8%;min-height:0;min-width:0;padding:0;border:2px solid #9b8358;border-radius:50%;background:#f9f0d7;transform:translate(-50%,-50%);display:grid;place-items:center;font-size:10px}.node .stone{width:100%;height:100%;border-width:2px}.mill .node{width:8.5%;height:8.5%;background:#f7e6c0}.ludo .node.home{border-style:dashed}.ludo .node.goal{background:#d3e7d7}.ludo .node.start{box-shadow:0 0 0 2px #f6c86f}.action-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(100%,800px);min-height:45px}.action-bar p{font-size:13px;margin:0;font-weight:600;flex:1}.action-bar #actions{display:flex;gap:5px;align-items:center}.die{min-width:40px;min-height:40px;padding:5px 10px;background:#fff;border:1px solid #cfdbc9;border-radius:10px;display:grid;place-items:center;font-size:22px;font-weight:850}.play-tools{display:flex;align-items:center;justify-content:space-between;gap:9px;width:min(100%,800px);font-size:12px}.play-tools button{font-size:12px;padding:8px}.play-tools label{display:flex;align-items:center;gap:6px;font-size:12px}#extraPlayers{display:flex;gap:6px;font-size:11px;justify-content:center}#extraPlayers span{padding:4px 8px;border-radius:10px}#extraPlayers .active{background:var(--green);color:white}#promotions{display:flex;gap:5px}#promotions button{flex:1;font-size:11px;padding:5px}#promotions img{width:100%}.celebration{font-size:60px;color:#d99d28}#result{text-align:center}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#173b37;color:white;border-radius:12px;padding:12px 18px;max-width:90vw;font-size:14px;z-index:200}.backgammon{background:#6b4b38!important;border:8px solid #6b4b38;display:grid;grid-template-columns:repeat(6,1fr) 7% repeat(6,1fr);grid-template-rows:1fr 1fr;gap:0;aspect-ratio:1.15!important}.point{position:relative;padding:0;min-height:0;min-width:0;border:0;border-radius:0;background:#e7d3ab;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;overflow:hidden}.point:before{content:'';position:absolute;inset:0;background:#a5593f;clip-path:polygon(0 0,100% 0,50% 95%);z-index:0}.point:nth-child(even):before{background:#48675b}.point.lower{flex-direction:column-reverse}.point.lower:before{transform:rotate(180deg)}.point .stone{width:85%;height:auto;aspect-ratio:1;flex-shrink:0;position:relative;border-width:1px;font-size:10px;max-height:16%}.point .stone.p0{background:#f7f1db;color:#183e39;border-color:#ad9e7d}.point .stone.p1{background:#354e43}.point small{font-size:9px;z-index:2;color:#294b40}.point .stack-count{position:absolute;top:43%;font-weight:800;color:white;background:#284b42;border-radius:6px;padding:1px 3px;font-size:11px}.bar{grid-column:7;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:white;font-size:10px;background:#654332;border:0;min-width:0;padding:1px;border-radius:0}.bar .stone{width:90%;height:auto;aspect-ratio:1;font-size:9px}.point.selected{outline:3px solid #f6d17a;outline-offset:-3px}.bearoff{font-size:12px}.stone.new{animation:pop .25s ease-out}@keyframes pop{from{transform:scale(.65);opacity:.5}to{transform:scale(1);opacity:1}}@media(max-width:760px){#home{padding:20px 16px}.hero{padding-top:37px}.game-cards{grid-template-columns:repeat(2,1fr);gap:12px}.card-art{height:110px}.card-art svg{width:100px;height:90px}.card-copy{padding:14px}.card-copy h2{font-size:17px}.card-copy p{font-size:12px;min-height:54px}.brand{font-size:23px}.brand-icon{width:43px;height:43px}.home-header>a:last-child{font-size:11px;max-width:75px;text-align:right}.hero h1{letter-spacing:-2px}.hero p{font-size:14px}.play-header h1{font-size:17px}.play-header small{font-size:9px}#homeButton span{display:none}.action-bar{gap:5px}.action-bar p{font-size:11px}.action-bar button{font-size:12px;padding:7px}.die{min-width:30px;min-height:32px;font-size:18px}.player-name{font-size:13px}.player-info{font-size:10px}#play{padding:7px;gap:5px}.play-tools button{font-size:11px}.play-tools label{font-size:11px}.play-tools{gap:5px}}@media(max-width:350px){.game-cards{grid-template-columns:1fr}.card-art{height:100px}.card-copy p{min-height:0}}@media(orientation:landscape) and (max-height:500px){.play-header{min-height:34px}.play-header button{min-height:34px}.seat{min-height:34px;padding:1px 5px}.seat button{min-height:30px;width:30px}.player-info{display:none}.action-bar{min-height:32px}.play-tools button{min-height:30px}.play-tools input{width:16px;height:16px}.play-tools{height:30px}.play-header small{display:none}#boardWrap{margin:3px 0}.player-name{font-size:11px}.node{font-size:7px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.online-entry{padding:26px;margin-top:28px;background:#e7ecdf;border-radius:20px}.online-entry h2{margin-top:0}.online-entry p,.small{font-size:13px;color:var(--muted)}#club{max-width:1080px;margin:auto;padding:25px}.club-header{display:flex;gap:14px;align-items:center;justify-content:space-between}.club-header h1{font-size:24px}.club-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);padding:24px;border-radius:20px;margin:16px 0}.panel h2{margin-top:0}.person-row,.invite-row,.online-game{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:13px 0}.person-row button,.invite-row button{font-size:12px}.online-game{width:100%;text-align:left;border-radius:0;border-width:1px 0 0;flex-direction:column;align-items:start}.online-game small{font-weight:400;color:var(--muted)}#onlineTools{display:flex;gap:7px}#onlineTools button{font-size:12px;min-height:35px}#chatOptions{display:flex;gap:7px;flex-wrap:wrap}#chatOptions button{font-size:12px}#chatHistory{max-height:220px;overflow:auto;font-size:13px}input[type=password],textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;margin:7px 0 12px}#accountCode{font-size:12px;word-break:break-all}#loginBox{max-width:600px;margin:25px auto}#clubStatus{font-size:13px}#clubStatus.offline{color:#a35237}body.online-game-open .play-tools{display:none}.online-game-open #play{padding-bottom:10px}@media(max-width:700px){.club-columns{grid-template-columns:1fr}#club{padding:14px}.club-header{flex-wrap:wrap}.club-header h1{order:-1;width:100%;margin:5px 0;font-size:25px}.panel{padding:18px}.invite-row{flex-wrap:wrap}}

/* One shared viewing direction for gravity games, including restored saves. */
#arena.four-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px 8px}.four-layout #boardWrap{grid-row:1;grid-column:1/-1}.four-layout #bottomSeat{grid-row:2;grid-column:1}.four-layout #topSeat{grid-row:2;grid-column:2;transform:none}.four-layout .seat{padding:5px 6px;gap:4px}.four-layout .seat button{width:30px;min-height:34px}.four-layout .player-info{font-size:10px}.four-layout .player-name{font-size:12px}.seat .player-name:before{content:'';display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--player-color);border:1px solid #718278;margin-right:6px;vertical-align:middle}#status{border-left:8px solid var(--player-color);padding:7px 10px;background:#fff;border-radius:8px}#status.disconnected{border-color:#bd6148}.grid4 .cell:disabled{opacity:1}.grid4 .cell.winning{box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 7px #173b37}.grid4 .cell{overflow:visible}.grid4 .stone{position:relative;z-index:2}.grid4 .cell.legal:after{border-style:dashed}.bar.selected{outline:3px solid #f6d17a;outline-offset:-3px}.bar .stone.p0{background:#f7f1db;color:#183e39;border-color:#ad9e7d}.bar .stone.p1{background:#354e43}.action-bar #actions{flex-wrap:wrap;justify-content:flex-end;max-width:60%}.action-bar{flex-shrink:0}

.grid4 .cell.winning .stone:after{content:"★";color:#193e3b;font-size:clamp(13px,4vw,34px);line-height:1}.grid4 .cell.winning .stone{border-color:#fff;box-shadow:0 0 0 2px #193e3b}

.player-assignment{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:750;line-height:1.35;white-space:nowrap;margin:2px 0}.assignment-stone{display:inline-block;width:17px;height:17px;flex:0 0 17px;border-radius:50%;border:1px solid #75877c;box-shadow:inset 0 0 0 2px #ffffff50}.assignment-piece{width:22px;height:22px;object-fit:contain}.seat .player-name:before{display:none}.seat.active{background:#e4eee5;color:var(--ink);box-shadow:inset 0 0 0 2px #176b58}.seat.active button{background:#176b58;color:white}#extraPlayers .active{background:#e4eee5;color:var(--ink);box-shadow:inset 0 0 0 2px #176b58}.assigned-opponent{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:#edf2e9;font-size:13px;margin-bottom:6px}#nameFields .player-assignment{margin-top:5px}#extraPlayers>span{min-width:0}#extraPlayers strong{display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:400px){.four-layout .player-assignment{font-size:10px}.four-layout .assignment-stone{width:14px;height:14px;flex-basis:14px}}

/* Turn-specific actions belong to the active seat; the seat supplies its rotation. */
.tabletop .seat{flex-wrap:wrap}.seat>.action-bar{flex:0 0 100%;width:100%;min-height:40px;margin-top:3px;border-top:1px solid #176b5830;padding-top:4px}.seat>.action-bar #status{font-size:12px;background:transparent;border-left-width:5px;padding:5px 7px}.seat>.action-bar #actions button{width:auto;min-width:65px;min-height:40px;padding:7px 10px;font-size:12px;background:#176b58;color:white}.tabletop .point small,.tabletop .point .stack-count,.tabletop .bar>span,.tabletop .coord{transform:rotate(var(--face))}.seat>.action-bar .die{color:#193e3b}@media(orientation:landscape) and (max-height:500px){.seat>.action-bar{min-height:32px}.seat>.action-bar #status{font-size:10px;padding:3px 5px}.seat>.action-bar #actions button{min-height:32px;padding:4px 7px}.seat>.action-bar .die{min-width:25px;min-height:28px;padding:2px 5px;font-size:16px}}

.tabletop .seat>div:first-child{flex:1 1 0}.tabletop .seat-actions{flex:0 0 auto}@media(min-width:600px) and (max-height:500px){body.tabletop #play{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:5px 10px}body.tabletop #arena{grid-column:2;grid-row:1/4;justify-self:center;margin:0}body.tabletop .play-header{grid-column:1;grid-row:1;flex-wrap:wrap;justify-content:center}body.tabletop .play-header>div{order:-1;width:100%}body.tabletop .play-tools{grid-column:1;grid-row:2;flex-direction:column;height:auto;justify-content:center;gap:14px}body.tabletop .play-tools label{white-space:nowrap}}

.combo-label{position:absolute;z-index:5;top:44%;left:0;right:0;text-align:center;background:#176b58;color:white;font-size:10px;font-weight:800;border-radius:5px;padding:2px 0;pointer-events:none}.tabletop .combo-label{transform:rotate(var(--face))}.point.combined-target.legal:after{border-style:dashed}
