:root{font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#293d32;background:#f9faf5;font-synthesis:none;--ink:#293d32;--green:#527445;--line:#e0e4d9;--muted:#7a857b;--paper:#f9faf5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #6a965a;outline-offset:5px}button{touch-action:manipulation}[hidden]{display:none!important}.wrap{max-width:1200px;margin:0 auto;padding-left:28px;padding-right:28px}.site-header{height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-size:20px;letter-spacing:-.7px;font-weight:900;line-height:1.4}.brand-light{font-weight:500}.brand small{display:block;font-size:9px;letter-spacing:3px;font-weight:600;color:#77866e;margin-top:2px}.site-header nav{display:flex;align-items:center;gap:31px}.nav-link{font-size:13px;border:0;background:none;padding:10px 0;color:#647163}.nav-link:hover{color:#254a25}.sound-button{display:flex;align-items:center;gap:8px;font-size:12px;border:1px solid #dce3d5;background:#eef2e7;padding:9px 15px;border-radius:30px}.sound-button span:first-child{font-size:18px}.hero{display:grid;grid-template-columns:1.13fr 1fr;align-items:center;min-height:465px;padding-top:26px;padding-bottom:28px}.hero-copy{position:relative;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.5px;background:#eef1e5;color:#657657;border:1px solid #e2e7d8;border-radius:30px;padding:7px 11px}.live-dot{display:inline-block;width:6px;height:6px;background:#7e9c5e;border-radius:50%;flex-shrink:0}.hero h1{font-size:46px;line-height:1.48;letter-spacing:-2.3px;font-weight:900;margin:19px 0 18px;position:relative;width:fit-content}.green-text{color:#75904e}.title-scribble{position:absolute;width:148px;right:4px;bottom:-9px;fill:none;stroke:#b5c494;stroke-width:3;stroke-linecap:round}.hero-description{font-size:14px;line-height:1.95;color:#7e877d;margin:0 0 27px}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;border:1px solid var(--ink);background:var(--ink);color:white;padding:13px 24px;font-size:13px;border-radius:8px;transition:transform .16s,background .16s;box-shadow:0 3px 0 #15271a}.primary-button:hover{background:#456340;transform:translateY(-2px)}.primary-button:active{transform:translateY(1px);box-shadow:none}.primary-button span{font-size:21px;line-height:1}.hero-note{font-size:11px;color:#8b9286;margin-left:17px}.hero-art{height:390px;position:relative;isolation:isolate}.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}.hero-circle{position:absolute;background:#ebefdb;border-radius:50%;width:320px;height:320px;right:55px;top:38px;z-index:-1}.speech-bubble{position:absolute;right:0;top:30px;z-index:2;border:1px solid #d7ddcc;background:#fffdf5;border-radius:15px 15px 15px 0;padding:15px 20px;transform:rotate(7deg);font-size:13px;line-height:1.6}.art-sticker{position:absolute;bottom:30px;left:29px;z-index:2;width:96px;height:96px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px dashed #b0ba98;border-radius:50%;background:#f3edcb;color:#7b7b53;transform:rotate(-13deg);font-size:10px;line-height:1.9;box-shadow:inset 0 0 0 5px #f9f5dc}.art-sticker b{font-size:17px;font-weight:800}.hero-star{position:absolute;color:#8a9a66;font-size:34px}.star-one{top:20px;left:42px}.star-two{bottom:27px;right:40px;font-size:27px}.games-section{padding-top:19px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:25px;gap:16px}.section-kicker{font-size:9px;font-weight:600;letter-spacing:2.6px;color:#95a087}.section-heading h2{font-size:26px;letter-spacing:-.8px;font-weight:800;margin:9px 0 0}.section-note{font-size:11px;color:#8b9384;padding-bottom:3px;white-space:nowrap}.section-note span:not(.live-dot){margin:0 9px;color:#bdc3b1}.section-note .live-dot{margin-right:6px}.game-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.game-card{display:block;text-align:left;border:1px solid #dee4d6;border-radius:13px;background:#fffef9;padding:0;overflow:hidden;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s}.game-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px #2e472914;border-color:#99b083}.game-card.selected{border-color:#98af7d;box-shadow:0 0 0 1px #98af7d}.card-art{height:190px;position:relative;overflow:hidden}.card-art canvas{width:100%;height:100%;object-fit:cover}.flappy-art{background:#dcebd9}.angry-art{background:#f6e8cd}.whack-art{background:#e9e6f4}.card-badge{position:absolute;top:13px;left:13px;padding:5px 9px;background:#ffffffba;border:1px solid #ffffffaa;font-size:10px;border-radius:5px;backdrop-filter:blur(3px);color:#596a4b}.flappy-art .card-badge{background:#eff4d5;color:#657641}.art-caption{position:absolute;right:13px;bottom:13px;font-size:10px;color:#4e654dcc;letter-spacing:1px}.card-copy{padding:19px 20px 15px}.card-title{display:flex;align-items:center;justify-content:space-between}.card-title h3{font-size:19px;font-weight:800;letter-spacing:-.5px;margin:0}.card-arrow{width:29px;height:29px;border:1px solid #e2e6d9;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#748568;transition:background .2s}.game-card:hover .card-arrow{background:#dce8cc}.card-copy p{font-size:11px;margin:9px 0 19px;color:#8a9184}.card-meta{border-top:1px dashed #e5e7de;padding-top:12px;display:flex;justify-content:space-between;font-size:10px;color:#909783}.card-meta>span:first-child{background:#f1f3e9;padding:3px 7px;border-radius:4px;color:#7d886a}.difficulty{display:flex;align-items:center;gap:4px}.difficulty i{width:5px;height:5px;border-radius:50%;background:#97aa7a}.difficulty i:first-child{margin-left:3px}.difficulty i.dim{background:#e2e6d6}.arcade-section{padding-top:68px}.arcade-layout{display:grid;grid-template-columns:minmax(0,1fr) 246px;gap:24px}.player-window{background:white;border:1px solid #dae1d4;border-radius:12px;overflow:hidden;box-shadow:0 5px 18px #33472905;align-self:start}.player-toolbar{height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #e4e9dc;background:#fffef9}.player-label{display:flex;align-items:center;gap:9px;font-size:12px}.player-label strong{font-weight:600}.player-label>span:last-child{font-size:9px;color:#a0a795;margin-left:9px;letter-spacing:1px}.player-actions{display:flex;align-items:center;gap:8px}.player-actions button{border:1px solid #e6e9df;background:#f7f8f2;border-radius:5px;width:29px;height:28px;font-size:20px;display:grid;place-items:center;line-height:1;padding:0}.player-actions #pause-button{font-size:13px}.player-actions button:hover:not(:disabled){background:#e8eedc}.canvas-stage{position:relative;aspect-ratio:12/7;background:#e5f0de;overflow:hidden;display:flex;align-items:center;justify-content:center}#game-canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;outline-offset:-4px}.game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f2f7ed30;backdrop-filter:blur(2px);padding:14px}.overlay-card{background:#fffff7ed;box-shadow:0 12px 50px #33472912;border:1px solid #fff;border-radius:15px;max-width:405px;text-align:center;padding:31px 35px 24px}.overlay-kicker{font-size:9px;letter-spacing:2px;color:#859975;font-weight:600}.overlay-card h3{font-size:23px;font-weight:800;letter-spacing:-.8px;margin:11px 0}.overlay-card p{color:#818d78;font-size:12px;line-height:1.8;margin:0 0 22px}.overlay-hint{display:block;font-size:9px;color:#a0aa96;margin-top:16px;letter-spacing:.6px}.result-score{margin:-10px 0 19px}.result-score strong{display:block;font-size:37px;line-height:1.1;color:#597342}.result-score span{font-size:10px;color:#91a181}.player-footer{height:40px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fffef9;border-top:1px solid #e7eadf;font-size:10px;color:#909b83}.player-footer>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-score{white-space:nowrap}.session-score strong{font-size:16px;color:#506745;margin-left:5px;font-weight:700}.game-sidebar{display:flex;flex-direction:column;gap:16px}.how-card{background:#f0f3e9;border:1px solid #e3e8da;padding:20px;border-radius:11px}.small-label{font-size:10px;color:#83936d;letter-spacing:1px}.how-card h3{font-size:16px;margin:12px 0 11px;font-weight:700;letter-spacing:-.5px}.how-card>p:not(.control-description){font-size:11px;color:#8b957f;line-height:1.9;margin:0 0 19px}.control-row{display:flex;align-items:center;gap:11px;margin:14px 0}.control-icon{display:grid;place-items:center;border:1px solid #dfe5d4;border-radius:6px;width:31px;height:31px;background:#fafbf4;font-size:19px}.control-row strong{display:block;font-size:11px;font-weight:600}.control-row div>span{display:block;font-size:9px;color:#98a18b;margin-top:4px}.control-description{font-size:9px;color:#98a18b;line-height:1.8;margin:17px 0}.best-score{border-top:1px dashed #d7dfca;margin-top:16px;padding-top:15px;display:flex;align-items:center;justify-content:space-between}.best-score div>span{font-size:10px;color:#95a083;display:block}.best-score strong{display:block;font-size:30px;line-height:1.3;margin-top:3px;font-weight:700;color:#647d4a}.best-score small{font-size:10px;font-weight:400}.trophy{font-size:31px;color:#b5bd96}.frog-note{position:relative;border:1px solid #e7e8db;background:#f6f3e6;border-radius:10px;padding:15px 18px}.frog-note>span{font-size:9px;color:#aaa186}.frog-note p{font-size:11px;color:#87836d;line-height:1.9;margin:7px 0 0}.frog-note img{position:absolute;bottom:13px;right:15px;transform:rotate(11deg);opacity:.75}.arcade-footnote{font-size:10px;color:#a1a88f;margin:19px 0 0;text-align:center;letter-spacing:.3px}.arcade-footnote span{margin:0 9px}.closing-note{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:65px;margin-bottom:43px}.closing-note>span:first-child{font-size:30px;color:#b1bf8f}.closing-note p{font-size:13px;color:#859173}.closing-note strong{font-weight:600;color:#657451}.closing-small{font-size:8px;letter-spacing:1.7px;color:#aab199;border-left:1px solid #dfe4d5;padding-left:17px}.site-footer{border-top:1px solid var(--line);padding-top:23px;padding-bottom:25px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#9ba38f}.site-footer a:hover{color:#526b40}.footer-frog{font-size:19px;color:#9db47a;margin-left:10px}dialog{border:1px solid #d7e0cc;border-radius:18px;background:#fffef7;color:var(--ink);padding:35px;max-width:500px;width:calc(100% - 32px);box-shadow:0 20px 100px #25392030}dialog::backdrop{background:#21321a55;backdrop-filter:blur(3px)}dialog h2{font-size:26px}dialog ul{padding-left:18px}dialog li{padding-left:3px;margin-bottom:20px}dialog li strong{font-size:14px}dialog li p,.dialog-note{font-size:12px;line-height:1.8;color:#7b876f}.dialog-note{border-top:1px solid #e5e9dd;padding-top:16px;margin-bottom:20px}.dialog-close{position:absolute;right:15px;top:12px;background:none;border:0;font-size:26px;color:#88947b}.toast{position:fixed;z-index:10;bottom:24px;left:50%;transform:translateX(-50%);background:#293d32;color:white;padding:12px 20px;border-radius:8px;box-shadow:0 5px 30px #26322425;font-size:12px;max-width:calc(100% - 32px);width:max-content}.skip-link{position:fixed;left:20px;top:-60px;z-index:100;padding:12px;background:#fff}.skip-link:focus{top:10px}.noscript{padding:30px;background:#fff2bc;text-align:center}.player-window:fullscreen{border:0;border-radius:0;display:flex;flex-direction:column;background:#1d2d24;max-height:100dvh}.player-window:fullscreen .canvas-stage{flex:1;min-height:0;aspect-ratio:auto}.player-window:fullscreen #game-canvas{max-height:100%;width:100%;height:100%;object-fit:contain}.player-window:fullscreen .player-toolbar,.player-window:fullscreen .player-footer{flex-shrink:0}.player-window:fullscreen .overlay-card{padding:36px 45px}.player-window:fullscreen .overlay-card h3{font-size:26px}
@media(min-width:1400px){.hero{min-height:500px}.hero h1{font-size:50px}.hero-art{height:415px}.hero-circle{width:340px;height:340px}.card-art{height:195px}}
@media(max-width:1000px){.hero h1{font-size:39px}.hero-art{height:330px}.hero-circle{width:270px;height:270px;right:25px}.speech-bubble{font-size:11px;right:0;top:10px;padding:10px 13px}.art-sticker{left:2px;bottom:10px;width:79px;height:79px}.hero-note{display:block;margin:13px 0 0;font-size:10px}.hero{min-height:420px}.card-art{height:160px}.game-cards{gap:16px}.card-copy{padding:16px}.card-title h3{font-size:18px}.arcade-layout{grid-template-columns:minmax(0,1fr) 220px;gap:17px}.how-card{padding:16px}.overlay-card{padding:23px}.overlay-card h3{font-size:20px}.game-sidebar{gap:12px}.frog-note{padding:13px}.hero-description{font-size:13px}}
@media(max-width:760px){.wrap{padding-left:20px;padding-right:20px}.site-header{height:82px}.brand{font-size:18px}.brand img{width:37px;height:37px}.brand small{font-size:8px;letter-spacing:2.4px}.site-header nav{gap:18px}.nav-link{font-size:11px}.sound-button{padding:6px 10px;font-size:10px}.sound-button span:first-child{font-size:16px}.hero{grid-template-columns:1.1fr 1fr;min-height:355px;padding-top:35px;padding-bottom:30px;gap:0}.hero h1{font-size:31px;letter-spacing:-1.7px;margin:15px 0}.hero-description{font-size:11px;margin-bottom:19px}.eyebrow{font-size:9px;padding:6px 9px;letter-spacing:.5px}.hero-art{height:280px;margin-left:-20px}.hero-circle{width:220px;height:220px;right:8px;top:28px}.speech-bubble{top:3px;padding:8px 10px;font-size:9px}.art-sticker{width:66px;height:66px;left:18px;bottom:0;font-size:8px}.art-sticker b{font-size:12px}.star-one{top:8px;left:20px;font-size:25px}.star-two{bottom:0;right:0;font-size:22px}.title-scribble{width:102px}.hero-note{font-size:9px}.primary-button{font-size:12px;padding:11px 20px;gap:20px}.section-heading h2{font-size:23px}.section-kicker{font-size:8px;letter-spacing:2px}.section-note{font-size:9px}.game-cards{gap:13px}.card-art{height:133px}.card-badge{font-size:8px;padding:4px 6px;top:9px;left:9px}.art-caption{display:none}.card-copy{padding:12px}.card-title h3{font-size:16px}.card-arrow{width:24px;height:24px;font-size:16px}.card-copy p{font-size:10px;line-height:1.8;margin:8px 0 13px;min-height:36px}.card-meta{font-size:8px}.difficulty{gap:3px}.difficulty i{height:4px;width:4px}.arcade-section{padding-top:46px}.arcade-layout{grid-template-columns:1fr}.game-sidebar{display:grid;grid-template-columns:1.7fr 1fr;gap:17px}.how-card{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.small-label,.how-card h3,.how-card>p:not(.control-description){grid-column:1/-1}.how-card>p:not(.control-description){margin-bottom:3px}.how-card h3{margin:8px 0}.control-row{margin:12px 0}.control-description{grid-column:1/-1;margin:0}.best-score{grid-column:1/-1;padding-top:12px;margin-top:12px}.best-score div{display:flex;gap:14px;align-items:center}.best-score strong{font-size:22px;margin:0}.trophy{font-size:24px}.frog-note{padding:20px;display:flex;flex-direction:column;justify-content:center}.frog-note p{font-size:12px}.frog-note img{bottom:20px;right:20px;width:46px;height:46px}.closing-note{margin-top:40px;margin-bottom:28px;gap:10px}.closing-small{display:none}.site-footer{font-size:9px}.overlay-card{max-width:390px}.overlay-card h3{font-size:24px}.overlay-card p{font-size:12px}}
@media(max-width:520px){.wrap{padding-left:18px;padding-right:18px}.site-header{height:76px}.brand{font-size:16px;gap:8px}.brand img{width:33px;height:33px}.brand small{font-size:7px}.site-header nav{gap:12px}.nav-link:first-child{display:none}.sound-button{font-size:10px;padding:5px 9px}.hero{display:block;padding-top:32px;padding-bottom:5px}.hero-copy{text-align:center}.hero h1{font-size:35px;letter-spacing:-1.5px;margin:15px auto 20px}.hero-description{font-size:12px}.hero-note{display:inline;margin-left:10px;font-size:9px}.hero-art{height:262px;width:340px;max-width:100%;margin:6px auto 0}.hero-circle{width:240px;height:240px;top:10px;right:43px}.speech-bubble{top:15px;right:0;font-size:10px}.art-sticker{left:15px;bottom:12px;width:73px;height:73px}.star-one{left:15px;top:22px}.star-two{right:12px;bottom:22px}.games-section{padding-top:29px}.section-heading{margin-bottom:19px;gap:8px}.section-heading h2{font-size:22px}.section-note{font-size:8px}.section-note span:not(.live-dot){margin:0 3px}.game-cards{grid-template-columns:1fr;gap:13px}.game-card{display:grid;grid-template-columns:40% 1fr;min-height:147px;border-radius:11px}.card-art{height:100%;min-height:147px}.card-art canvas{object-fit:cover}.card-badge{font-size:8px;left:8px;top:8px}.card-copy{padding:16px 14px 13px}.card-title h3{font-size:18px}.card-copy p{font-size:10px;margin:7px 0 12px;min-height:32px}.card-meta{font-size:9px;padding-top:10px}.arcade-section{padding-top:37px}.arcade-section .section-heading .section-note{display:none}.player-toolbar{padding:0 10px;height:45px}.player-label{font-size:11px;gap:6px}.player-label>span:last-child{font-size:8px;margin-left:5px}.player-actions{gap:5px}.player-actions button{width:27px;height:26px}.overlay-card{max-width:280px;padding:13px 16px;border-radius:10px}.overlay-kicker{font-size:7px;letter-spacing:1px}.overlay-card h3{font-size:17px;margin:5px 0 7px}.overlay-card p{font-size:10px;margin-bottom:11px;line-height:1.65}.overlay-card .primary-button{font-size:10px;padding:8px 16px}.overlay-hint{display:none}.player-footer{padding:0 9px;font-size:8px;height:33px}.session-score strong{font-size:13px}.game-sidebar{grid-template-columns:1fr;gap:12px}.how-card{padding:16px 18px;grid-template-columns:1fr 1fr;gap:0 10px}.small-label{font-size:9px}.how-card h3{font-size:15px;margin:7px 0}.how-card>p:not(.control-description){font-size:10px}.frog-note{display:none}.control-row{gap:9px;margin:10px 0}.control-row strong{font-size:10px}.control-row div>span{font-size:9px}.control-description{font-size:8px}.best-score{padding-top:10px;margin-top:10px}.best-score div>span{font-size:9px}.arcade-footnote{font-size:8px;line-height:1.8}.arcade-footnote span{margin:0 4px}.result-score{display:flex;align-items:center;justify-content:center;gap:8px;margin:-5px 0 8px}.result-score strong{font-size:27px}.result-score span{font-size:9px}.closing-note p{font-size:11px}.closing-note>span:first-child{font-size:25px}.site-footer{font-size:8px;gap:10px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}.site-footer>span:nth-child(2){display:none}.player-window:fullscreen .overlay-card{padding:20px 30px}.player-window:fullscreen .overlay-card h3{font-size:20px}}
:root{font-family:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif}.frog-note p{padding-right:25px}.hero-description,.card-copy p,.how-card>p:not(.control-description),.overlay-card p{color:#707e65}.card-meta,.arcade-footnote{color:#7c896b}
@media(max-width:520px){.angry-art canvas{object-position:left center}.site-footer>span:nth-child(2){display:block;order:3;flex-basis:100%;padding-top:4px}.site-footer{justify-content:space-between}.control-row div>span{line-height:1.65}.card-copy p{min-height:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* The expanded collection and in-game controls. */
.game-cards { row-gap: 25px; }
.new-arrivals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 13px 17px; background: #eff3e5; border: 1px solid #dee5cc; border-radius: 10px; margin-bottom: 20px; }
.new-arrivals strong { color: #69814f; font-size: 11px; margin-right: auto; }
.new-arrivals button { padding: 6px 10px; border: 1px solid #d5dfc2; border-radius: 6px; background: #fffef7; font-size: 11px; color: #536a42; }
.new-arrivals button:hover { background: #dfe9cd; }
.catch-art { background: #dceef1; }
.jump-art { background: #f1e0e8; }
.merge-art { background: #f2ebca; }
.fighter-art { background: #f1ded1; }
.survivor-art { background: #dbe6d9; }
.bomber-art { background: #e7dff0; }
.new-badge { color: #546f59; font-weight: 600; }
.game-settings { display: flex; align-items: center; gap: 20px; margin: -4px 0 17px; flex-wrap: wrap; }
.game-settings label { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #7b886c; }
.game-settings select { font: inherit; color: #3d5637; font-weight: 600; border: 1px solid #d5dfc8; border-radius: 7px; padding: 8px 25px 8px 10px; background: #fffef8; cursor: pointer; }
.settings-note { font-size: 10px; color: #849173; margin-left: auto; }
.cast-settings { display: grid; grid-template-columns: minmax(0,1fr) minmax(255px,.7fr); gap: 24px; margin: -3px 0 24px; padding: 18px 22px 12px; background: #f0f3e9; border: 1px solid #dce4d2; border-radius: 12px; }
.cast-picker { min-width: 0; }
.cast-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 14px; margin-bottom: 9px; }
.cast-heading .section-kicker { font-size: 8px; letter-spacing: 1.4px; }
.cast-heading h3 { margin: 0; font-size: 13px; font-weight: 500; color: #66775b; }
.cast-heading h3 strong { color: #3c6039; font-weight: 800; }
.cast-choices { display: grid; grid-template-columns: repeat(4,minmax(0,84px)); gap: 9px; }
.cast-choice { min-width: 0; padding: 3px 5px 8px; border: 1px solid #d5decb; border-radius: 9px; background: #fdfef7; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #798570; }
.cast-choice canvas { display: block; width: 60px; height: 60px; max-width: 100%; object-fit: contain; }
.cast-choice span { font-size: 11px; font-weight: 600; }
.cast-choice[aria-pressed="true"] { border-color: #648657; background: #e1ebd3; box-shadow: inset 0 0 0 1px #648657; color: #3d663a; }
.cast-choice:hover { border-color: #79946a; }
.cast-note { min-height: 15px; margin: 8px 0 0; color: #7d8b70; font-size: 10px; line-height: 1.7; }
.section-note #cast-ready-name { margin: 0; color: inherit; }
.voice-settings { min-width: 0; align-self: center; border-left: 1px solid #d8e1cc; padding-left: 24px; }
.voice-settings label { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 11px; color: #6b7e5b; font-weight: 600; }
.voice-settings select { min-width: 0; max-width: 100%; font: inherit; color: #46613d; border: 1px solid #cdd9c0; border-radius: 6px; background: #fcfdf7; padding: 7px 10px; }
.voice-previews { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.voice-previews button { min-height: 34px; padding: 6px 10px; border: 1px solid #d2dcc6; border-radius: 6px; background: #fcfdf5; color: #667d52; font-size: 10px; }
@media(max-width:600px) {
  .cast-settings { grid-template-columns: minmax(0,1fr); gap: 13px; padding: 13px 12px 12px; }
  .cast-heading { gap: 5px; }
  .cast-heading .section-kicker { display: none; }
  .cast-heading h3 { font-size: 12px; }
  .cast-choices { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .cast-choice { padding: 2px 2px 7px; }
  .cast-choice canvas { width: 56px; height: 56px; }
  .voice-settings { border-left: 0; border-top: 1px solid #d8e1cc; padding: 12px 0 0; }
  .voice-previews { margin-top: 8px; gap: 6px; }
  .voice-previews button { min-height: 44px; padding: 7px 9px; }
  .voice-settings select { min-height: 40px; }
  .cast-note { font-size: 9px; }
}
.level-panel, .forms-panel { padding: 17px; background: #fffdf3; border: 1px solid #e1e6d4; border-radius: 11px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.panel-heading h3 { margin: 0; font-size: 13px; font-weight: 700; }
.panel-heading>span { color: #8c986e; font-size: 9px; white-space: nowrap; }
.level-panel p, .forms-panel>p { color: #82916e; font-size: 10px; line-height: 1.7; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.level-grid button { border: 1px solid #dce4cd; background: #f4f7e9; border-radius: 7px; min-height: 45px; padding: 6px 2px 4px; font-size: 13px; font-weight: 700; }
.level-grid button span { display: block; font-size: 8px; letter-spacing: .8px; color: #baa957; margin-top: 1px; }
.level-grid button[aria-pressed="true"] { background: #425d3b; color: #fff; border-color: #425d3b; }
.level-grid button:disabled { opacity: .45; color: #929c85; background: #f4f4ec; }
.level-panel .selected-level { margin-bottom: 0; min-height: 34px; color: #65784f; }
.forms-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; margin-top: 13px; }
.forms-list>div { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #647654; }
.forms-list b { min-width: 32px; border-radius: 4px; font-size: 9px; padding: 3px 2px; text-align: center; color: #4d603c; }
.player-window.puzzle-mode .canvas-stage { aspect-ratio: 1.4; background: #f2f3e9; }
.puzzle-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 17px; background: #fcfcf4; border-top: 1px solid #e4e9d7; }
.puzzle-controls button { border: 1px solid #d8e1c8; background: #eff3e4; padding: 7px 11px; border-radius: 6px; font-size: 11px; }
.direction-pad { display: flex; gap: 6px; }
.direction-pad button { min-width: 33px; font-size: 17px; line-height: 1.1; }
.puzzle-controls>span { font-size: 9px; color: #899678; }
.game-sidebar:has(.level-panel:not([hidden])) .frog-note, .game-sidebar:has(.forms-panel:not([hidden])) .frog-note { display: none; }
.player-window:fullscreen.puzzle-mode .canvas-stage { aspect-ratio: auto; }
.action-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: #fcfcf4; border-top: 1px solid #e4e9d7; touch-action: none; user-select: none; }
.action-dpad { display: grid; grid-template: repeat(2, 43px) / repeat(3, 48px); gap: 5px; }
.action-buttons { display: grid; grid-template-columns: repeat(2, minmax(62px, 1fr)); gap: 7px; }
.action-buttons:has(button:only-child) { grid-template-columns: 95px; }
.action-controls button { border: 1px solid #d2dcc6; background: #edf2e3; border-radius: 9px; min-height: 43px; padding: 5px 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.action-controls button strong { font-size: 13px; font-weight: 700; }
.action-controls button small { display: block; font-size: 9px; margin-top: 1px; color: #758566; }
.action-controls button.held { background: #547447; color: #fff; transform: translateY(1px); border-color: #547447; }
.action-controls button.held small { color: #e7efdf; }
.action-buttons button[data-action="special"], .action-buttons button[data-action="bomb"] { background: #f4e4c6; border-color: #decbab; }
.action-buttons button.held { background: #547447; }
.action-hint { white-space: pre-line; text-align: center; color: #8c987c; font-size: 10px; line-height: 1.9; }
.duel-guide { margin: 0; padding: 10px 16px; border-top: 1px solid #e4e9d7; color: #7c6a80; background: #f5f0f6; font-size: 11px; line-height: 1.8; }
.fighter-controls .action-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 230px; }
.fighter-controls .action-buttons button { min-width: 0; }
.fighter-guide { border-top: 1px solid #e4e9d7; background: #faf9ef; font-size: 11px; }
.fighter-guide summary { cursor: pointer; padding: 12px 16px; color: #65764d; font-weight: 700; }
.fighter-guide-content { padding: 0 16px 12px; line-height: 1.8; }
.fighter-guide-content p { margin: 6px 0; }
.fighter-guide-note { color: #8c937c; font-size: 10px; }
.fighter-training { padding: 12px 16px; background: #f0f5e9; border-top: 1px solid #dae4cf; }
.training-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11px; }
.training-tools label { display: flex; gap: 5px; align-items: center; }
.training-tools select, .training-tools button { font: inherit; border: 1px solid #cbd8bd; border-radius: 5px; background: #fffdf6; padding: 5px 7px; }
.fighter-training p, .fighter-training output { font-size: 10px; color: #6d7e5e; line-height: 1.8; margin: 8px 0 0; display: block; }
.fighter-training output { white-space: pre-line; }
.upgrade-panel { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 24px; background: #f5f1df; overflow: auto; }
.upgrade-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin: 0 auto 12px; width: 100%; max-width: 640px; }
.upgrade-heading strong { font-size: 13px; color: #6d6239; }
.upgrade-heading span { font-size: 10px; color: #958650; }
.upgrade-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; width: 100%; max-width: 640px; margin: 0 auto; }
.upgrade-options button { padding: 13px; background: #fffdf4; border: 1px solid #ddd3ad; border-radius: 8px; text-align: left; }
.upgrade-options button:hover { background: #eef3de; border-color: #98ad7d; }
.upgrade-options b { display: block; font-size: 12px; margin-bottom: 7px; }
.upgrade-options span { display: block; font-size: 10px; line-height: 1.7; color: #83906a; }
.player-window:fullscreen .action-controls, .player-window:fullscreen .upgrade-panel, .player-window:fullscreen .duel-guide { flex-shrink: 0; }
.player-window:fullscreen.fighter-mode .fighter-guide,
.player-window:fullscreen.fighter-mode .fighter-training,
.player-window:fullscreen.fighter-mode .duel-guide { display: none; }
@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  .player-window:fullscreen.fighter-mode { display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: 40px minmax(0, 1fr) 32px; height: 100dvh; }
  .player-window:fullscreen.fighter-mode .player-toolbar { grid-area: 1 / 1 / 2 / 3; height: 40px; }
  .player-window:fullscreen.fighter-mode .canvas-stage { grid-area: 2 / 1; min-width: 0; }
  .player-window:fullscreen.fighter-mode .action-controls { grid-area: 2 / 2; min-height: 0; flex-direction: column; justify-content: center; gap: 8px; padding: 8px; overflow: auto; border-left: 1px solid #e4e9d7; border-top: 0; }
  .player-window:fullscreen.fighter-mode .action-hint { display: none; }
  .player-window:fullscreen.fighter-mode .action-buttons { width: 100%; flex: 0; }
  .player-window:fullscreen.fighter-mode .player-footer { grid-area: 3 / 1 / 4 / 3; height: 32px; }
}
@media(max-width:760px) {
  .game-sidebar:has(.level-panel:not([hidden])), .game-sidebar:has(.forms-panel:not([hidden])) { grid-template-columns: 1fr 1fr; }
  .game-settings { gap: 12px; }
  .settings-note { display: none; }
  .forms-panel, .level-panel { align-self: start; }
}
@media(max-width:520px) {
  .game-cards { gap: 13px; }
  .new-arrivals { padding: 12px; gap: 7px; }
  .new-arrivals strong { flex-basis: 100%; margin-bottom: 2px; }
  .new-arrivals button { font-size: 10px; padding: 6px 8px; }
  .game-settings { gap: 10px; margin-bottom: 13px; }
  .game-settings label { gap: 6px; font-size: 10px; }
  .game-settings select { padding: 7px 17px 7px 7px; font-size: 10px; }
  .game-sidebar:has(.level-panel:not([hidden])), .game-sidebar:has(.forms-panel:not([hidden])) { grid-template-columns: 1fr; }
  .level-grid { grid-template-columns: repeat(6, 1fr); }
  .forms-list { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .player-window.puzzle-mode .canvas-stage { aspect-ratio: 7 / 8; }
  .puzzle-controls { padding: 9px; gap: 6px; }
  .puzzle-controls>span { display: none; }
  .puzzle-controls button { font-size: 11px; padding: 9px; }
  .direction-pad button { font-size: 18px; min-width: 36px; }
  .merge-art canvas { object-position: 73% center; }
  .action-controls { padding: 10px; gap: 8px; }
  .action-dpad { grid-template: repeat(2, 44px) / repeat(3, 42px); gap: 4px; }
  .action-buttons { grid-template-columns: repeat(2, 65px); gap: 5px; }
  .action-controls button { padding: 5px 7px; }
  .action-hint { display: none; }
  .fighter-controls .action-buttons { width: auto; flex: 1; gap: 4px; }
  .fighter-controls .action-dpad { flex-shrink: 0; }
  .fighter-controls .action-buttons button { padding: 5px 3px; }
  .fighter-controls .action-buttons strong { font-size: 11px; }
  .fighter-controls .action-buttons small { font-size: 8px; }
  .fighter-training { padding: 10px; }
  .duel-guide { font-size: 10px; padding: 9px 12px; }
  .upgrade-panel { padding: 12px; justify-content: start; }
  .upgrade-heading { align-items: start; flex-direction: column; gap: 4px; margin-bottom: 8px; }
  .upgrade-options { gap: 6px; }
  .upgrade-options button { padding: 10px 8px; }
  .upgrade-options b { font-size: 11px; }
  .upgrade-options span { font-size: 10px; }
  .fighter-art canvas, .survivor-art canvas, .bomber-art canvas { object-fit: contain; }
}

.leaderboard-result-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #f5edd8; color: #82744b; font-size: 11px; line-height: 1.6; }
.leaderboard-result-bar button { flex-shrink: 0; padding: 7px 10px; border: 1px solid #cfcca9; border-radius: 7px; background: #fffdf0; color: #657144; font-size: 11px; }
.player-window:fullscreen .leaderboard-result-bar { display: none; }

/* Aim training keeps the arcade frame and opens a focused, dark shooting range. */
.aim-art { background: #172d32; }
.aim-art .art-caption { color: #b7d3c0; }
.aim-card .card-title h3 { font-size: 17px; }
.aim-settings { margin: 0 0 18px; padding: 17px 20px; border: 1px solid #d6e1d0; background: #f0f5eb; border-radius: 10px; }
.aim-setting-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.aim-setting-title strong { color: #385d48; font-size: 12px; letter-spacing: .6px; }
.aim-setting-title span { color: #82977a; font-size: 10px; }
.aim-setting-controls { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.aim-setting-controls label { display: flex; align-items: center; gap: 9px; color: #64795b; font-size: 11px; }
.aim-setting-controls select { min-height: 36px; padding: 7px 10px; border: 1px solid #d4dfc7; border-radius: 7px; background: #fffef8; color: #38563c; font: inherit; }
#aim-sensitivity { width: 110px; accent-color: #598064; }
#aim-sensitivity-value { min-width: 38px; font-variant-numeric: tabular-nums; }
#aim-control-note { margin: 12px 0 0; color: #7c8f72; font-size: 10px; line-height: 1.8; }
.aim-mode .canvas-stage { background: #12242c; }
.aim-mode #game-canvas { cursor: crosshair; }
.aim-mode.aim-locked #game-canvas { cursor: none; }
.player-actions #aim-finish { width: auto; padding: 0 8px; font-size: 10px; color: #4c7255; }
.aim-results { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 0 0 16px; text-align: left; }
.aim-results div { border-radius: 6px; background: #eef3e6; padding: 8px 11px; }
.aim-results dt { color: #8b9c7b; font-size: 9px; }
.aim-results dd { margin: 4px 0 0; color: #4c6b46; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aim-mode .game-overlay { overflow: auto; }
.aim-mode .overlay-card { max-width: 460px; }
.aim-mode .overlay-card p { white-space: pre-line; }

/* The card table uses native buttons for a readable, touchable 27-card hand. */
.guandan-art { background: #254e46; }
.guandan-art .art-caption { color: #e5d9a7; }
.guandan-mode .canvas-stage { background: #173d34; }
.guandan-mode .game-overlay { overflow: auto; }
.guandan-controls { padding: 16px 18px 12px; background: #eef2e7; border-top: 1px solid #d8e0ce; }
.guandan-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #738367; font-size: 11px; }
.guandan-heading strong { color: #3e614c; background: #dce7d4; padding: 5px 9px; border-radius: 5px; }
#guandan-hand-count { margin-left: auto; font-size: 10px; }
.guandan-message { min-height: 20px; margin: 10px 0 8px; font-size: 12px; line-height: 1.7; color: #6e7c62; }
.your-turn .guandan-message { color: #2d6246; font-weight: 600; }
.guandan-hand { display: grid; grid-template-columns: repeat(14,minmax(0,1fr)); gap: 5px; padding: 10px 0 3px; min-height: 100px; align-content: start; }
.playing-card { min-width: 0; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 1px; border: 1px solid #c9d0bf; border-radius: 5px; color: #35433d; background: #fffef7; box-shadow: 0 2px 0 #bbc6b1; transition: transform .12s, background .12s; position: relative; }
.playing-card b { font-family: Georgia,serif; font-size: 21px; line-height: 1.1; }
.playing-card > span { font-size: 17px; line-height: 1.1; }
.playing-card small { height: 12px; font-size: 8px; font-weight: 600; color: #7b8459; }
.playing-card.red { color: #aa4b43; }
.playing-card.level-card { border-color: #ad995c; }
.playing-card.wild { background: #fff3ca; box-shadow: 0 2px 0 #c3a65f; }
.playing-card.wild small { color: #a36c27; }
.playing-card.selected { transform: translateY(-7px); background: #dfeecf; border: 2px solid #4f7e4e; box-shadow: 0 3px 0 #4f7e4e; }
.playing-card:disabled { opacity: 1; cursor: default; }
.playing-card:focus-visible { outline-offset: 2px; z-index: 1; }
.guandan-selection { min-height: 17px; margin: 10px 0 12px; color: #7c886a; font-size: 10px; line-height: 1.7; }
.guandan-interpretation { display: flex; align-items: center; gap: 8px; color: #768366; font-size: 11px; margin: 0 0 12px; }
.guandan-interpretation select { min-width: 0; max-width: 75%; padding: 7px; border: 1px solid #cbd7bd; border-radius: 5px; color: #3c6245; background: #fffdf3; font: inherit; }
.guandan-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; }
.guandan-actions button { min-height: 40px; border: 1px solid #c9d7bd; border-radius: 7px; background: #fcfdf5; color: #516e43; font-size: 12px; font-weight: 600; }
.guandan-actions button small { margin-left: 5px; font-size: 9px; opacity: .6; font-weight: 400; }
.guandan-actions #guandan-play { background: #365c43; border-color: #365c43; color: #fffef1; }
.guandan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.guandan-tools button { min-height: 32px; border: 1px solid #cbd4bf; background: #e5ebdb; padding: 5px 12px; border-radius: 6px; font-size: 11px; color: #5c7250; }
.guandan-tools button[aria-pressed="true"] { background: #e8d5a8; border-color: #bda468; color: #7c5c2b; }
.guandan-tools > span { font-size: 9px; color: #8b987e; margin-right: auto; }
#guandan-next { background: #365c43; color: #fffef1; border-color: #365c43; }
.guandan-tribute { border-top: 1px dashed #d3dcc6; padding-top: 10px; color: #8b805e; font-size: 10px; line-height: 1.8; margin-bottom: 0; }
.guandan-guide { border-top: 1px solid #e1e5d7; background: #f9f8ed; font-size: 11px; }
.guandan-guide summary { padding: 12px 16px; cursor: pointer; color: #6e7758; font-weight: 600; }
.guandan-guide > div { padding: 0 16px 12px; line-height: 1.9; color: #788368; }
.guandan-mode .overlay-card { max-width: 440px; }
.player-window:fullscreen.guandan-mode .guandan-controls { flex-shrink: 0; max-height: 48dvh; overflow-y: auto; }
.player-window:fullscreen.guandan-mode .guandan-guide { display: none; }
@media(max-width:600px) {
  .guandan-controls { padding: 12px 10px; }
  .guandan-hand { grid-template-columns: repeat(9,minmax(0,1fr)); gap: 5px 4px; }
  .playing-card { height: 59px; }
  .playing-card b { font-size: 17px; }
  .playing-card > span { font-size: 14px; }
  .playing-card small { font-size: 7px; height: 10px; }
  .playing-card.selected { transform: translateY(-5px); }
  .guandan-heading { font-size: 10px; gap: 6px; }
  #guandan-hand-count { font-size: 9px; }
  .guandan-message { font-size: 11px; }
  .guandan-actions { gap: 6px; }
  .guandan-actions button { min-height: 40px; font-size: 11px; }
  .guandan-actions button small { display: none; }
  .guandan-tools > span { display: none; }
  #guandan-next { margin-left: auto; }
  .guandan-mode .canvas-stage { aspect-ratio: 1.5; }
  .guandan-mode .overlay-card { max-width: 280px; padding: 16px 18px; }
  .guandan-mode .overlay-card h3 { font-size: 17px; }
  .guandan-mode .overlay-card p { margin-bottom: 10px; font-size: 10px; }
  .guandan-mode .overlay-hint { margin-top: 8px; font-size: 8px; }
}
@media(max-height:600px) and (min-aspect-ratio:1/1) {
  .player-window:fullscreen.guandan-mode { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,44%); grid-template-rows: 40px minmax(0,1fr) 32px; height: 100dvh; }
  .player-window:fullscreen.guandan-mode .player-toolbar { grid-area: 1/1/2/3; height: 40px; }
  .player-window:fullscreen.guandan-mode .canvas-stage { grid-area: 2/1; min-width: 0; }
  .player-window:fullscreen.guandan-mode .guandan-controls { grid-area: 2/2; min-height: 0; max-height: none; padding: 8px; }
  .player-window:fullscreen.guandan-mode .guandan-hand { grid-template-columns: repeat(9,minmax(0,1fr)); gap: 4px; padding-top: 5px; min-height: 0; }
  .player-window:fullscreen.guandan-mode .playing-card { height: 41px; }
  .player-window:fullscreen.guandan-mode .playing-card b { font-size: 14px; }
  .player-window:fullscreen.guandan-mode .playing-card > span { font-size: 11px; }
  .player-window:fullscreen.guandan-mode .playing-card small { display: none; }
  .player-window:fullscreen.guandan-mode .guandan-selection { margin: 5px 0; }
  .player-window:fullscreen.guandan-mode .guandan-message { margin: 4px 0; font-size: 10px; }
  .player-window:fullscreen.guandan-mode .guandan-actions button { min-height: 30px; }
  .player-window:fullscreen.guandan-mode .guandan-tools { margin-top: 6px; }
  .player-window:fullscreen.guandan-mode .guandan-tools > span { display: none; }
  .player-window:fullscreen.guandan-mode .player-footer { grid-area: 3/1/4/3; height: 32px; }
}
@media(max-width:520px) {
  .aim-settings { padding: 13px 12px; }
  .aim-setting-title { align-items: start; }
  .aim-setting-title strong { font-size: 11px; }
  .aim-setting-controls { gap: 10px; }
  .aim-setting-controls label { font-size: 10px; }
  .aim-setting-controls select { max-width: 170px; padding: 7px; }
  .aim-mode .canvas-stage { aspect-ratio: 1 / 1; }
  .aim-mode .overlay-card { max-width: 290px; }
  .aim-results { gap: 5px; margin-bottom: 9px; }
  .aim-results div { padding: 6px 8px; }
  .aim-results dd { font-size: 13px; }
  .aim-mode .player-label strong { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aim-mode .player-label > span:last-child { display: none; }
}