:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0A0908;color:#f6edda}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit;background:#211c13;border:1px solid #66502a;border-radius:10px;padding:10px 14px;min-height:44px;cursor:pointer}button:hover{border-color:#E5A93C}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #f4c768;outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{color:#efd39b;text-decoration:none}header{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 24px;background:#12100ef5;border-bottom:1px solid #3D321D;position:sticky;top:0;z-index:3;flex-wrap:wrap}header>a{font-weight:650}header img{object-fit:contain}nav{display:flex;gap:8px;align-items:center}.volume{font-size:12px;display:grid;gap:4px}.volume input{width:80px;accent-color:#E5A93C}main{max-width:1060px;margin:auto;padding:24px 16px}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}h1,h2{font-family:Georgia,serif;font-weight:500}h1{font-size:clamp(25px,4vw,40px);margin:8px 0 18px}.tag{font-size:12px;letter-spacing:.14em;color:#e5bd70}.arena{background:radial-gradient(ellipse at center,#252012,#100e0b);border:1px solid #3D321D;border-radius:16px;padding:8px;overflow:auto;max-width:100%}canvas{display:block;max-width:100%;height:auto;margin:auto;touch-action:none}#stats{display:flex;flex-wrap:wrap;gap:12px;min-height:40px;color:#e8c98c;font-size:14px}.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}.control-group{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;border:1px solid #3D321D;border-radius:12px;padding:8px}.control-group strong{flex-basis:100%;text-align:center;font-size:13px;color:#e5bd70}.controls button{touch-action:none;user-select:none;min-width:46px}.controls button.active{background:#E5A93C;color:#1A1202}#help{font-size:14px;line-height:1.7;color:#bfb5a2}#notice{min-height:24px;color:#efcc87}dialog{padding:0;border:1px solid #66502a;border-radius:16px;background:#12100E;color:inherit;width:min(530px,calc(100% - 24px));max-height:calc(100dvh - 24px)}dialog::backdrop{background:#030200cc;backdrop-filter:blur(5px)}dialog .card{padding:24px;text-align:center}.full-logo{display:block;width:180px;height:115px;object-fit:contain;margin:0 auto 15px;filter:drop-shadow(0 0 12px #e5a93c30)}dialog h2{font-size:30px;margin:12px 0}dialog p{line-height:1.6;color:#cbbfa8}dialog label{display:grid;gap:8px;text-align:left;margin:14px 0}dialog button,dialog a{display:block;width:100%;margin-top:12px}.primary{background:#E5A93C;color:#1A1202;font-weight:750;border:0}#options{margin:18px 0}[hidden]{display:none!important}@media(max-width:600px){header{padding:8px 12px;gap:8px}header img{display:none}header>a{font-size:14px}header nav{gap:5px}header button{font-size:12px;padding:8px}.volume{display:grid;font-size:10px}.volume input{width:55px}main{padding:16px 8px}.arena{padding:3px}.heading{align-items:flex-start}.heading>button{font-size:12px;padding:8px}.controls{gap:8px}.controls button{padding:8px;min-width:44px}.control-group{padding:5px;gap:5px}dialog .card{padding:20px}}

.guide-content{text-align:left!important}.guide-content h2{text-align:center}.guide-content li{margin:14px 0;line-height:1.65;color:#d8ccb7}.guide-content ol{padding-left:24px}.card-example{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid #66502a;border-radius:12px}.card-example span{display:grid;place-items:center;width:60px;height:84px;border-radius:7px;background:#eee6d1;font-size:24px;font-weight:700}.example-red{color:#ad3348}.example-black{color:#25213a}.card-example p{flex:1;min-width:140px}#guide-close{position:sticky;bottom:0}
/* Keep the whole action arena and its controls inside the usable viewport. */
body.arcade{height:var(--play-height,100dvh);display:flex;flex-direction:column;overflow:hidden}
.arcade header{position:relative;flex-shrink:0}
.arcade main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 12px}
.arcade .heading{flex-shrink:0}.arcade .heading .tag{display:none}.arcade h1{font-size:22px;margin:4px 0}
.arcade #stats{flex-shrink:0;min-height:30px;font-size:13px;align-items:center}
.arcade .arena{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.arcade canvas{flex:none;max-width:none}
.arcade .controls{flex-shrink:0;margin-top:6px;gap:6px}
.arcade #help{margin:4px 0;font-size:12px;line-height:1.3;flex-shrink:0}
.arcade #notice{margin:0;min-height:0;font-size:12px;flex-shrink:0}
.arcade .control-group{padding:4px;gap:4px}.arcade .control-group strong{font-size:12px}
body[data-game="maze"] .control-group{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:auto 44px 44px;justify-content:center}
body[data-game="maze"] .control-group strong{grid-column:1 / -1}
body[data-game="maze"] button[data-action$=":3"]{grid-column:2;grid-row:2}
body[data-game="maze"] button[data-action$=":2"]{grid-column:1;grid-row:3}
body[data-game="maze"] button[data-action$=":1"]{grid-column:2;grid-row:3}
body[data-game="maze"] button[data-action$=":0"]{grid-column:3;grid-row:3}
body[data-game="maze"] button[data-action="switch"]{grid-column:1 / -1}
@media(max-width:650px){.arcade header{padding:5px 8px;gap:4px}.arcade header>a{font-size:12px}.arcade header nav{gap:4px;flex-wrap:wrap}.arcade header button{font-size:12px;padding:5px;min-height:40px}.arcade main{padding:4px 6px}.arcade h1{font-size:17px}.arcade .heading>button{min-height:32px;padding:4px 8px}.arcade #help{display:none}.arcade .controls button{min-width:40px;padding:6px;font-size:13px}.arcade #stats{font-size:12px;min-height:30px}.arcade .controls{padding-bottom:env(safe-area-inset-bottom)}}
@media(max-height:500px) and (min-width:600px){.arcade header img{display:none}.arcade header{padding:3px 12px}.arcade main{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto minmax(0,1fr);gap:3px 8px}.arcade .heading{grid-column:1 / -1}.arcade #stats{grid-column:1 / -1}.arcade .arena{grid-row:3;grid-column:1;height:100%}.arcade .controls{grid-row:3;grid-column:2;align-content:center;margin:0}.arcade #help,.arcade #notice{display:none}}

#card-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0 12px;font-size:14px}#card-tools label{display:flex;align-items:center;gap:7px}#card-tools input{width:100px;accent-color:#E5A93C}#card-tools span{font-size:12px;color:#bfb5a2}#card-tools select{padding:6px}
body[data-game="solitaire"] .arena{background:radial-gradient(ellipse at center,#266747,#103326);max-height:70dvh;overflow:auto;overscroll-behavior:contain}
body[data-game="solitaire"][data-scene="night"] .arena{background:radial-gradient(ellipse at center,#30355b,#141626)}
body[data-game="solitaire"][data-scene="wine"] .arena{background:radial-gradient(ellipse at center,#692e44,#301321)}
body[data-game="solitaire"] #controls{position:sticky;bottom:0;background:#12100ef5;padding:6px;z-index:2}
@media(max-width:650px){#card-tools{gap:8px}#card-tools select{max-width:175px}body[data-game="solitaire"] .control-group{gap:4px}body[data-game="solitaire"] .controls button{font-size:12px;padding:6px}}