*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 20% 0,#14667c,transparent 45%),#061d30;color:#e9f7fb;font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,select,.button{font:inherit;color:inherit;border:1px solid #42788d;background:#10394f;border-radius:12px;padding:10px 14px;cursor:pointer}button:hover,.button:hover{border-color:#70f6ed;background:#19566b}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ffe16b;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{background:#ffcd35;color:#092c42;border:0;font-weight:800}.primary:hover{background:#ffdf76}header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 3%;border-bottom:1px solid #25909d;background:#073749b0}.brand{display:flex;align-items:center;gap:18px;font-weight:800;letter-spacing:2px}.brand img{width:82px;height:72px;object-fit:contain}.brand small{display:block;letter-spacing:.5px;font-size:12px;color:#9ad9e3}main{max-width:1800px;padding:24px 3%;margin:auto}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:6px 0 24px}.heading h1{font-size:clamp(30px,4vw,50px);line-height:1.1;margin:10px 0}.heading p{color:#b7dce5;margin:0}.eyebrow{font-size:12px;color:#70f6df;letter-spacing:2px;font-weight:800}.play-layout{display:grid;grid-template-columns:215px minmax(0,1fr) 215px;gap:18px;align-items:start}aside,.stage-wrap,.guide-panel,.menu-card{border:1px solid #2b6177;background:#0a2c40;border-radius:22px;overflow:hidden}aside{padding:20px}h2{font-size:23px;margin:0 0 16px}h3{font-size:18px}label{display:block;font-size:13px;font-weight:600;color:#b5d9e4;margin-bottom:14px}select{width:100%;margin-top:6px;font-size:14px;padding:9px}.settings>button{display:block;width:100%;margin:8px 0}.small{font-size:12px;color:#a4cbd9}.stage{height:clamp(410px,47vw,700px);background:radial-gradient(ellipse,#144860,#082538);position:relative;touch-action:none}.stage canvas{display:block;width:100%;height:100%}.view-tools,.game-tools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px}.view-tools button{font-size:12px;padding:7px 10px}.game-tools:empty,.tray:empty{display:none}.game-tools button.active{background:#ffd24b;color:#082739}.message{padding:0 20px 15px;min-height:52px;color:#91f4e9;text-align:center;margin:5px 0}.metric{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #356174}.score{padding:12px;border-radius:12px;border-left:4px solid var(--c);margin:10px 0;background:#133b50}.score strong{font-size:24px;display:block}.score-panel ol{padding-left:21px;font-size:13px;color:#b6d5e0;max-height:180px;overflow:auto}.tray{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:12px}.piece{padding:5px 8px}.piece.active{border:2px solid #ffe262}.piece svg{display:block;width:58px;height:54px}.piece.used{opacity:.35}.learn{margin:48px 0}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.tabs button{font-size:14px}.tabs .active{background:#ffcf43;color:#07243b}.guide-panel{padding:clamp(20px,3vw,40px)}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.guide-panel p,.guide-panel li{color:#c3e0e9}.guide-panel li{margin-bottom:10px}.lesson{background:#103b51;border:1px solid #306b80;border-radius:18px;padding:22px;margin-bottom:18px}.lesson svg{width:100%;height:220px;display:block;background:#082638;border-radius:12px}.lesson .number{font-size:12px;letter-spacing:2px;color:#6ef5d4}.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.roadmap>div{border-top:4px solid var(--c);padding:20px;background:#12394f;border-radius:12px}dialog{background:#0b354c;color:white;border:1px solid #65dedb;border-radius:24px;padding:40px;width:min(480px,90vw);text-align:center}dialog::backdrop{background:#001523b0}dialog .close{position:absolute;right:12px;top:8px;font-size:24px;padding:0 8px}dialog h2{font-size:30px;margin:20px 0}footer{padding:24px;text-align:center;color:#99bdcb;border-top:1px solid #245365;font-size:13px}.back-top{position:fixed;bottom:20px;right:20px;border-radius:50%;background:#077f93;z-index:10}.menu-intro{max-width:900px;margin:32px 0 40px}.menu-intro h1{font-size:clamp(36px,5vw,64px);line-height:1.1}.menu-intro p{font-size:19px;color:#b1d7e1}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.menu-card img{width:100%;aspect-ratio:1.8;object-fit:cover;display:block}.menu-card .copy{padding:28px}.menu-card h2{font-size:30px}.menu-card p{color:#b2d6e1}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px}.chips span{background:#12495d;color:#aefbec;border-radius:20px;padding:5px 12px;font-size:12px}
@container site69 (max-width:1100px){.play-layout{grid-template-columns:180px minmax(0,1fr)}.score-panel{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center}.score-panel>h3,.score-panel>ol{display:none}#scores{display:flex;gap:12px}.score{min-width:140px}.metric{gap:12px}.stage{height:560px}.roadmap{grid-template-columns:1fr 1fr}}
@container site69 (max-width:700px){header{padding:10px 14px}.brand span{font-size:12px}.brand img{width:56px;height:50px}.brand small{font-size:10px}.heading{align-items:flex-start;flex-direction:column}.play-layout{display:flex;flex-direction:column}.stage-wrap{width:100%;order:0}.settings{width:100%;order:2;display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings h2,.settings .small{grid-column:1/-1}.settings label{margin:0}.settings #specific{display:contents}.score-panel{order:1;width:100%}.stage{height:420px}.guide-grid,.menu-grid{grid-template-columns:1fr}.roadmap{grid-template-columns:1fr 1fr}.guide-panel{padding:16px}.lesson{padding:16px}main{padding:20px 14px}.score{min-width:115px}#scores{flex-wrap:wrap}.tabs button{font-size:12px;padding:8px}.menu-card .copy{padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

[hidden]{display:none!important}.stage canvas{outline:none}#zoomIn{font-family:Arial,sans-serif}

.kat-stage .game-tools{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;width:max-content;max-width:100%;padding:8px;border-radius:16px;background:#082b3ee8;box-shadow:0 6px 25px #0007;border:1px solid #408c9c}.kat-stage .game-tools button{font-weight:750;font-size:14px;padding:9px 14px}.kat-stage .tray{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:max-content;max-width:95%;align-items:center;border-radius:14px;background:#06283de8;pointer-events:none;padding:10px 15px;border:1px solid #356b7c}.selection-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 10px currentColor}.kat-stage .tray .small{display:block}.premium-figure{margin:24px 0 0;border-radius:22px;overflow:hidden;border:1px solid #36889c;background:#041b30}.premium-figure img{display:block;width:100%;height:auto}.premium-figure figcaption{padding:16px 22px;color:#b9e8ec;background:#0a3349}.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step;list-style:none;padding:0}.how-steps li{background:#103e54;border:1px solid #31768a;border-radius:16px;padding:20px;margin:0;counter-increment:step}.how-steps li:before{content:counter(step,decimal-leading-zero);display:block;font-size:28px;font-weight:800;color:#5ae7e5;margin-bottom:10px}.lesson img{display:block;width:100%;aspect-ratio:1.5;object-fit:contain;border-radius:14px;background:#061e32}.lesson{padding:20px;border-color:#327e90;background:linear-gradient(145deg,#123e55,#08283d)}.lesson h3{font-size:23px;margin:8px 0 18px}.lesson .reason{border-left:3px solid #f8cc62;padding:10px 16px;background:#123b4d;color:#e4f3f3}.guide-panel>h2{font-size:30px}.guide-grid{align-items:start}@container site69 (max-width:900px){.how-steps{grid-template-columns:1fr 1fr}}@container site69 (max-width:500px){.kat-stage .game-tools button{padding:8px 10px;font-size:13px}.kat-stage .tray .small{display:none}.how-steps{grid-template-columns:1fr}.premium-figure{border-radius:14px}}

.lesson-picture{position:relative;aspect-ratio:1.5;overflow:hidden;border-radius:14px;background:#061e32}.lesson .lesson-picture img{position:absolute;width:200%;height:200%;max-width:none;aspect-ratio:auto;border-radius:0;object-fit:fill}

.game-intro{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center;margin-bottom:22px;padding:18px;border:1px solid #317b89;border-radius:22px;background:linear-gradient(110deg,#0a3449,#095064)}.game-intro>img{width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:14px}.game-intro h2{margin:5px 0;font-size:25px}.game-intro p{margin:5px 0 12px;color:#c7e6ed}.flow-chips{display:flex;gap:12px;flex-wrap:wrap}.flow-chips span{display:flex;gap:8px;align-items:center;font-size:13px}.flow-chips b,.image-heading span{display:inline-grid;place-items:center;background:#1ae1d5;color:#042a3a;border-radius:50%;width:24px;height:24px}.field-help{display:block;font-size:12px;font-weight:400;line-height:1.45;color:#acd1dd;margin-top:7px}.quick-guide{border-top:1px solid #397289;margin-top:15px;padding-top:2px}.quick-guide p{font-size:13px;color:#bfdee7}.quick-guide button{font-size:12px;width:100%}.palette-swatches{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}.palette-swatches button{display:flex;gap:2px;padding:5px;border-radius:9px}.palette-swatches i{width:13px;height:13px;border-radius:50%;box-shadow:inset -2px -2px 3px #0005}.palette-swatches [aria-pressed=true]{outline:2px solid #ffe06a}.image-heading{position:absolute;top:0;left:0;right:0;padding:10px 15px;display:flex;gap:10px;align-items:center;background:linear-gradient(#041c31f2,#041c3199);font-size:18px;font-weight:800}.image-explain{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(transparent,#031727 30%);color:#fff;line-height:1.4;font-size:15px}.how-picture{position:relative}.how-caption{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(transparent,#021c32ed 18%,#021c32)}.how-caption h3{font-size:28px;margin:4px 0}.how-caption p{margin:8px 0 15px;color:#fff}.image-step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.image-step-row>div{padding:12px;background:#0d4356d9;border:1px solid #2c8794;border-radius:12px;font-size:13px}.image-step-row b{color:#ffda65;display:block;font-size:20px;margin-bottom:4px}.kat-stage .game-tools{gap:5px}.kat-stage .game-tools button{padding:8px 10px}@container site69 (max-width:1100px){.score-panel .quick-guide{width:100%}.quick-guide button{width:auto}}@container site69 (max-width:700px){.game-intro{grid-template-columns:90px 1fr;gap:12px;padding:13px}.game-intro h2{font-size:18px}.game-intro p{font-size:13px}.flow-chips{grid-column:1/-1;gap:8px}.flow-chips span{font-size:11px}.how-caption{position:relative;background:#082f43;padding:18px}.image-step-row{grid-template-columns:1fr 1fr}.image-heading{font-size:14px;padding:7px 10px}.image-explain{font-size:12px;padding:10px 12px}.kat-stage .game-tools button{font-size:11px;padding:7px}.game-intro .eyebrow{font-size:10px}}

.portal-links{display:flex;flex-wrap:wrap;gap:10px}.portal-links a{color:#d9fff5;text-decoration:none;padding:9px 12px;border:1px solid #5cafa7;border-radius:12px}.portal-links a:hover{background:#1a6c72}

body[data-game-kind="quoridor"] .stage{height:clamp(360px,40vw,560px)}
body[data-game-kind="quoridor"] .stage-wrap{display:grid;grid-template-rows:auto 1fr auto;align-items:start}
body[data-game-kind="quoridor"] .settings .game-tools{margin-top:8px;justify-content:stretch;padding:0}
body[data-game-kind="quoridor"] .settings .game-tools button{flex:1 1 100%;width:100%;font-weight:700}
body[data-game-kind="quoridor"] .settings #specific{margin-bottom:6px}
body[data-game-kind="katamino"] .kat-stage{padding-top:88px;padding-bottom:74px}
body[data-game-kind="katamino"] .kat-stage .game-tools{top:14px;left:auto;right:14px;transform:none;max-width:calc(100% - 28px);justify-content:flex-end}
body[data-game-kind="katamino"] .kat-stage .tray{bottom:auto;top:14px;left:14px;transform:none;max-width:min(44%,360px);justify-content:flex-start;pointer-events:auto}
body[data-game-kind="katamino"] .kat-stage .tray .small{white-space:nowrap}
@container site69 (max-width:900px){body[data-game-kind="quoridor"] .settings .game-tools button{font-size:12px;padding:8px 10px}body[data-game-kind="katamino"] .kat-stage{padding-top:126px}body[data-game-kind="katamino"] .kat-stage .game-tools{left:14px;right:14px;justify-content:center}body[data-game-kind="katamino"] .kat-stage .tray{top:72px;max-width:calc(100% - 28px)}}
@container site69 (max-width:560px){body[data-game-kind="quoridor"] .settings .game-tools{gap:6px}body[data-game-kind="katamino"] .kat-stage{padding-top:140px;padding-bottom:64px}body[data-game-kind="katamino"] .kat-stage .tray{top:78px}}