.arcade-page{font-family:"Zero Terminal",monospace}.arcade-page [hidden]{display:none!important}.arcade-top{max-width:1200px;margin:0 auto;padding:30px 28px;display:flex;align-items:center;justify-content:space-between;gap:15px}.arcade-home{font-size:11px;text-decoration:none;color:rgba(var(--rgb),.65)}.arcade-wordmark{font-size:11px;letter-spacing:1px}.arcade-wordmark>span{color:rgba(var(--rgb),.4)}.arcade-main{max-width:1120px;margin:0 auto;padding:40px 0 60px}.arcade-heading{padding:20px 0 55px;max-width:690px}.arcade-eyebrow{font-size:10px;letter-spacing:2px;color:rgba(var(--rgb),.5)}.arcade-heading h1{font:700 clamp(45px,6vw,76px)/1.1 "Zero Terminal",monospace;letter-spacing:-4px;margin:25px 0}.arcade-heading h1>span{color:rgba(var(--rgb),.35)}.arcade-heading>p:last-child{font-size:12px;color:rgba(var(--rgb),.6);line-height:1.9}.game-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.game-card{color:var(--fg);text-align:left;padding:25px;border:1px solid rgba(var(--rgb),.17);border-radius:18px;background:linear-gradient(145deg,rgba(var(--rgb),.065),rgba(var(--surface),.7));backdrop-filter:blur(12px);cursor:pointer;transition:transform .25s,border-color .25s;overflow:hidden;display:flex;flex-direction:column}.game-card:hover{transform:translateY(-6px);border-color:rgba(var(--rgb),.5)}.game-card-number{font-size:8px;letter-spacing:1px;color:rgba(var(--rgb),.45)}.game-art{height:190px;display:flex;align-items:center;justify-content:center;position:relative;margin:10px 0 20px;isolation:isolate}.game-art:before{content:"";position:absolute;inset:15px;background:linear-gradient(45deg,rgba(var(--rgb),.04) 25%,transparent 25%,transparent 75%,rgba(var(--rgb),.04) 75%),linear-gradient(45deg,rgba(var(--rgb),.04) 25%,transparent 25%,transparent 75%,rgba(var(--rgb),.04) 75%);background-size:48px 48px;background-position:0 0,24px 24px;transform:perspective(400px) rotateX(25deg) rotateZ(-12deg);mask-image:radial-gradient(ellipse,#000,transparent 72%);z-index:-1}.chess-art>span{font:100px "Segoe UI Symbol",serif;filter:drop-shadow(0 15px 9px #0005);transform:rotate(-12deg)}.chess-art>span+span{font-size:125px;margin-left:-15px;transform:translateY(10px) rotate(10deg);color:#888}.checkers-art i{position:absolute;width:94px;height:94px;border-radius:50%;border:2px solid #aaa;background:radial-gradient(circle at 32% 20%,#fff,#aaa);box-shadow:inset 0 0 0 9px #ddd,inset 0 0 0 11px #999,0 12px 0 #666,0 20px 20px #0004;transform:rotateX(30deg) translate(-28px,-25px)}.checkers-art i:nth-child(2){background:radial-gradient(circle at 32% 20%,#666,#111);box-shadow:inset 0 0 0 9px #333,inset 0 0 0 11px #777,0 12px 0 #111,0 20px 20px #0004;transform:rotateX(30deg) translate(38px,30px)}.checkers-art i:nth-child(3){width:50px;height:50px;transform:rotateX(30deg) translate(-70px,55px);opacity:.45}.breakout-art{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start;padding:40px 15px}.breakout-art i{height:22px;background:linear-gradient(145deg,#fff8,#fff2);border:1px solid rgba(var(--rgb),.4);border-radius:4px;box-shadow:inset 0 1px 0 #fff8}.breakout-art i:nth-child(5){opacity:.2}.breakout-art b{position:absolute;bottom:14px;width:80px;height:9px;background:var(--fg);border-radius:10px;left:calc(50% - 40px);box-shadow:0 0 30px rgba(var(--rgb),.4)}.breakout-art em{position:absolute;left:58%;bottom:50px;width:9px;height:9px;background:var(--fg);border-radius:50%;box-shadow:-8px 15px 0 rgba(var(--rgb),.15),-16px 30px 0 rgba(var(--rgb),.06),0 0 20px rgba(var(--rgb),.5)}.game-card-title{display:flex;justify-content:space-between;font-size:20px;letter-spacing:-.7px}.game-card-title>span{font-size:16px;color:rgba(var(--rgb),.4)}.game-card-copy{font-size:10px;color:rgba(var(--rgb),.55);line-height:1.9;margin:15px 0 27px;flex:1}.game-card-footer{display:flex;justify-content:space-between;gap:8px;font-size:7px;border-top:1px solid rgba(var(--rgb),.12);padding-top:17px;color:rgba(var(--rgb),.5)}.game-card-footer>span{color:var(--fg)}.arcade-footnote{font-size:7px;letter-spacing:1px;color:rgba(var(--rgb),.3);text-align:center;margin-top:35px}.game-room-top{display:flex;align-items:center;justify-content:space-between}.game-room-top>span{font-size:10px;color:rgba(var(--rgb),.5)}.arcade-button{background:rgba(var(--rgb),.04);border:1px solid rgba(var(--rgb),.2);border-radius:9px;padding:12px 16px;font:700 10px "Zero Terminal",monospace;color:var(--fg);cursor:pointer}.arcade-button:hover{background:rgba(var(--rgb),.1)}.arcade-button:disabled{opacity:.3;cursor:default}.game-room-heading{margin:25px 0}.game-room-heading h1{font:700 34px "Zero Terminal",monospace;letter-spacing:-1.5px;margin:0 0 10px}.game-room-heading p{font-size:10px;color:rgba(var(--rgb),.6);max-width:700px}.game-layout{display:grid;grid-template-columns:minmax(0,740px) minmax(210px,1fr);gap:30px;align-items:start}.game-surface{padding:12px;background:rgba(var(--rgb),.035);border:1px solid rgba(var(--rgb),.18);border-radius:15px;box-shadow:0 20px 70px #0001}.game-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;max-width:620px;margin:auto;overflow:hidden;border-radius:7px}.board-square{position:relative;aspect-ratio:1;border:0;border-radius:0;padding:7%;background:#e1e1e1;color:#111;cursor:pointer;display:grid;place-items:center;min-width:0}.board-square.dark-square{background:#727272}.board-square.selected{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #111}.board-square.legal:after{content:"";position:absolute;inset:38%;border-radius:50%;background:#0007;border:2px solid #fffa}.board-square.capture:after{inset:4%;background:none;border:3px solid #fff;box-shadow:0 0 0 1px #111}.board-square.last-move{background:#b2b2b2}.board-square.last-move.dark-square{background:#929292}.board-square:focus-visible{outline:3px solid #fff;outline-offset:-4px;z-index:1}.square-label{position:absolute;bottom:2px;left:4px;font:700 8px monospace;color:#111a}.chess-piece{font:clamp(26px,4.5vw,66px)/1 "Segoe UI Symbol","Arial Unicode MS",serif;filter:drop-shadow(0 2px 1px #0006);color:#121212;-webkit-text-stroke:1px #ddd}.chess-piece.white-piece{color:#fff;-webkit-text-stroke:1.2px #222}.checker-piece{width:82%;aspect-ratio:1;border-radius:50%;border:1px solid #aaa;background:linear-gradient(135deg,#555,#111);box-shadow:inset 0 0 0 4px #333,inset 0 0 0 5px #888,0 3px 0 #000,0 6px 7px #0005;display:grid;place-items:center;color:#fff;font-size:20px}.checker-piece.white-piece{background:linear-gradient(135deg,#fff,#bbb);box-shadow:inset 0 0 0 4px #ddd,inset 0 0 0 5px #999,0 3px 0 #888,0 6px 7px #0005;color:#111}.game-sidebar{border:1px solid rgba(var(--rgb),.15);border-radius:14px;background:rgba(var(--surface),.8);padding:23px}.game-sidebar h2{font:700 20px/1.5 "Zero Terminal",monospace;letter-spacing:-.5px;margin:22px 0 10px}.game-sidebar>p:not(.arcade-eyebrow){font-size:10px;line-height:1.9;color:rgba(var(--rgb),.6)}.session-controls{display:grid;gap:9px;margin:25px 0}.game-tip{border-top:1px solid rgba(var(--rgb),.13);padding-top:18px}.game-surface canvas{width:100%;aspect-ratio:3/2;display:block;border-radius:7px;touch-action:none;outline-offset:5px}.arcade-page dialog{max-width:90vw;width:440px;border:1px solid rgba(var(--rgb),.3);background:var(--bg);color:var(--fg);border-radius:15px;padding:25px;font-family:inherit}.arcade-page dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}.arcade-page dialog h2{font-size:17px}.arcade-page dialog>div{display:flex;flex-wrap:wrap;gap:10px}.arcade-page dialog button{padding:12px;background:rgba(var(--rgb),.08);color:var(--fg);border:1px solid rgba(var(--rgb),.2);border-radius:8px;cursor:pointer}
@media(max-width:1180px){.arcade-main{margin:0 28px}.game-layout{grid-template-columns:minmax(0,1fr) 240px}.game-card{padding:20px}.game-card-footer{font-size:6px}}
@media(max-width:760px){.arcade-top{padding:22px 20px}.arcade-wordmark{font-size:8px;letter-spacing:0}.arcade-home{font-size:9px}.arcade-main{margin:0 20px;padding-top:20px}.arcade-heading{padding:15px 0 30px}.arcade-heading h1{font-size:48px;letter-spacing:-3px}.game-cards{grid-template-columns:1fr;gap:16px}.game-card{padding:23px}.game-art{height:150px}.game-card-footer{font-size:8px}.game-layout{grid-template-columns:1fr;gap:16px}.game-sidebar{padding:20px}.game-sidebar h2{margin-top:10px}.session-controls{display:flex;flex-wrap:wrap;margin:18px 0}.game-tip{margin-bottom:0}.game-surface{padding:7px;border-radius:11px}.chess-piece{font-size:clamp(25px,7.5vw,50px)}.checker-piece{box-shadow:inset 0 0 0 2px #444,inset 0 0 0 3px #888,0 2px 0 #111,0 3px 4px #0005}.checker-piece.white-piece{box-shadow:inset 0 0 0 2px #ddd,inset 0 0 0 3px #999,0 2px 0 #888,0 3px 4px #0005}.square-label{font-size:6px;left:2px;bottom:0}.game-room-top>span{font-size:8px}.game-room-heading h1{font-size:28px}.game-board{max-width:480px}}
.chess-piece{width:100%;height:100%;display:grid;place-items:center;filter:drop-shadow(0 2px 1px #0005)}.chess-piece svg{width:95%;height:95%;max-height:64px;fill:#161616;stroke:#ccc;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}.chess-piece.white-piece svg{fill:#fff;stroke:#333;stroke-width:1.3}
@media(prefers-reduced-motion:reduce){.game-card{transition:none}.game-card:hover{transform:none}}

#difficulty-controls{margin-top:22px}#difficulty-controls label{display:block;font-size:9px;color:rgba(var(--rgb),.6);margin-bottom:8px}#difficulty{width:100%;padding:12px;border:1px solid rgba(var(--rgb),.22);border-radius:8px;background:var(--bg);color:var(--fg);font:700 11px "Zero Terminal",monospace;cursor:pointer}#difficulty-controls p{font-size:9px;line-height:1.8;color:rgba(var(--rgb),.55)}#difficulty-controls .opponent-side{font-size:8px;color:rgba(var(--rgb),.4)}#board[aria-busy=true]{cursor:progress}#board[aria-busy=true] .board-square{cursor:progress}
/* Refined play surface and compact controls shared across all games. */
.game-layout{grid-template-columns:minmax(0,740px) minmax(260px,1fr);gap:24px}
.game-sidebar{grid-column:2;grid-row:1;padding:22px;border-radius:18px;background:linear-gradient(145deg,rgba(var(--rgb),.065),rgba(var(--surface),.94));box-shadow:inset 0 1px 0 rgba(var(--rgb),.07)}
.game-surface{grid-column:1;grid-row:1;padding:20px;border-radius:20px;background:linear-gradient(135deg,rgba(var(--rgb),.12),rgba(var(--rgb),.025));box-shadow:inset 0 1px 0 rgba(var(--rgb),.18),0 18px 45px #0002}
.game-sidebar>.arcade-eyebrow{font-size:8px;letter-spacing:1.6px;margin:0 0 14px;color:rgba(var(--rgb),.4)}
.game-sidebar h2{font-size:19px;line-height:1.4;margin:0 0 8px;letter-spacing:-.65px}
#game-detail{margin:0 0 18px;font-size:10px;color:rgba(var(--rgb),.55)}
#difficulty-controls{margin-top:0;padding-top:17px;border-top:1px solid rgba(var(--rgb),.1)}
#difficulty-controls label{font-size:9px;margin-bottom:8px}
#difficulty{min-height:44px;border-radius:10px;background:rgba(var(--surface),.8);font-size:11px}
#difficulty-description{font-size:9px;line-height:1.7;margin:10px 0;min-height:46px}
#difficulty-controls .opponent-side{margin:9px 0 0;padding:8px 10px;border-radius:7px;background:rgba(var(--rgb),.045);font-size:8px;line-height:1.7;color:rgba(var(--rgb),.65)}
.session-controls{grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}
.session-controls .arcade-button{min-height:43px;padding:10px 8px;font-size:9px;border-radius:9px}
#new-game{grid-column:1/-1;background:var(--fg);color:var(--bg);border-color:transparent}
#new-game:hover{opacity:.85}
.game-rules{border-top:1px solid rgba(var(--rgb),.12);padding-top:13px}
.game-rules summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:9px;color:rgba(var(--rgb),.65);list-style:none;min-height:30px}
.game-rules summary::-webkit-details-marker{display:none}
.game-rules summary span{font-size:16px;font-family:monospace;transition:transform .2s}
.game-rules[open] summary span{transform:rotate(45deg)}
.game-rules .game-tip{border:0;padding:10px 0 0;margin:0;font-size:9px;line-height:1.9;color:rgba(var(--rgb),.5)}
.game-board{max-width:620px;border-radius:8px;box-shadow:0 0 0 1px rgba(var(--rgb),.18),0 6px 20px #0003}
.board-square{background:linear-gradient(145deg,#e4e4e4,#ccc);padding:9%;transition:box-shadow .15s}
.board-square.dark-square{background:linear-gradient(145deg,#626262,#4c4c4c)}
.board-square.last-move{background:linear-gradient(145deg,#f5f5f5,#d7d7d7)}
.board-square.last-move.dark-square{background:linear-gradient(145deg,#929292,#777)}
.board-square.last-move:before{content:"";position:absolute;inset:3px;border:1px solid #ffffff45;border-radius:3px;pointer-events:none}
.board-square.selected{box-shadow:inset 0 0 0 2px #fff,inset 0 0 16px #ffffff70}
.board-square.legal:after{inset:40%;background:#fff9;border:1px solid #2228;box-shadow:0 1px 5px #0003}
.board-square.capture:after{inset:5%;border:2px solid #fff9;background:none}
.square-label{font-size:8px;color:#2228;left:4px;bottom:2px}
.dark-square .square-label{color:#fffa}
.chess-piece{height:100%;width:100%;transform:translateY(-2%);filter:drop-shadow(0 3px 1px #0006) drop-shadow(0 7px 3px #0003)}
.chess-piece svg{width:100%;height:100%;max-height:67px;stroke:#111;stroke-width:1.1}
.chess-piece.white-piece svg{stroke:#555;stroke-width:1}
.chess-piece .piece-engraving{fill:none;stroke:#ffffff45;stroke-width:1}
.chess-piece.white-piece .piece-engraving{stroke:#7777}
.checker-piece,.checker-piece.white-piece{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 4px 2px #0005);transform:translateY(-2%)}
.checker-piece svg{display:block;width:100%;height:100%;max-height:72px}
[data-theme="light"] .game-surface{background:linear-gradient(135deg,#fafafa,#e8e8e8);box-shadow:inset 0 1px 0 #fff,0 12px 35px #00000009}
[data-theme="light"] .board-square.dark-square{background:linear-gradient(145deg,#929292,#777)}
@media(max-width:1000px) and (min-width:761px){.game-layout{grid-template-columns:minmax(0,1fr) 260px;gap:18px}.game-surface{padding:12px}.game-sidebar{padding:18px}}
@media(max-width:760px){
 .game-room-heading{margin:20px 0 18px}.game-room-heading h1{font-size:27px;margin-bottom:7px}.game-room-heading p{font-size:9px;line-height:1.8;margin:0}
 .game-layout{grid-template-columns:minmax(0,1fr);gap:18px}
 .game-sidebar{grid-column:1;grid-row:1;padding:18px;border-radius:15px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:start}
 .game-sidebar>.arcade-eyebrow{grid-column:1/-1;font-size:7px;margin-bottom:12px}
 .game-sidebar h2{grid-column:1/-1;font-size:19px;margin:0 0 5px}
 #game-detail{grid-column:1/-1;font-size:9px;margin-bottom:14px}
 #difficulty-controls{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;padding-top:13px}
 #difficulty-controls label{grid-column:1;margin:0 0 6px;font-size:8px}
 #difficulty{grid-column:1;grid-row:2;min-height:42px;font-size:10px;padding:9px}
 #difficulty-description{grid-column:2;grid-row:1/3;font-size:8px;line-height:1.8;margin:0;min-height:0;align-self:center}
 #difficulty-controls .opponent-side{grid-column:1/-1;font-size:8px;padding:7px 9px;margin-top:10px}
 .session-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0 10px}
 .session-controls #new-game{grid-column:auto}
 .session-controls .arcade-button{min-height:42px;font-size:8px;padding:8px 4px;white-space:nowrap}
 .game-rules{grid-column:1/-1;padding-top:7px}
 .game-rules summary{font-size:8px;min-height:26px}.game-rules .game-tip{font-size:8px}
 .game-surface{grid-column:1;grid-row:2;padding:10px;border-radius:14px}
 .game-board{max-width:500px;border-radius:5px}
 .board-square{padding:8%}.square-label{font-size:6px;bottom:1px;left:2px}
 .chess-piece{filter:drop-shadow(0 2px 1px #0007) drop-shadow(0 4px 2px #0003)}
 .checker-piece,.checker-piece.white-piece{filter:drop-shadow(0 2px 1px #0005)}
}
@media(prefers-reduced-motion:reduce){.board-square,.game-rules summary span{transition:none}}
@media(max-width:760px){
 .game-room-heading p{font-size:10px}
 #difficulty-controls label{font-size:10px}
 #difficulty-description{font-size:10px;line-height:1.65}
 #difficulty-controls .opponent-side{font-size:9px}
 .session-controls .arcade-button{font-size:9px}
 .game-rules summary{font-size:10px}
 .game-rules .game-tip{font-size:10px}
 .session-controls:has(#launch:not([hidden])){grid-template-columns:1fr 1fr}
}

.chess-piece:not(.white-piece) svg{stroke:#999;stroke-width:.8}