/* Card terminal: desktop board, accessible controls, and deliberate phone layouts. */
.games-page{overflow:hidden;color:var(--white);--dim:#96a7be}
.game-shell{display:grid;height:100dvh;min-height:640px;grid-template-columns:48px minmax(0,1fr) 300px;grid-template-rows:58px minmax(0,1fr) 36px}
.game-topbar{grid-column:1/-1;grid-template-columns:48px minmax(0,1fr) 300px}
.game-rail{grid-row:2;padding:18px 0}.game-stage{display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px 20px 12px;background:rgba(1,6,13,.76)}
.game-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.game-heading h1{margin:0;font:900 clamp(24px,3vw,40px)/1 Arial Black,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase}
.game-readout{display:flex;gap:14px;color:var(--dim);font:10px ui-monospace,monospace;text-transform:uppercase}.game-readout span{white-space:nowrap}.game-readout b{color:var(--white)}#game-state{color:var(--green)}
.board-guide{margin:0;color:var(--dim);font:12px/1.4 Arial,sans-serif}.board-guide:not(:empty){padding:9px 0}
.board-wrap{flex:1;min-height:0;overflow:auto;padding:8px 3px;scrollbar-color:#486185 #07101d;scrollbar-width:thin;overscroll-behavior:contain}
.board{position:relative;min-width:0;min-height:0;height:100%;--card-width:82px;--card-height:112px;--corner-size:16px}
.spider-board{min-width:490px}
.game-message{flex:none;margin-top:8px;border:1px solid var(--line);padding:10px 12px;min-height:40px;background:#030912;color:var(--dim);font:12px/1.4 Arial,sans-serif}
.game-message.hint{border-color:var(--green);color:var(--green)}
.game-console{grid-column:3;grid-row:2;min-height:0;overflow-y:auto;border-left:1px solid var(--line);background:#04080f}
.console-section{border-bottom:1px solid var(--line);padding:14px 16px}.console-label{margin:0 0 10px;color:var(--dim);font:10px ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.game-choice{display:grid;width:100%;grid-template-columns:24px 1fr;gap:3px 6px;min-height:48px;border:1px solid transparent;padding:9px;background:transparent;color:var(--dim);font:inherit;text-align:left;cursor:pointer}
.game-choice+.game-choice{margin-top:3px}.game-choice>span{grid-row:1/3;color:#66a9ff;font-size:10px}.game-choice b{color:var(--white);font:700 13px Arial,sans-serif}.game-choice small{font-size:8px}.game-choice:hover,.game-choice.active{border-color:var(--blue);background:rgba(23,124,255,.1)}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls .console-label,.save-status{grid-column:1/-1}.controls .console-label{margin-bottom:0}.save-status{margin:0 0 4px;color:var(--dim);font:11px/1.4 Arial,sans-serif}
.controls button{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:8px;border:1px solid #314762;padding:8px 10px;background:#07101d;color:var(--white);font:700 12px/1.3 Arial,sans-serif;cursor:pointer}
.controls #new-game{border-color:#923247;background:rgba(255,41,72,.07)}
.controls button:hover:not(:disabled){border-color:var(--blue)}button:disabled{opacity:.42;cursor:default!important}.controls [aria-pressed=true]{border-color:var(--green);background:#09261b}
.mission #rules-text b,.mission #rules-text span{display:block}.mission #rules-text b{font:700 14px/1.45 Arial,sans-serif}.mission #rules-text span{margin-top:7px;color:var(--dim);font:12px/1.55 Arial,sans-serif}
#color-rules{margin-top:14px;font:12px/1.5 Arial,sans-serif}#color-rules summary{min-height:44px;cursor:pointer;color:#8fbeff;display:list-item;padding:10px 0}#color-rules dt{margin-top:12px;font-weight:700}#color-rules dd{margin:4px 0;color:var(--dim)}
.telemetry dl{margin:0}.telemetry dl div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:7px 0}.telemetry dt,.telemetry dd{margin:0;font-size:11px}.telemetry dt{color:var(--dim)}.telemetry dd{color:var(--green)}.game-status{grid-column:1/-1}
button:focus-visible,a:focus-visible,summary:focus-visible,.board-wrap:focus-visible{outline:3px solid #9dd0ff;outline-offset:2px}
[hidden]{display:none!important}
.card,.empty-slot{position:absolute;width:var(--card-width,82px);height:var(--card-height,112px);border-radius:6px;padding:0;cursor:pointer}
.card{border:0;background:#f1f5ff;color:#101521;box-shadow:0 3px 8px #0005;font-family:Arial,sans-serif;transition:box-shadow .12s}
.card:hover{box-shadow:0 0 0 2px #76b6ff}.card.red{color:#cc1839}.card.selected{outline:3px solid var(--green);outline-offset:1px}
.card .corner{position:absolute;left:5px;top:5px;font-size:var(--corner-size,16px);font-weight:800;line-height:.95;text-align:center}.card .corner span{display:block;font-size:.85em}.card .center-suit{display:grid;height:100%;place-items:center;font-size:calc(var(--card-width,82px)*.4)}
.card.back{border:2px solid #b8d3ff;background:repeating-linear-gradient(45deg,#0c3f86 0 5px,#0a2858 5px 10px);box-shadow:inset 0 0 0 4px #07152e}
.card.back:after{position:absolute;inset:7px;border:1px solid #65beff80;content:'MF';display:grid;place-items:center;color:#82c7ff;font:900 12px Arial}
.empty-slot{border:1px dashed #3d5677;background:#09172b55;color:#6483ac;font:700 9px ui-monospace,monospace}.empty-slot.foundation:after{display:grid;height:100%;place-items:center;font:24px Arial;content:attr(data-suit)}
.stock-label,.foundation-label{position:absolute;top:calc(var(--card-height) + 7px);color:var(--dim);font-size:9px;white-space:nowrap}.foundation-label{width:var(--card-width);text-align:center;font:16px Arial}
.spider-complete{position:absolute;width:28px;height:38px;border:1px solid var(--green);border-radius:3px;background:#06170e;color:var(--green);font:700 10px Arial;display:grid;place-items:center}
.war-field{display:grid;height:100%;min-height:300px;grid-template-columns:minmax(90px,1fr) minmax(140px,1fr) minmax(90px,1fr);align-items:center;gap:12px;padding:16px 8px}
.war-side{text-align:center}.war-side h2{margin:0 0 18px;font:800 17px Arial,sans-serif;text-transform:uppercase}.war-deck{position:relative;width:82px;height:112px;margin:0 auto}.war-deck .card{inset:0}.war-count{display:block;margin-top:18px;color:var(--dim);font:12px Arial,sans-serif}
.war-battle{display:grid;justify-items:center;align-content:center;gap:14px;text-align:center}.war-battle b{font:900 clamp(36px,6vw,70px)/1 Arial Black,Arial,sans-serif;color:transparent;-webkit-text-stroke:1px var(--red)}
.war-draw{min-width:136px;min-height:46px;border:1px solid var(--blue);padding:10px;background:#0c2446;color:var(--white);font:700 12px Arial,sans-serif;cursor:pointer}.war-draw:hover{background:#174889}.war-result{margin:0;max-width:220px;color:var(--green);font:13px/1.5 Arial,sans-serif}.war-pot{color:var(--dim);font:11px/1.5 Arial,sans-serif}
.color-field{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:70px 20px minmax(178px,1fr) 20px auto;align-content:stretch;position:relative;height:100%;min-height:412px;padding:4px}
.color-zone{display:flex;min-width:0;align-items:center;gap:9px;padding:4px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#486185 #07101d}.color-zone.cpu{grid-row:1;justify-content:center;overflow:hidden}.color-zone.cpu .color-card{width:44px;min-width:0;flex:0 1 44px;height:60px;font-size:15px;cursor:default}
.color-zone.cpu+.color-zone-label{grid-row:2}.color-zone.player{grid-row:5;justify-content:flex-start;flex-wrap:wrap;overflow:visible;align-content:flex-start;padding-bottom:8px}
.color-zone-label{color:var(--dim);font:10px/1.4 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}.player-label{grid-row:4}
.color-card{position:relative;display:grid;width:68px;min-width:68px;height:96px;place-items:center;overflow:hidden;border:2px solid #ffffffcc;border-radius:9px;color:white;font:900 22px Arial,sans-serif;box-shadow:0 3px 8px #0004;cursor:pointer}
.color-card:before{position:absolute;width:74px;height:38px;border:2px solid #ffffffb3;border-radius:50%;transform:rotate(-48deg);content:''}.color-card span{position:relative;z-index:1;display:grid;place-items:center;text-shadow:0 2px 3px #0007}.color-card span b{font-size:30px;line-height:.75}.color-card span small{margin-top:5px;font:900 9px ui-monospace;letter-spacing:.08em}
.color-card.blue{background:#126be5}.color-card.red{background:#dc2443}.color-card.green{background:#08783e}.color-card.gold{background:#946400}.color-card.wild{background:conic-gradient(#126be5 0 25%,#dc2443 0 50%,#946400 0 75%,#08783e 0)}.color-card.back{background:repeating-linear-gradient(45deg,#10284f 0 6px,#071225 6px 12px);color:#8ccbff}.color-card.playable{outline:2px solid var(--green);outline-offset:1px}
.color-center{grid-row:3;display:flex;align-items:center;justify-content:center;gap:30px;padding:12px 0}.color-center>.color-card{width:76px;height:108px}.color-info{display:grid;grid-template-columns:76px auto;column-gap:14px;align-items:center}.color-info>.color-card{grid-row:1/3;width:76px;height:108px}.color-info strong{font:800 13px Arial,sans-serif;max-width:70px;line-height:1.4}.color-info small{color:var(--dim);font:10px/1.5 ui-monospace,monospace;max-width:90px}
.color-picker{position:absolute;left:50%;top:110px;z-index:20;display:grid;width:min(280px,100%);grid-template-columns:1fr 1fr;gap:10px;border:1px solid #7294bc;padding:16px;background:#030912;transform:translateX(-50%);box-shadow:0 10px 60px #000}.color-picker p{grid-column:1/-1;margin:0 0 6px;font:700 14px Arial}.color-picker button{min-height:46px;border:1px solid #ffffff66;color:white;font:700 13px Arial;cursor:pointer}.color-picker .blue{background:#126be5}.color-picker .red{background:#dc2443}.color-picker .green{background:#08783e}.color-picker .gold{background:#946400}
@media(max-width:1000px){
 .games-page{overflow:auto}.game-shell{height:auto;min-height:100dvh;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:56px auto auto auto auto auto 40px}
 .game-topbar{grid-template-columns:48px 1fr;grid-row:1}.game-topbar .top-exit,.game-rail{display:none}.game-topbar .topline>span{display:none}.game-topbar .topline{grid-template-columns:1fr}
 .game-console{display:contents}.game-picker{grid-column:1;grid-row:2;border-right:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:4px}.game-picker .console-label{grid-column:1/-1}.game-choice+.game-choice{margin:0}
 .controls{grid-column:2;grid-row:2;align-content:start}.game-stage{grid-column:1/-1;grid-row:3;min-height:560px}.board-wrap{height:430px;flex:auto}.board{height:100%}.board-guide{font-size:12px}.mission{grid-column:1;grid-row:4}.telemetry{grid-column:2;grid-row:4}.game-status{grid-row:7}
 .game-stage[data-game=color] .board-wrap{height:auto;overflow:visible}.game-stage[data-game=color] .board{height:auto;min-height:420px}.color-field{height:auto;min-height:420px}
}
@media(max-width:620px){
 .game-shell{display:flex;flex-direction:column}.game-topbar{min-height:52px}.game-topbar .topline{padding:0 10px}.game-topbar .topnav{font-size:9px;gap:10px}.game-topbar .topline>span{display:none}
 .game-picker{order:1;padding:10px 12px;grid-template-columns:1fr 1fr;border-right:0}.game-picker .console-label{display:none}.game-choice{min-height:44px;grid-template-columns:20px 1fr;padding:7px}.game-choice b{font-size:13px}.game-choice small{font-size:8px}
 .controls{order:2;padding:10px 12px;grid-template-columns:1fr 1fr;gap:7px}.controls .console-label{display:none}.save-status{font-size:11px;margin-bottom:0}.controls button{min-height:44px;font-size:12px}
 .game-stage{order:3;min-height:0;padding:14px 12px}.game-heading{gap:9px;align-items:flex-start;flex-direction:column}.game-heading h1{font-size:29px}.game-readout{font-size:10px;gap:15px}.board-guide:not(:empty){padding:8px 0}
 .board-wrap{height:430px;flex:none;padding:8px 2px}.board{min-width:0}.spider-board{min-width:490px}.game-message{font-size:12px;margin-top:10px}
 .game-stage[data-game=war] .board-wrap{height:380px}.war-field{min-height:350px;grid-template-columns:1fr 1fr;grid-template-rows:175px 1fr;gap:12px;padding:14px 8px}.war-side:first-child{grid-column:1;grid-row:1}.war-side:last-child{grid-column:2;grid-row:1}.war-battle{grid-column:1/-1;grid-row:2;gap:10px}.war-battle b{display:none}.war-side h2{margin-bottom:10px}.war-count{margin-top:10px}.war-draw{min-width:190px}.war-result{max-width:none}
 .color-field{grid-template-rows:64px 20px 174px 24px auto;padding:2px}.color-center{gap:16px}.color-info{column-gap:12px}.color-info strong{font-size:12px}.color-info small{font-size:9px}.color-zone.player{gap:8px}.color-zone.player .color-card{width:60px;min-width:60px;height:86px;font-size:20px}.color-picker{top:95px}
 .mission{order:4;padding:16px}.telemetry{order:5;padding:16px}.game-status{order:6;min-height:44px;padding:12px;font-size:8px}.game-status .legal-nav{font-size:10px}.game-status>span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.card{transition:none}}

/* Expanded category navigation. */
.game-topbar .topline>span:first-child{display:none}.game-topbar .topline{grid-template-columns:1fr auto}.game-topbar .topnav{justify-content:flex-start;gap:20px}.game-topbar .system-live{font-size:9px}@media(max-width:1000px){.game-topbar .topline{grid-template-columns:1fr}.game-topbar .topnav{justify-content:space-between;gap:8px}}@media(max-width:620px){.game-topbar .topnav{font-size:9px;gap:6px}.game-topbar .topline{padding:0 8px}}

.card{touch-action:manipulation}.war-result{max-width:260px}.war-battle{gap:12px}.war-pot{font-size:11px}