/* The menu travels with the Phaser wrapper when cabinet chrome installs. */
#game-container { position:relative; }
#frog-menu { position:absolute; z-index:50; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; background:rgba(6,22,28,.7); overflow:auto; color:#edf9e4; font-family:Inter,Arial,sans-serif; }
#frog-menu[hidden] { display:none; }
.frog-menu-card { width:90%; max-width:480px; padding:24px 20px; box-sizing:border-box; text-align:center; border:1px solid #6d9464; border-radius:22px; background:linear-gradient(145deg,#1e3933,#102627); box-shadow:0 22px 70px #031618; }
.frog-kicker { font-size:10px; letter-spacing:.2em; font-weight:700; color:#b5dd98; }
.frog-menu-card h2 { margin:12px 0 7px; font:700 47px/.95 'Bricolage Grotesque',Arial,sans-serif; letter-spacing:-2px; color:#f3ffe7; }
.frog-menu-card h2 em { display:block; margin-top:6px; color:#b9ee8b; font-style:normal; font-size:33px; letter-spacing:-1px; }
.frog-intro { margin:12px 0; color:#d6eac9; font-size:14px; }
.frog-rules { font-size:12px; line-height:1.7; color:#cbdfd4; margin:12px 0 18px; }
.frog-rules b { color:#dbffa6; }.frog-rules strong { color:#ffb3a3; font-weight:500; }
.frog-choices { display:flex; justify-content:center; }
.frog-choices button { width:23%; margin:0 1%; padding:11px 3px 8px; background:#213d3b; border:1px solid #55706b; border-radius:12px; color:#d5e7df; font:600 11px Inter,Arial,sans-serif; cursor:pointer; }
.frog-choices button[aria-pressed="true"] { background:#385a43; border:2px solid #c9f89e; box-shadow:0 0 18px #a7e47522; color:#eeffd8; padding:10px 2px 7px; }
.frog-choices i { display:block; position:relative; width:32px; height:25px; border-radius:45% 45% 42% 42%; background:var(--frog); margin:7px auto 12px; box-shadow:-9px 8px 0 -5px var(--frog),9px 8px 0 -5px var(--frog),inset 0 -5px 0 #0002; }
.frog-choices i:before,.frog-choices i:after { content:''; position:absolute; top:-5px; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 50% 45%,#18333a 0,#18333a 3px,#ecffd3 3.5px,#ecffd3 5px,var(--frog) 5.5px); }
.frog-choices i:before { left:1px; }.frog-choices i:after { right:1px; }
.frog-small { margin:9px 0; font-size:10px; line-height:1.6; color:#b0cbc0; }
#frog-start { display:block; width:100%; padding:14px; margin:16px 0 9px; border:0; border-radius:10px; background:#c2f391; color:#17332c; font:700 16px Inter,Arial,sans-serif; cursor:pointer; }
#frog-start:disabled { opacity:.5; cursor:wait; }
#frog-menu button:focus-visible,#frog-menu a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.frog-edition { display:inline-block; color:#d1e9ca; font-size:11px; margin-top:10px; text-underline-offset:4px; }
body[data-edition="afterglow"] .frog-menu-card { border-color:#4e999b; background:radial-gradient(ellipse at 90% 0,#22525755,transparent 70%),linear-gradient(145deg,#172b40,#0c252c); box-shadow:0 0 60px #5bd8ba22,0 22px 70px #031618; }
body[data-edition="afterglow"] .frog-menu-card h2 em { color:#a3f2d2; text-shadow:0 0 30px #59e9b655; }
body[data-edition="afterglow"] .ch-bezel { border-color:#4a7a78; box-shadow:0 0 55px #59d5bd18; }
/* Scale menu typography with the board on small phones and short laptops. */
@media(max-width:600px),(max-height:850px) {
 .frog-menu-card { padding:15px 13px; max-width:390px; border-radius:16px; }
 .frog-menu-card h2 { font-size:34px; margin:8px 0 5px; }.frog-menu-card h2 em { font-size:25px; }
 .frog-intro { margin:8px 0; font-size:12px; }.frog-rules { font-size:11px; margin:8px 0 12px; }
 .frog-choices button { padding-top:5px; }.frog-choices button[aria-pressed="true"] { padding-top:4px; }
 #frog-start { padding:11px; margin-top:10px; }.frog-small { margin:6px 0; }
 .frog-kicker { font-size:8px; }.frog-edition { margin-top:5px; }
}
@media(max-width:400px),(max-height:650px) {
 .frog-menu-card { padding:10px; }.frog-menu-card h2 { font-size:27px; }.frog-menu-card h2 em { font-size:21px; }
 .frog-intro { display:none; }.frog-rules { line-height:1.4; }.frog-choices i { margin-bottom:7px; height:21px; }
 .frog-small { font-size:9px; }.frog-help { margin:4px 0; }.frog-edition { font-size:10px; }
}
.ch-bezel #game-container, .ch-bezel #game-container canvas { max-height:none; }
.ch-bezel #game-container canvas { image-rendering:auto; }
body[data-edition="afterglow"] { background-color:#081b22; }
@media(max-width:760px) {
 .ch-topbar { display:flex; flex-wrap:wrap; gap:10px; padding:12px; }
 .ch-topbar .ch-title { flex:1; min-width:140px; }.ch-title h1 { font-size:17px; }
 .ch-eyebrow { font-size:8px; letter-spacing:.08em; }.ch-scores { gap:14px; flex:1; }
 .ch-score b { font-size:18px; }.ch-score .ch-l { font-size:8px; }
 .ch-controls { flex-wrap:nowrap; gap:4px; }.ch-btn { padding:7px 9px; font-size:10px; }
 .ch-bezel { padding:8px; }.ch-coin { display:none; }.ch-stage { padding:0 5px; }
 #frog-menu { align-items:flex-start; }.frog-menu-card { margin:auto; }
}
@media(max-width:400px) {
 .frog-menu-card { padding:8px; }.frog-menu-card h2 { margin:4px 0; }.frog-menu-card h2 em { margin-top:3px; }
 .frog-choices + .frog-small { margin:3px 0; font-size:8px; }.frog-rules { margin:6px 0 8px; }
 .frog-edition { margin-top:2px; }.frog-choices button { font-size:10px; }
}
body.ch-game[data-edition="afterglow"] { background:radial-gradient(ellipse at 15% 20%,#153943,transparent 60%),radial-gradient(ellipse at 85% 75%,#282b45,transparent 55%),#07161e; --ch-amber:#a0e9cf; }
body[data-edition="afterglow"] .ch-topbar { background:rgba(5,19,27,.85); border-color:#305259; }
body[data-edition="afterglow"] .ch-bezel { background:linear-gradient(145deg,#20424a,#10232d); border-color:#37616a; }
.frog-editions { display:flex; margin:0 auto 15px; padding:4px; border-radius:12px; background:#071d26; border:1px solid #48635f; }
.frog-editions button { flex:1; border:0; border-radius:8px; padding:9px 4px; background:transparent; color:#c8ddd3; font:700 12px Inter,Arial,sans-serif; cursor:pointer; }
.frog-editions button[aria-pressed="true"] { background:#c2f391; color:#19392e; }
.frog-choices img { display:block; width:100%; max-width:80px; height:auto; margin:0 auto 3px; }
body[data-edition="afterglow"] .frog-choices button { padding:5px 2px 8px; font-size:10px; }
body[data-edition="afterglow"] .frog-choices button[aria-pressed="true"] { padding:4px 1px 7px; }
body.ch-game[data-world="town"] { background:radial-gradient(ellipse at 15% 30%,#4c244e,transparent 65%),radial-gradient(ellipse at 85% 65%,#163d59,transparent 60%),#111426; --ch-amber:#f4a5dc; }
body[data-world="town"] .ch-bezel { background:linear-gradient(145deg,#44334e,#172c41); border-color:#9d69a0; }
body.ch-game[data-world="swamp"] { background:radial-gradient(ellipse at 20% 35%,#174d45,transparent 65%),radial-gradient(ellipse at 80% 70%,#333458,transparent 65%),#061f24; --ch-amber:#83f7d8; }
body[data-world="swamp"] .ch-bezel { background:linear-gradient(145deg,#25584e,#162f38); border-color:#68ac9c; }
@media(max-width:600px),(max-height:850px) {
 .frog-editions { margin-bottom:8px; padding:3px; }.frog-editions button { padding:7px 3px; font-size:11px; }
 body[data-edition="afterglow"] .frog-menu-card h2 { font-size:30px; }
 body[data-edition="afterglow"] .frog-menu-card h2 em { font-size:23px; }
}
@media(max-width:400px),(max-height:650px) {
 .frog-editions { margin-bottom:5px; }.frog-editions button { padding:6px 3px; }
 body[data-edition="afterglow"] .frog-choices button { font-size:9px; }
 .frog-choices img { max-width:58px; }.frog-kicker { font-size:7px; letter-spacing:.12em; }
}
@media(max-width:400px) {
 body[data-edition="afterglow"] .frog-menu-card h2 { font-size:24px; margin:3px 0; }
 body[data-edition="afterglow"] .frog-menu-card h2 em { font-size:19px; margin-top:2px; }
 .frog-choices img { max-width:47px; }.frog-rules { margin:5px 0 7px; }
 .frog-small { margin:3px 0; }.frog-help { font-size:8px; line-height:1.4; }
 #frog-start { margin:8px 0 5px; padding:9px; }
}