@font-face{font-family:Friends;src:url('/assets/fonts/FRIENDS.TTF') format('truetype');font-display:swap}
@font-face{font-family:Typewriter;src:url('/assets/fonts/american-typewriter-bold.woff2') format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box}html{min-height:100%;background:#4f6b53}body.bb-page{margin:0;min-height:100svh;background:#e5eadd;color:#293d2e;font:16px/1.55 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}button,input{font:inherit}button{touch-action:manipulation;cursor:pointer}button:disabled{cursor:default;opacity:.6}button:focus-visible,a:focus-visible{outline:3px solid #416e91;outline-offset:4px}[hidden]{display:none!important}
.bb-app{width:min(100%,540px);min-height:100svh;margin:auto;display:flex;flex-direction:column;background:#edf0e4}.bb-header{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#4f6b53;color:#fff8e9;padding:calc(20px + env(safe-area-inset-top)) 20px 17px}.bb-brand{font-family:Friends,Typewriter,serif;font-size:22px;letter-spacing:1px}.bb-header p{font:10px/1.5 Typewriter,serif;letter-spacing:2px;margin:7px 0 0}.bb-home{color:inherit;text-decoration:none;display:grid;place-items:center;min-width:32px;min-height:44px;font-size:24px}.bb-host{font-size:11px;text-align:center;border-left:1px solid #a8b99c;padding-left:12px;line-height:1.3}.bb-dots{display:inline-flex;gap:4px;margin-left:5px;vertical-align:middle}.bb-dots i{height:5px;width:5px;background:#de6159;border-radius:50%}.bb-dots i:nth-child(2){background:#efc760}.bb-dots i:nth-child(3){background:#74a8c5}
.bb-scoreboard{position:sticky;top:0;z-index:5;background:#fffaf0;padding:15px 20px 0;border-bottom:1px solid #d0d8c4}.bb-scores{display:grid;grid-template-columns:1fr 1fr;gap:20px}.bb-player{min-width:0;position:relative}.bb-playerline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-weight:700;font-size:14px;overflow-wrap:anywhere}.bb-playerline small{font-size:10px;font-weight:500;color:#657360}.bb-player.active .bb-playerline:before{content:'';width:6px;height:6px;border-radius:50%;background:#ae4446;flex:none}#pz1.active .bb-playerline:before{background:#3e7297}.bb-position{font-size:12px;color:#65715e;margin:4px 0 7px}.bb-track{height:5px;border-radius:5px;background:#e9dfd8;overflow:hidden}.bb-track>div{height:100%;background:#b94b4b;width:0;transition:width .3s ease}#progress1{background:#467a9d}.bb-maprow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:#62745f}.bb-textbtn{background:none;border:0;color:#4a684d;padding:8px 0;min-height:44px;font-size:12px}.bb-stage{position:relative;padding:23px 24px 6px;flex:1}.bb-turnline{font-size:11px;color:#526e4f;letter-spacing:1px;display:flex;justify-content:space-between;gap:12px}.bb-stage h1{font:700 28px/1.3 Typewriter,'PingFang SC',serif;letter-spacing:-.6px;margin:8px 0 16px;overflow-wrap:anywhere}.bb-visual{min-height:110px;display:flex;align-items:center;justify-content:center;margin:8px 0 18px}.bb-emblem{font-size:70px;line-height:1.2;filter:drop-shadow(0 5px 0 #b4c2a6)}.bb-wheel-idle{width:150px;height:150px;border-radius:50%;border:7px solid #fff7e3;outline:2px solid #bd9852;background:conic-gradient(#c96058 0deg 45deg,#e9b760 45deg 90deg,#6392b0 90deg 135deg,#e9b760 135deg 180deg,#c96058 180deg 225deg,#e9b760 225deg 270deg,#6392b0 270deg 315deg,#e9b760 315deg);display:grid;place-items:center;box-shadow:0 9px 0 #39533912}.bb-wheel-idle span{border-radius:50%;background:#fffaf0;width:54px;height:54px;display:grid;place-items:center;font:700 14px Typewriter,serif}.bb-move{font:700 46px/1.3 Typewriter,serif;color:#506e4c}.bb-joey{position:relative;border:3px solid #d8ae52;box-shadow:inset 0 0 0 2px #f6dc91,0 3px 0 #b9c3a6;border-radius:13px;background:#fffaf0;padding:17px 16px 14px;margin:8px 0 14px}.bb-jname{position:absolute;top:-9px;left:14px;background:#d8ae52;padding:0 7px;font:700 10px/1.6 Typewriter,serif;letter-spacing:1.7px;color:#634b20}.bb-joey p{margin:0;font-size:15px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}.bb-route{font-size:12px;color:#697b60;margin:10px 0}.bb-controls{padding:4px 24px calc(18px + env(safe-area-inset-bottom))}.bb-controls #actionHint{font-size:12px;color:#60765b;margin:4px 0 9px;min-height:19px}#actions{display:grid;gap:9px}#actions button,.bb-primary,.bb-secondary{border:1px solid #cdd7bf;border-radius:12px;min-height:49px;padding:12px 16px;background:#fffaf0;color:#30462f;text-align:left;line-height:1.5;overflow-wrap:anywhere}#actions .bb-primary,.bb-primary{background:#4d6b49;color:#fffaf0;border-color:#4d6b49;text-align:center;font-weight:600;width:100%}#actions .bb-secondary,.bb-secondary{background:transparent;text-align:center;width:100%;color:#4e6c48}.bb-footnote{font:10px Typewriter,serif;letter-spacing:1.5px;text-align:center;color:#87957c;margin:20px 0 0}#actions button.selected{background:#dce6cc;border-color:#4d6b49;opacity:1;box-shadow:inset 4px 0 #4d6b49}#actions button.correct{background:#e1efdf;border-color:#4e8050;opacity:1}#actions button.incorrect{background:#f8dfd8;border-color:#aa5249;opacity:1}#actions .bb-monkey{font-size:23px;min-height:85px}.bb-question{font-size:21px;font-weight:600;line-height:1.5;margin:18px 0;overflow-wrap:anywhere}.bb-timer>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px}.bb-timer strong{font:700 22px Typewriter,serif;font-variant-numeric:tabular-nums;white-space:nowrap}.bb-time-track{height:5px;background:#d3dec8;margin-top:8px;border-radius:4px;overflow:hidden}#timeFill{height:100%;background:#5a794e;width:100%;transition:width .1s linear}.bb-timer.urgent{color:#a43d36}.bb-timer.urgent #timeFill{background:#bb5348}.bb-stage:has(.bb-question:not([hidden])) .bb-visual{display:none}.bb-stage:has(.bb-question:not([hidden])) .bb-joey{margin-top:22px}.bb-stage:has(.bb-question:not([hidden])) .bb-joey p{font-size:13px}
#wheelLayer{position:absolute;inset:0;background:#edf0e4;z-index:3;display:flex;align-items:center;justify-content:center;border-radius:16px}#wheelLayer svg{width:min(280px,80%)}#wheelG{transition:transform 2.2s cubic-bezier(.2,.8,.25,1);transform-origin:100px 100px}#wheelG path.win{stroke:#365532;stroke-width:5}
.bb-dialog{border:1px solid #c2cfb3;border-radius:24px;background:#fffaf0;color:#293d2e;width:min(440px,calc(100% - 28px));max-height:calc(100svh - 28px);padding:26px;box-shadow:0 18px 90px #1c321f45;overflow:auto}.bb-dialog::backdrop{background:#263d2ccc;backdrop-filter:blur(5px)}.bb-dialog h1{font:700 29px/1.3 Typewriter,'PingFang SC',serif;margin:12px 0 20px}.bb-dialog h2{font-size:23px;margin:5px 0}.bb-kicker{font:700 10px/1.5 Typewriter,serif;letter-spacing:2px;color:#6d865a}.bb-setup{text-align:center;padding:32px 26px}.bb-setup h1 span{font-family:Friends,Typewriter,serif;font-size:28px}.bb-doorframe{width:57px;height:70px;border:6px ridge #e9bd5b;border-radius:12px;background:#526c50;margin:0 auto 21px;display:grid;place-items:center;box-shadow:0 4px 0 #31492c15}.bb-doorframe span{color:#f3d788;font:700 16px Typewriter,serif}.bb-modechoices{display:grid;gap:10px;margin-top:22px}.bb-modechoices button{text-align:left;padding:15px 18px;border:1px solid #c3d1b4;border-radius:12px;background:#e7eddc;color:#344d30}.bb-modechoices strong,.bb-modechoices small{display:block}.bb-modechoices small{font-size:12px;font-weight:400;color:#6c805d;margin-top:4px}.bb-rules{font-size:12px;color:#707c63;margin:18px 0 0;line-height:1.8}.bb-nrow{margin:15px 0;text-align:left}.bb-nrow label{font-size:13px;display:block;margin-bottom:5px}.bb-nrow input{width:100%;border:1px solid #c3d0b6;border-radius:10px;padding:12px;background:white;color:#30462f;min-height:46px}.bb-cast{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.bb-cast>div{background:#e5ecd8;padding:16px 8px;border-radius:12px}.bb-cast small{display:block;color:#6a8159;font-size:12px}.bb-cast strong{display:block;font:700 22px/1.5 Typewriter,serif;margin-top:5px}.bb-cast .bb-actor{font-size:38px;margin:0}.bb-setup .bb-secondary,.bb-result .bb-secondary{margin-top:10px}.bb-result{text-align:center}.bb-resultmark{font-size:60px;color:#bc9845}.bb-result p{font-size:16px;line-height:1.7;overflow-wrap:anywhere}.bb-dialoghead{display:flex;justify-content:space-between;align-items:center;gap:10px}.bb-dialoghead button{min-width:44px}.bb-muted{font-size:12px;color:#6d7a62}.bb-mapdialog{width:min(560px,calc(100% - 24px));padding:20px}#board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(56px,1fr));gap:5px;position:relative;aspect-ratio:1;margin:16px 0}.bb-cell{position:relative;min-width:0;padding:9px 1px 16px;border:1px solid #d2dcc6;border-top:4px solid var(--strip);border-radius:7px;background:#edf1e5;display:flex;align-items:center;justify-content:center;flex-direction:column;font:inherit;color:#53684a}.bb-idx{position:absolute;left:3px;top:1px;font-size:9px}.bb-ico{font-size:20px}.bb-lb{font-size:9px;line-height:1.1;text-align:center;overflow-wrap:anywhere}.bb-cell.selected{outline:2px solid #4d6b49}.bb-token{position:absolute;bottom:1px;width:17px;height:17px;border-radius:50%;background:#b94b4b;color:#fff;font-size:10px;text-align:center;line-height:17px;pointer-events:none;left:calc(50% - 18px)}.bb-token.p1{background:#467a9d;left:calc(50% + 1px)}#pond{grid-column:3;grid-row:3;background:#d5e7e1;border:0;border-radius:50%;font:10px/1.3 Typewriter,serif;color:#386b5e;text-align:center;display:grid;place-items:center;position:relative}#pond.win{background:#c7e6bc}.bb-maplegend{display:flex;gap:15px;flex-wrap:wrap;font-size:12px}.bb-maplegend span:first-child{color:#a94143}.bb-maplegend span:last-child{color:#386b91}.bb-mapdetail{font-size:13px;min-height:42px;color:#627958}.bb-conf{position:fixed;top:-20px;width:8px;height:12px;border-radius:2px;z-index:30;pointer-events:none;animation:bb-fall linear forwards}@keyframes bb-fall{to{transform:translateY(110vh) rotate(600deg)}}
@media(min-width:600px){body.bb-page{padding:24px 0;background:#4f6b53}.bb-app{border-radius:22px;overflow:clip;min-height:calc(100svh - 48px);box-shadow:0 15px 70px #253d2535}.bb-stage{padding:28px 32px 8px}.bb-controls{padding-left:32px;padding-right:32px}.bb-header{padding-top:24px}}
@media(max-width:360px){.bb-header{padding-left:12px;padding-right:12px;gap:7px}.bb-brand{font-size:19px}.bb-stage{padding:18px 18px 4px}.bb-controls{padding-left:18px;padding-right:18px}.bb-stage h1{font-size:25px}.bb-scoreboard{padding-left:16px;padding-right:16px}.bb-scores{gap:12px}.bb-dialog{padding:22px 18px}.bb-mapdialog{padding:16px}.bb-setup h1 span{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep the clock visible even when a small phone needs to scroll its answers. */
.bb-scoreboard .bb-timer{padding:2px 0 14px}.bb-scoreboard .bb-timer>div:first-child{font-size:11px}.bb-scoreboard .bb-timer strong{font-size:20px}.bb-setup .subtitle{font-size:12px;color:#707c63;margin:-8px 0 16px}.bb-setup .logo{display:block}.bb-setup .logo .ltr{font-size:24px}.bb-setup .logo .dot{display:inline-block;width:3px;height:3px;border-radius:50%;vertical-align:middle;margin:0 1px;background:#ce615b}.bb-setup .logo .dot.yellow{background:#d6a733}.bb-setup .logo .dot.blue{background:#5889a8}
@media(max-width:360px){.bb-setup .logo .ltr{font-size:21px}}

/* A whole highlighted seat makes the turn legible, beyond the small status dot. */
.bb-scores{gap:10px}.bb-player{padding:10px;border:2px solid transparent;border-radius:12px;background:#f0f0e6;opacity:.68;transition:background .2s,border-color .2s,opacity .2s}.bb-player.active{background:#e0e9d3;border-color:#5b7749;box-shadow:0 3px 0 #3953341a;opacity:1}.bb-player.active .bb-playerline{color:#294f2c}.bb-player.active .bb-position{color:#405d37}.bb-player.active .bb-playerline:before,#pz1.active .bb-playerline:before{background:#547539}.bb-player[aria-current="true"] .bb-playerline:after{content:'回合中';font-size:9px;background:#4d6b49;color:#fffaf0;padding:1px 5px;border-radius:4px;white-space:nowrap}.bb-wheel-idle{padding:0;color:#372f24;flex:none;transition:transform .15s}.bb-wheel-idle:not(:disabled):active{transform:scale(.96)}.bb-wheel-idle:disabled{opacity:1}.bb-prelude{color:#4d6b49;font-weight:600;font-size:17px;margin:14px 0}.bb-result #ovTitle{font-size:25px}.bb-result #ovTitle span{display:block;overflow-wrap:anywhere}.bb-result #ovTitle .bb-loser{font-size:clamp(15px,4.4vw,20px);margin-bottom:9px}

.bb-setuphome{margin-top:13px;text-decoration:underline;text-underline-offset:4px}.bb-google-reveal{width:132px;height:166px;border:3px solid #cfaa50;border-radius:14px;background:repeating-linear-gradient(45deg,#496b4b 0 12px,#526f50 12px 24px);color:#fff5d3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:0 8px 0 #2f4a3020;transform:rotate(-6deg);transition:transform 1s ease,background 1s ease}.bb-google-word{font:700 15px/1.3 Typewriter,serif;letter-spacing:2px;text-align:center}.bb-google-symbol{font:700 40px/1 Typewriter,serif}.bb-google-turning{transform:rotate(6deg) rotateY(25deg);background:#d5b665;color:#35472f}

/* The completed game keeps its green palette; the hall of fame borrows The Cups' gold accents. */
#bbNicknameHint{font-size:13px;color:#64745d;margin:18px 0 8px}#bbNicknameError{font-size:13px;color:#a13c32;margin:8px 0;min-height:0}#bbNicknameError:empty{display:none}#bbNicknameForm .bb-nrow{margin:12px 0}#bbNicknameForm input:focus-visible{outline:2px solid #957633;outline-offset:2px}
.bb-dialog.bb-ranking{padding:0;background:#102e28;border:1px solid #c6a669;color:#f4ead3;width:min(440px,calc(100% - 24px));border-radius:22px}.bb-rank-hero{text-align:center;background:linear-gradient(145deg,#254e40,#15362d);padding:24px 20px 20px;border-bottom:1px solid #c6a66955}.bb-rank-edition{display:block;font:10px Typewriter,serif;letter-spacing:3px;color:#d6bb82}.bb-rank-trophy{display:block;font-size:42px;line-height:1.4;color:#e6c67d;margin-top:8px}.bb-rank-brand{font:700 clamp(24px,7vw,33px)/1.3 Typewriter,serif;color:#f1d591}.bb-ranking h2{font-size:18px;letter-spacing:3px;margin:8px 0}.bb-rank-hero p{font-size:12px;color:#c2d0b9;margin:8px 0 0}.bb-rank-content{padding:18px 20px}.bb-rank-tabs{display:flex;gap:8px;margin-bottom:16px}.bb-rank-tabs button{flex:1;min-height:44px;border:1px solid #8a987455;border-radius:9px;background:transparent;color:#c4d0be;font-size:13px}.bb-rank-tabs button[aria-pressed=true]{background:#d5b572;color:#233e32;border-color:#d5b572;font-weight:700}.bb-rank-personal{display:grid;gap:5px;padding:15px;border:1px solid #bda36877;border-radius:12px;background:#23473b;margin-bottom:22px}#bbRanking .bb-rank-personal:empty{display:none}.bb-rank-personal strong{font-size:15px;overflow-wrap:anywhere}.bb-rank-personal span{font-size:12px;color:#c2d0ba}.bb-rank-personal b{font:700 23px/1.5 Typewriter,serif;color:#efd293}#bbRankHint{font-size:12px;color:#aebfaf;margin:9px 0 13px}#bbRankList,#bbRankOutside ol{list-style:none;padding:0;margin:0}.bb-rank-row{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;padding:13px 6px;border-bottom:1px solid #d5c39122}.bb-rank-medal{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 13px Typewriter,serif;color:#abbaa5}.bb-rank-medalist{color:#253b2d;background:#d7b778;box-shadow:inset 0 0 0 3px #eed89a55}.bb-rank-row strong{display:block;font-size:14px;overflow-wrap:anywhere}.bb-rank-row small{display:block;font-size:10px;color:#aebfa7;margin-top:3px}.bb-rank-time{font:700 12px/1.5 Typewriter,sans-serif;color:#ead39d;white-space:nowrap}.bb-rank-own{background:#c6a66919;border:1px solid #c6a66988;border-radius:9px;padding:12px 6px}.bb-rank-gap{text-align:center;color:#bca574;margin:8px}.bb-rank-footnote{font-size:10px;line-height:1.8;color:#99af9e;margin:19px 0 0}.bb-ranking .bb-textbtn{color:#e8cc8d}.bb-rank-actions{display:grid;gap:10px;padding:0 20px 22px}.bb-rank-actions .bb-primary{background:#d9b976;color:#243b30;border-color:#ebd096;font-family:Typewriter,sans-serif;font-size:14px}.bb-rank-actions .bb-secondary{border-color:#80927b66;color:#cad3bc;font-size:13px}@media(max-width:360px){.bb-rank-content{padding:16px 14px}.bb-rank-actions{padding:0 14px 18px}.bb-rank-row{gap:7px}.bb-rank-time{font-size:11px}}

button.bb-host{flex:none;background:transparent;border:0;border-left:1px solid #a8b99c;color:inherit;min-height:44px;padding:4px 0 4px 12px;letter-spacing:1px}.bb-setup .bb-setup-ranking{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid #c3d1b4;border-radius:50%;background:transparent;color:#526c50}.bb-setup-ranking svg{width:23px;height:23px}.bb-setup-ranking:hover{background:#e7eddc}.bb-setup-ranking:active{transform:scale(.95)}

.bb-story{padding:25px;text-align:left}.bb-story-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.bb-story-top .bb-kicker{font-size:8px;letter-spacing:1px}.bb-story-top>span:not(.bb-kicker){font-size:11px;color:#788267;white-space:nowrap}.bb-story h2{font-size:26px;line-height:1.4;margin:17px 0}.bb-audition{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;margin:24px 6px 20px;padding:22px 12px 18px;background:#e5eadb;border:1px solid #c1ccb2;border-radius:5px;transform:rotate(-2deg);box-shadow:4px 5px 0 #d2d9c5}.bb-script-clip{position:absolute;top:-8px;width:68px;height:16px;border:2px solid #ae904c;background:#d8b76d;border-radius:4px}.bb-script-label{font:9px Typewriter,serif;letter-spacing:3px;color:#6a785c}.bb-audition strong{font:26px Typewriter,serif;color:#3e6047}.bb-script-name{font:9px Typewriter,serif;letter-spacing:2px;color:#75816c}.bb-script-stamp{position:absolute;right:9px;bottom:8px;border:1px solid #a65642;color:#a65642;font-size:10px;padding:2px 5px;transform:rotate(10deg)}.bb-story-context,.bb-story-invite{font-size:13px;line-height:1.8;color:#63715b;margin:15px 0}.bb-story-line{margin-top:16px}.bb-story-line>span{font:11px Typewriter,serif;letter-spacing:1.5px;color:#59704b}.bb-story-line p{font-size:15px;line-height:1.7;margin:5px 0}.bb-story-reply{padding:11px 14px;background:#e9eddf;border-radius:9px}.bb-story-actions{display:flex;gap:10px;margin-top:20px}.bb-story-actions .bb-secondary{width:auto;flex:none;font-size:13px}.bb-story-actions .bb-primary{flex:1;font-size:14px}.bb-story-note{font-size:11px;color:#869078;line-height:1.7;margin:16px 0 0}@media(max-width:360px){.bb-story{padding:20px 18px}.bb-story h2{font-size:23px}.bb-story-top .bb-kicker{font-size:7px}.bb-story-actions{gap:8px}.bb-story-actions button{padding:11px}}

/* The opening title receives initial dialog focus for reading, not interaction. */
#bbOpeningTitle:focus{outline:none}

.bb-opening-ranking{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:10px;border:1px solid #c3d1b4;border-radius:50%;background:transparent;color:#526c50}

.bb-lost-note{margin:4px 0 2px;font-size:14px;font-weight:600;color:#294f2c;background:#e0e9d3;border:2px solid #5b7749;border-radius:10px;padding:8px 12px}
.bb-header .bb-host-ranking{border:1px solid #a8b99c;border-radius:50%;padding:10px;width:44px;height:44px;display:grid;place-items:center;color:#fff8e9;background:transparent}.bb-host-ranking svg{width:22px;height:22px}.bb-host-ranking:hover{background:#5d7a60}.bb-host-ranking:active{transform:scale(.95)}
.bb-rank-gap{list-style:none;margin:10px 0;text-align:center;color:#6b7a5e;font-size:11px;letter-spacing:2px}

.bb-rank-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}.bb-rank-name strong{max-width:100%}.bb-rank-tag{font-size:9px;line-height:1.5;padding:2px 5px;border:1px solid #c6a66955;border-radius:5px;background:#c6a66918;color:#ead39d;white-space:nowrap}.bb-rank-tag.bb-rank-mode{border-color:#9db59c44;color:#bcd0b7;background:#9db59c12}

.bb-rank-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:5px}.bb-rank-meta small{margin-top:0}

.bb-round-rule{margin:0 0 12px;padding:9px 11px;border:1px solid #d5b572;border-radius:10px;background:#fff1c9;color:#5e4c29;font-size:11px;line-height:1.6;overflow-wrap:anywhere}.bb-rank-version-note{font-size:12px;color:#d2bd8e;line-height:1.8;border:1px solid #c6a66944;padding:12px;border-radius:10px;margin:0 0 18px}

.bb-opening-art{overflow:hidden;border-radius:11px;margin:12px 0 0;background:#e5dfca;aspect-ratio:3/2}.bb-opening-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease;transform-origin:75% 40%}.bb-opening-art.bb-opening-detail img{transform:scale(1.13)}.bb-opening-count{text-align:right;font:10px Typewriter,serif;color:#788267;margin:9px 0 0}.bb-story #bbOpeningBody .bb-story-line{margin-top:12px}.bb-story #bbOpeningBody .bb-story-line p{font-size:14px;line-height:1.7}.bb-story #bbOpeningBody .bb-story-reply{padding:9px 12px}.bb-story .bb-story-actions{flex-wrap:wrap}.bb-story .bb-story-actions .bb-primary{min-width:130px}.bb-story .bb-story-actions .bb-secondary{max-width:100%}

.bb-rank-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bb-rank-bottom .bb-secondary{padding:11px 7px;font-size:12px}.bb-review{background:#fffaf0}.bb-review h2{font-size:23px;line-height:1.4;margin:12px 0}.bb-review-summary{padding:12px;background:#e5eddc;border-radius:10px;font-size:13px;overflow-wrap:anywhere}.bb-review-events{list-style:none;padding:0;margin:20px 0}.bb-review-round{font-weight:700;color:#4f6b53;margin:22px 0 10px;border-bottom:1px solid #cbd4bf;padding-bottom:7px}.bb-review-event{border-left:2px solid #d2b267;margin:0 0 13px;padding:0 0 0 12px;overflow-wrap:anywhere}.bb-review-event small{color:#7a856d;font-size:10px}.bb-review-event p{white-space:pre-line;font-size:13px;line-height:1.8;margin:5px 0}.bb-review-actions{display:grid;gap:10px;border-top:1px solid #d5ddcb;padding-top:16px}.bb-review-actions .bb-primary{font-family:Typewriter,sans-serif;font-size:14px}

.bb-cell.bb-step-visited{background:#e2ebd4}.bb-cell.bb-step-target{outline:2px dashed #bc9846;outline-offset:1px}.bb-cell.bb-step-current{background:#fff0ba;box-shadow:inset 0 0 0 2px #b88d32}.bb-token-hop{animation:bb-token-hop .25s ease-out;z-index:3;box-shadow:0 0 0 3px #fff8e9}.bb-map-moving .bb-token{width:21px;height:21px;line-height:21px;font-size:12px}.bb-map-moving .bb-cell{cursor:default}.bb-map-moving #mapTitle{font-size:20px;overflow-wrap:anywhere}.bb-map-moving #mapDetail{margin-bottom:0}@keyframes bb-token-hop{0%{transform:translateY(0) scale(.85)}45%{transform:translateY(-12px) scale(1.12)}100%{transform:translateY(0) scale(1)}}

/* Only the standings scroll; title and actions stay in the dialog's own frame. */
#bbRanking[open]{display:flex;flex-direction:column;height:min(850px,calc(100svh - 28px));max-height:calc(100svh - 28px);overflow:hidden}#bbRanking .bb-rank-hero,#bbRanking .bb-rank-actions{flex:none}#bbRankContent{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}#bbRanking .bb-rank-actions{padding-top:12px;border-top:1px solid #c6a66944;background:#102e28}#bbRankContent:focus{outline:none}@media(max-height:700px){#bbRanking .bb-rank-hero{padding:12px 16px}#bbRanking .bb-rank-trophy{display:none}#bbRanking .bb-rank-brand{font-size:25px;margin-top:6px}#bbRanking .bb-rank-hero h2{font-size:16px;margin:5px 0}#bbRanking .bb-rank-hero p{margin-top:4px}#bbRanking .bb-rank-actions{gap:6px;padding:8px 14px 12px}#bbRanking .bb-rank-actions .bb-textbtn{min-height:32px;padding:4px 0}#bbRanking .bb-rank-actions .bb-primary,#bbRanking .bb-rank-actions .bb-secondary{min-height:44px;padding:9px 8px}}

.bb-board-tabs{display:flex;justify-content:center;gap:8px;margin-top:12px}.bb-board-tabs button{border:1px solid #c6a66944;border-radius:8px;background:transparent;color:#bdcbb9;font-size:12px;padding:9px 10px;min-height:42px}.bb-board-tabs button[aria-pressed=true]{color:#f4deb0;background:#c6a66920;border-color:#c6a669aa}

/* Full-page standings, with a compact fixed header and footer. Native dialog
   focus containment keeps the paused game underneath intact. */
#bbRanking[open]{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;padding:0;background:#102e28;overflow:hidden}#bbRanking::backdrop{background:#102e28;backdrop-filter:none}#bbRanking .bb-rank-hero{padding:env(safe-area-inset-top) 0 0;background:#17392f;border-bottom:1px solid #c6a66944;text-align:left}#bbRanking .bb-rank-header-inner{max-width:760px;margin:auto;padding:0 18px 10px}#bbRanking .bb-rank-topbar{display:flex;align-items:center;gap:10px;min-height:52px}#bbRanking .bb-rank-brand{font:700 20px/1.2 Typewriter,serif;flex:1;color:#f1d591;min-width:0}#bbRanking .bb-rank-back{border:0;background:transparent;color:#e3d3ad;width:36px;min-height:44px;padding:0;font-size:25px;flex:none}#bbRanking #bbRankVersion{font:11px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;min-height:44px;padding:8px 0;color:#aebeaa;white-space:nowrap}#bbRanking .bb-rank-sr-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#bbRanking .bb-board-tabs{margin:0;gap:8px;justify-content:stretch}#bbRanking .bb-board-tabs button{flex:1;font-size:13px;padding:9px 6px;min-height:42px}#bbRanking .bb-rank-archive-title{font-size:17px;font-weight:600;min-height:42px;display:flex;align-items:center;color:#ecd29a}#bbRanking #bbRankContent{width:100%;max-width:760px;align-self:center;padding:18px 20px;scrollbar-gutter:stable}#bbRanking .bb-rank-actions{gap:10px;width:100%;padding:12px max(20px,calc((100vw - 720px)/2)) calc(14px + env(safe-area-inset-bottom));border-top:1px solid #c6a66944}#bbRanking .bb-rank-personal{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;padding:12px 14px;margin:0 0 16px}#bbRanking .bb-rank-personal strong{font-size:13px}#bbRanking .bb-rank-personal b{font-size:18px;margin-left:auto}#bbRanking .bb-rank-personal span{font-size:11px}#bbRanking .bb-rank-actions .bb-primary{min-height:48px}#bbRanking .bb-rank-actions .bb-secondary{min-height:44px}@media(max-width:360px){#bbRanking .bb-rank-header-inner{padding:0 12px 9px}#bbRanking .bb-rank-topbar{gap:6px}#bbRanking .bb-rank-brand{font-size:18px}#bbRanking #bbRankVersion{font-size:10px}#bbRanking #bbRankContent{padding:14px 12px}#bbRanking .bb-rank-actions{padding-left:14px;padding-right:14px}}@media(prefers-reduced-motion:reduce){#bbRankContent{scroll-behavior:auto}}

/* A short awards-stage banner: visual weight comes from scale and composition,
   rather than stacking a trophy, brand, title and motto vertically. */
#bbRanking .bb-rank-hero{background:radial-gradient(ellipse at 16% 65%,#73804c30,transparent 60%),linear-gradient(110deg,#264b3c,#173b30 60%,#123027);border-bottom:1px solid #c7a96866;position:relative}#bbRanking .bb-rank-hero:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#e1c181 25%,#e1c18144 70%,transparent)}#bbRanking .bb-rank-header-inner{padding:0 20px;position:relative}#bbRanking .bb-rank-topbar{min-height:40px;gap:8px}#bbRanking .bb-rank-back{min-height:40px;width:28px;font-size:24px}#bbRanking .bb-rank-edition{display:block;flex:1;font:9px/1.4 Typewriter,serif;letter-spacing:2px;color:#c4b58a}#bbRanking #bbRankVersion{min-height:40px;font-size:10px;color:#9daf9e}#bbRanking .bb-rank-banner{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:0 0 9px;overflow:hidden}#bbRanking .bb-rank-award{width:57px;height:65px;flex:none;color:#e2c080;filter:drop-shadow(0 3px 10px #d8b86d20)}#bbRanking .bb-rank-banner-text{min-width:0;position:relative;z-index:1}#bbRanking .bb-rank-brand{font:700 clamp(30px,8.3vw,38px)/1.08 Typewriter,serif;letter-spacing:-1.2px;color:#f2d795;text-shadow:0 2px 0 #102c2680;margin:0}#bbRanking #bbRankingTitle{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;font-size:17px;font-weight:600;letter-spacing:2px;line-height:1.4;color:#f1edda;margin:5px 0 0}#bbRanking .bb-rank-watermark{position:absolute;right:1px;top:-20px;font-size:130px;line-height:1;color:#e8d09409;transform:rotate(12deg)}#bbRanking .bb-board-tabs{gap:20px}#bbRanking .bb-board-tabs button{position:relative;min-height:42px;border:0;border-radius:0;background:transparent;color:#a7bcaa;font-size:12px;padding:9px 0 12px;letter-spacing:.5px}#bbRanking .bb-board-tabs button[aria-pressed=true]{background:linear-gradient(0deg,#d5b57212,transparent);color:#f3d79a;border:0;font-weight:600}#bbRanking .bb-board-tabs button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#e7c27c 20%,#e7c27c 80%,transparent)}#bbRanking .bb-rank-archive-title{font-size:11px;min-height:42px;font-weight:400;letter-spacing:2px;color:#b8c1a9}@media(max-width:360px){#bbRanking .bb-rank-header-inner{padding:0 14px}#bbRanking .bb-rank-banner{gap:10px;min-height:74px}#bbRanking .bb-rank-award{width:48px;height:60px}#bbRanking .bb-rank-brand{font-size:30px}#bbRanking #bbRankingTitle{font-size:16px}#bbRanking .bb-rank-edition{font-size:8px;letter-spacing:1.5px}}@media(min-width:700px){#bbRanking .bb-rank-banner{min-height:82px}#bbRanking .bb-rank-award{width:65px;height:70px}#bbRanking .bb-rank-brand{font-size:40px}}

/* Give timed questions priority over player progress. Keep the countdown visible. */
.bb-speed-active .bb-scores,.bb-speed-active .bb-maprow{display:none}
.bb-speed-active .bb-stage{padding-top:10px}
.bb-speed-active .bb-visual,.bb-speed-active .bb-route{display:none}
.bb-speed-active .bb-stage:has(.bb-question:not([hidden])) .bb-joey{margin:8px 0;padding:8px 12px}
.bb-speed-active .bb-stage h1{font-size:24px;margin:6px 0}
.bb-speed-active .bb-question{margin:10px 0;font-size:18px}

.bb-ladder-active .bb-scores,.bb-ladder-active .bb-maprow{display:none}