:root{font-family:system-ui,-apple-system,sans-serif;color:#203f45;background:#f6f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid #cfddd9;border-radius:12px;padding:10px 16px;background:white;color:#203f45}button:disabled{cursor:wait;opacity:.5}button:hover:not(:disabled){background:#e8f3ee}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #e68d30;outline-offset:4px}.library{max-width:1160px;margin:auto;padding:56px 32px 24px}.eyebrow{font-size:14px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:#487a73}.library h1{font-size:clamp(44px,7vw,76px);line-height:1.06;letter-spacing:-.055em;margin:24px 0}.lead{font-size:20px;line-height:1.6;color:#627976}.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:40px 0 28px}.game-card{color:inherit;text-decoration:none;background:#fffdf8;border:1px solid #e4e5d9;border-radius:24px;padding:26px;transition:transform .16s,border-color .16s;min-height:220px;display:flex;flex-direction:column}.game-card:hover{transform:translateY(-4px);border-color:#509b89}.game-icon{font-size:42px}.game-card h2{font-size:23px;letter-spacing:-.025em;margin:24px 0 8px}.game-card p{font-size:15px;color:#657b77;line-height:1.6;margin:0 0 20px}.card-link{margin-top:auto;font-weight:700;font-size:14px;color:#2d7968}.note,footer{font-size:13px;line-height:1.7;color:#6f827c}footer{padding-top:20px;border-top:1px solid #e0e3d7}.player-page{background:#183139;color:#edf6f1}.player-header{padding:14px 24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #335059;min-height:70px}.back{color:#b3dfd0;text-decoration:none}.player-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.player-actions button{background:#28464e;color:#edf6f1;border-color:#426069}.player-actions button:hover:not(:disabled){background:#385b62}.player-main{max-width:1100px;margin:auto;padding:20px 24px}#viewport{height:min(70vh,750px);min-height:250px;display:flex;justify-content:center;align-items:center;overflow:hidden;background:#12272e;border:1px solid #335059;border-radius:18px;position:relative}#welcome{text-align:center;padding:24px}#welcome h1{font-size:32px;letter-spacing:-.03em;margin:18px 0 10px}#welcome p{color:#b5ccc9;line-height:1.7}.primary{background:#d2ec85;color:#203d36;border:0;padding:15px 28px;font-weight:750}.primary:hover:not(:disabled){background:#e2f5a8}#frame-wrap{width:800px;height:600px;position:absolute;transform-origin:center center}#frame-wrap iframe{border:0;width:800px;height:600px;display:block}.player-status{font-size:14px;color:#b5ccc9;line-height:1.5;min-height:21px}.diagnostics{color:#adc6c1;font-size:14px;margin-top:24px}.diagnostics summary{cursor:pointer}.diagnostics p{line-height:1.6}.diagnostics form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagnostics select{max-width:100%;padding:10px;border-radius:8px}#viewport:fullscreen{height:100vh;width:100vw;max-width:none;border:0;border-radius:0}@media(max-width:600px){.library{padding:32px 20px}.games{grid-template-columns:1fr}.player-header{padding:12px;gap:12px;flex-wrap:wrap}.player-header strong{font-size:14px}.player-actions{width:100%;justify-content:flex-end}.player-main{padding:12px}#viewport{height:60vh;border-radius:10px}.back{font-size:14px}.lead{font-size:18px}}@media(prefers-reduced-motion:reduce){.game-card{transition:none}}
body.home{--wall:#1d4a5e;--wall-stripe:#22536a;--paper:#fffaf0;--muted:#bcd3d8;--wood:#a8662e;--wood-dark:#7a4520;--sun:#f5c518;font-family:Nunito,system-ui,sans-serif;color:var(--paper);background:var(--wall) repeating-linear-gradient(90deg,transparent 0 46px,var(--wall-stripe) 46px 50px);min-height:100vh}
.home a:focus-visible{outline:4px solid var(--sun);outline-offset:6px}
.wall{max-width:1080px;margin:auto;padding:64px 32px 8px}
.wall h1{font-family:Neucha,Nunito,cursive;font-weight:400;font-size:clamp(46px,8vw,84px);line-height:1;margin:0 0 18px;letter-spacing:-.01em}
.wall-lead{font-size:19px;line-height:1.6;color:var(--muted);max-width:36em;margin:0}
.home main{max-width:1080px;margin:auto;padding:56px 48px 24px}
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:32px;row-gap:84px}
.shelf li{position:relative;display:flex}
.shelf li::after{content:"";position:absolute;left:-16px;right:-16px;bottom:-26px;height:20px;background:linear-gradient(var(--wood) 0 6px,#94582a 6px,var(--wood-dark));border-radius:2px;box-shadow:0 10px 16px rgba(4,20,28,.45)}
.box{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;color:inherit;text-decoration:none;background:var(--spine);border-left:14px solid color-mix(in srgb,var(--spine) 70%,black);border-radius:4px 8px 8px 4px;box-shadow:inset -2px 0 0 rgba(255,255,255,.18),4px 6px 0 rgba(4,20,28,.35);transform-origin:50% 100%;transition:transform .18s ease-out}
.box img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0 6px 0 0}
.box h2{font-family:Neucha,Nunito,cursive;font-weight:400;font-size:27px;line-height:1.1;margin:14px 16px 6px}
.box p{font-size:14.5px;line-height:1.5;margin:0 16px 18px;color:color-mix(in srgb,var(--paper) 82%,var(--spine))}
.box:hover,.box:focus-visible{transform:translateY(-8px) rotate(-1.2deg)}
.shelf-note{margin:48px 0 0;color:var(--muted);font-size:15px}
.shelf-note:empty{display:none}
.home-footer{border:0;max-width:1080px;margin:auto;padding:24px 48px 48px;color:var(--muted);font-size:14px}
@media (max-width:560px){.wall{padding:40px 20px 0}.home main{padding:40px 28px 16px}.shelf{grid-template-columns:1fr;row-gap:72px}.home-footer{padding:24px 28px 40px}.wall-lead{font-size:17px}}
@media (prefers-reduced-motion:reduce){.box{transition:none}.box:hover,.box:focus-visible{transform:none}}
html:has(body.home){background:#1d4a5e}
.player-page{--wall:#1d4a5e;--wall-stripe:#22536a;--paper:#fffaf0;--muted:#bcd3d8;--wood:#a8662e;--wood-dark:#7a4520;--sun:#f5c518;--spine:#3a3f9e;font-family:Nunito,system-ui,sans-serif;color:var(--paper);background:var(--wall) repeating-linear-gradient(90deg,transparent 0 46px,var(--wall-stripe) 46px 50px);min-height:100vh}
html:has(body.player-page){background:#1d4a5e}
.player-page .player-header{border:0;background:linear-gradient(var(--wood) 0 8px,#94582a 8px,var(--wood-dark));box-shadow:0 8px 16px rgba(4,20,28,.4);min-height:74px}
.player-page .player-header strong{font-family:Neucha,Nunito,cursive;font-weight:400;font-size:30px;line-height:1;color:var(--paper)}
.player-page .back{color:var(--paper);font-weight:700}
.player-page .back:hover{color:var(--sun)}
.player-page .player-actions button{background:var(--sun);color:#3a2a06;border:0;border-radius:999px;padding:10px 18px;font-weight:800;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.player-page .player-actions button:hover:not(:disabled){background:#ffd84a}
.player-page button:focus-visible,.player-page a:focus-visible,.player-page summary:focus-visible,.player-page select:focus-visible{outline:4px solid var(--sun);outline-offset:4px}
.player-page .player-main{padding:32px 24px}
.player-page #viewport{background:#000;border:14px solid var(--spine);border-left-width:26px;border-left-color:color-mix(in srgb,var(--spine) 70%,black);border-radius:6px 12px 12px 6px;box-shadow:6px 8px 0 rgba(4,20,28,.35)}
.player-page #viewport:fullscreen{border:0;border-radius:0;box-shadow:none}
.player-page #welcome{display:flex;flex-direction:column;align-items:center;max-height:100%}
.player-page .welcome-cover{display:block;width:auto;height:auto;max-width:min(440px,90%);max-height:44vh;aspect-ratio:4/3;object-fit:cover;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.player-page #welcome h1{font-family:Neucha,Nunito,cursive;font-weight:400;font-size:40px;letter-spacing:0;margin:18px 0 4px}
.player-page #welcome p{color:var(--muted);margin:0 0 18px}
.player-page .primary{background:var(--sun);color:#3a2a06;border-radius:999px;font-size:19px;font-weight:800;padding:14px 34px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.player-page .primary:hover:not(:disabled){background:#ffd84a}
.player-page .player-status{color:var(--muted)}
.player-page .diagnostics{color:var(--muted)}
.player-page .diagnostics select,.player-page .diagnostics button{background:var(--paper);color:#203f45;border:0;border-radius:8px}
@media (max-width:600px){.player-page .player-header strong{font-size:22px}.player-page #viewport{border-width:8px;border-left-width:14px}.player-page .welcome-cover{max-height:28vh}.player-page #welcome h1{font-size:30px}}
select,summary,label[for]{cursor:pointer}button:disabled{cursor:not-allowed}
.player-page #welcome[hidden]{display:none}