/* Banana Boom v2.2 • PC game-client presentation / source-editable CSS */
:root{--arcade-void:#171226;--arcade-deep:#211a38;--arcade-night:#30264b;--arcade-ink:#36274a;--arcade-gold:#ffe17c;--arcade-pink:#ffb4d0;--arcade-aqua:#98ebd5;--arcade-cream:#fffaf0;--arcade-line:#56446a}
body.in-room{
 color:#eee8fd;
 background:
  radial-gradient(ellipse at 51% -15%,#60437a 0,transparent 50%),
  radial-gradient(ellipse at 100% 30%,#3d456e80 0,transparent 37%),
  radial-gradient(ellipse at 3% 82%,#4c315d7a 0,transparent 38%),
  #171226;
}
body.in-room:before{content:"";position:fixed;inset:0;width:auto;height:auto;left:0;top:0;border:0;background-image:linear-gradient(#b8a1d00d 1px,transparent 1px),linear-gradient(90deg,#b8a1d00d 1px,transparent 1px);background-size:48px 48px;filter:none;opacity:1;z-index:-1;pointer-events:none}
body.in-room:after{content:"";position:fixed;top:-230px;right:-120px;width:600px;height:600px;background:#8667cf;opacity:.18;filter:blur(145px);z-index:-1;pointer-events:none}
body.in-room .paper-grain{opacity:.06}
body.in-room .site-header{max-width:1600px;min-height:90px;padding:14px clamp(22px,3.6vw,64px);border-bottom:1px solid #a690b729;background:#14102190;backdrop-filter:blur(14px)}
body.in-room .site-logo{font-size:17px;color:#fff8f2;gap:15px}
body.in-room .site-logo .brand-text>span{color:#ffce88}
body.in-room .site-logo .brand-text small{color:#a99db9;font-size:9px}
body.in-room .site-logo .mark{background:#3e305b;border:1px solid #857098;width:54px;height:54px;border-radius:16px;box-shadow:inset 0 0 0 2px #a48bc733,0 5px 0 #0c0b18;transform:none;overflow:hidden}
body.in-room .site-logo .mark img{height:58px;width:62px;object-fit:cover;object-position:50% 44%}
body.in-room .head-live{color:#d8cced;font-size:10px;letter-spacing:.15em}
body.in-room .head-right>.tool,body.in-room .icon-btn{color:#f7f1ff;background:#312643;border:1px solid #645376;box-shadow:0 4px 0 #0d0c16;font-size:12px;font-weight:900;border-radius:11px;min-height:41px}
body.in-room .head-right>.tool:hover,body.in-room .icon-btn:hover{background:#47365c}
body.in-room .site-footer{color:#786c8f;border-color:#342946;max-width:1500px;margin-top:14px;padding-bottom:25px}
body.in-room .wrap{max-width:1580px;width:100%;padding:23px clamp(18px,3.1vw,48px) 35px;margin:0 auto}
body.in-room .layout{grid-template-columns:minmax(0,1fr) 284px;align-items:start;gap:21px}
body.in-room .layout-main,body.in-room .layout-side{gap:18px}
/* Room HUD: actual in-game status instead of another webpage header card */
body.in-room .arcade-hud{margin:3px 0 22px;min-height:118px;display:grid;grid-template-columns:82px minmax(240px,1fr) auto auto;align-items:center;gap:18px;padding:15px 21px 15px 14px;background:linear-gradient(110deg,#3c2e5e 0%,#2b2345 60%,#24203e 100%);color:#fff;border:1px solid #856e9e;border-radius:22px;box-shadow:0 10px 0 #0d0b16,0 22px 60px #0f091d7a;position:relative;overflow:hidden}
body.in-room .arcade-hud:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(120deg,transparent 55%,#ffdfad0c 56%,transparent 77%)}
body.in-room .hud-icon{width:80px;height:80px;background:radial-gradient(circle,#7959a5,#403259);border:2px solid #a285b5;border-radius:23px;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 3px #ffffff16}
body.in-room .hud-icon img{width:107px;max-width:none;height:100px;object-fit:cover;object-position:50% 25%}
body.in-room .hud-info{min-width:0;position:relative;z-index:1}
body.in-room .hud-info .eyebrow{font-size:10px;color:#f8cf80;letter-spacing:.19em}
body.in-room .hud-info h2{font-size:clamp(20px,1.75vw,30px);letter-spacing:-.04em;font-weight:900;line-height:1.5;margin:5px 0 1px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
body.in-room .hud-info p{color:#c6b9d6;font-size:11px;font-weight:700}
body.in-room .hud-game-status{display:grid;gap:5px;padding:7px 18px;border-left:1px solid #716286;position:relative;z-index:1;min-width:152px}
body.in-room .hud-game-status>strong{font-size:12px;white-space:nowrap;color:#f7eaf6}
body.in-room .hud-live{font-size:9px;letter-spacing:.1em;color:#9aefcf;font-weight:900;white-space:nowrap}
body.in-room .hud-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#97efcd;box-shadow:0 0 11px #97efcda9;margin-right:5px}
body.in-room .hud-live.hud-idle{color:#f6d68e}
body.in-room .hud-live.hud-idle i{background:#f5d47c;box-shadow:0 0 10px #f5d47c66}
body.in-room .room-top-buttons{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px;max-width:390px;z-index:1}
body.in-room .room-top-buttons .btn{font-size:11px;font-weight:900;padding:8px 11px;min-height:37px;white-space:nowrap;border-radius:11px}
body.in-room .room-code{background:#ffe284;border-radius:9px;color:#362846;border:2px solid #ffefb3;font-size:13px;letter-spacing:.18em;padding:9px 12px;box-shadow:0 4px 0 #b7954e;font-variant-numeric:tabular-nums;cursor:pointer}
body.in-room .room-code span{letter-spacing:normal;font-size:11px}
body.in-room .room-top-buttons .btn-outline{background:#ffffff13;color:#f7f0ff;border-color:#8b759e}
body.in-room .room-top-buttons .btn-ghost{background:transparent;color:#c7bad1;border:1px solid #665571}
body.in-room .room-top-buttons .hud-end{background:#7c365a;border:1px solid #f1a4b7;color:#fff6f7;box-shadow:0 4px 0 #3a1830}
body.in-room .room-top-buttons .hud-end:hover:not(:disabled){background:#984b6c}
/* Emergency pause decision floats directly under HUD; accessible to all voters */
body.in-room .hud-ballot{background:#fff1d3;color:#352a44;border:3px solid #ffce73;border-radius:19px;padding:16px 21px;margin:0 0 20px;box-shadow:0 8px 0 #8d5c81;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
body.in-room .hud-ballot-copy{display:flex;gap:12px;align-items:center;flex:1 1 250px}.hud-ballot-copy strong{font-size:16px}.hud-ballot-copy p{font-size:12px;color:#70546e;margin:2px 0 0}
body.in-room .ballot-symbol{font-size:28px;display:grid;place-items:center;width:56px;height:56px;background:#513451;border-radius:16px;color:white}
body.in-room .hud-ballot-progress{min-width:120px;display:grid;gap:6px;text-align:center}.hud-ballot-progress b{font-size:23px;font-variant-numeric:tabular-nums}.hud-ballot-progress small{font-size:11px}
body.in-room .ballot-meter{height:9px;background:#e5cbbf;overflow:hidden;border-radius:999px}.ballot-meter>span{display:block;height:100%;background:#7d5baf;transition:width .2s}
body.in-room .hud-ballot-actions{display:flex;gap:9px;align-items:center}.hud-ballot-actions .btn{white-space:nowrap}.hud-ballot-wait{font-size:12px;color:#725b69}
/* The three primary phases form one theater scene, with non-essential tools at the edge */
body.in-room .lobby-stage{min-height:570px;padding:27px clamp(22px,2.6vw,41px) 34px;background:
 radial-gradient(circle at 83% 36%,#7d65aa62 0,transparent 29%),
 radial-gradient(circle at 5% 96%,#433963 0,transparent 49%),
 linear-gradient(155deg,#362950 0%,#241d3e 57%,#1e1932 100%)!important;
 color:#fff6ff;border:2px solid #8975a3!important;border-radius:28px;box-shadow:inset 0 0 0 2px #faf0ff09,0 10px 0 #100d22,0 25px 65px #090515a0!important;position:relative;overflow:hidden}
body.in-room .lobby-stage:before{content:"";position:absolute;width:550px;height:550px;right:-140px;top:-188px;border:1px solid #f9e4ff1b;box-shadow:0 0 0 45px #d4aaff07,0 0 0 95px #e3c8fc08;border-radius:50%;pointer-events:none;background:none}
body.in-room .lobby-stage:after{content:"✧  ·  ✳  ·  ✧";position:absolute;right:35px;bottom:15px;font-size:19px;letter-spacing:25px;color:#ffe49b66;pointer-events:none}
body.in-room .lobby-steps{max-width:820px;margin:0 auto 29px;gap:13px;position:relative;z-index:2}
body.in-room .lobby-steps span{color:#ada0bf;background:#241b38;border:1px solid #66547c;border-radius:12px;min-height:49px;box-shadow:inset 0 -3px 0 #150f2699;letter-spacing:.055em}
body.in-room .lobby-steps span b{font-size:12px}
body.in-room .lobby-steps .current{background:#ffe18a;color:#362942;border:2px solid #ffecaa;box-shadow:0 5px 0 #ad7f57,inset 0 2px 0 #ffffff77;transform:translateY(-2px)}
body.in-room .lobby-steps .done{background:#344f4a;color:#b8f3d9;border:1px solid #77b8aa}
body.in-room .lobby-stage-kicker{color:#b9a3df;letter-spacing:.2em;font-size:11px;max-width:840px;margin:0 auto;position:relative;z-index:1}
body.in-room .stage-head{max-width:820px;margin:0 auto;position:relative;text-align:left;padding:32px 265px 22px 0;min-height:218px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;z-index:1}
body.in-room .stage-head h2{color:#fff9f4;font-size:clamp(30px,3.6vw,54px);line-height:1.3;font-weight:900;letter-spacing:-.065em;margin:0 0 11px;text-shadow:0 5px 22px #0b092b65}
body.in-room .stage-head p{color:#cfc3df;font-size:14px;line-height:1.85;margin:0;max-width:570px}
body.in-room .stage-hero-icon{position:absolute;right:0;top:0;display:block;width:274px;height:229px;font-size:0;margin:0;filter:drop-shadow(0 13px 18px #07041855);pointer-events:none}
body.in-room .stage-hero-icon img{width:100%;height:100%;object-fit:contain}
body.in-room .stage-meter{height:20px;background:#1c1731;border:2px solid #8f7ba5;box-shadow:inset 0 3px 6px #100b20;max-width:820px;margin:15px auto}
body.in-room .stage-meter>div{background:linear-gradient(90deg,#9bedcc,#ffe178,#ffafcf);box-shadow:0 0 14px #ffe18a66}
body.in-room .stage-count{color:#d2c5e2;font-size:14px}.stage-count strong{color:#ffe18b!important;font-size:23px!important}
body.in-room .ready-actions{margin:28px auto;gap:14px}
body.in-room .ready-actions .btn{font-size:16px;border-radius:17px;padding:15px 26px;min-height:74px;min-width:212px;transition:.16s;letter-spacing:.04em}
body.in-room .ready-actions .btn-main{background:#ffdc6e;border-color:#ffe6a6;color:#322543;box-shadow:0 7px 0 #a67b46}
body.in-room .ready-actions .btn-pink{background:#f5aeca;color:#38213f;border-color:#ffd0e2;box-shadow:0 7px 0 #a66e91}
body.in-room .ready-actions .btn-outline{background:#413250;border-color:#ad98bb;color:#fff}
body.in-room .ready-actions .tool{background:#403351;color:#ded0e7;border:1px solid #7b6a87;padding:12px 16px;border-radius:12px}
body.in-room .stage-footnote{color:#f7e8c9;margin:26px auto 0;font-size:14px}
body.in-room .stage-footnote p,body.in-room .stage-footnote .muted{color:#a69abb}
body.in-room .stage-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:10px 0 27px}
body.in-room .stage-game{display:flex;flex-direction:column;text-align:left;align-items:stretch;justify-content:flex-start;min-height:305px;gap:9px;padding:12px 13px 14px;background:#fff8e9!important;border:3px solid #bda2c8;border-radius:21px;box-shadow:0 8px 0 #0e0d20;transition:transform .16s,box-shadow .16s}
body.in-room .stage-game:nth-child(2){background:#fff1f6!important}
body.in-room .stage-game:nth-child(3){background:#edfff8!important}
body.in-room .stage-game:hover:not(:disabled){transform:translateY(-8px);box-shadow:0 15px 0 #101027;border-color:#ffe19b}
body.in-room .stage-game-icon{display:block;width:100%;height:153px;font-size:0;overflow:hidden;border-radius:13px;background:#493c6e}
body.in-room .stage-game-icon img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
body.in-room .stage-game:hover img{transform:scale(1.055)}
body.in-room .stage-game strong{font-size:18px;color:#312441;letter-spacing:-.03em;line-height:1.4;padding:3px 7px 0}
body.in-room .stage-game small{font-size:11px;color:#827187;padding:0 7px;line-height:1.5}
body.in-room .stage-game-arrow{margin:auto 0 0;background:#3a2d52;border-radius:10px;color:#ffe48d;padding:10px 12px;font-size:12px;letter-spacing:.07em;text-align:center;box-shadow:inset 0 2px 0 #ffffff17}
body.in-room .stage-picked{background:#413454;border:1px solid #8a78a4;color:#f9f1ff;padding:15px 20px;border-radius:16px}
body.in-room .stage-picked strong{color:#ffe28a}.stage-picked .tool{background:#372b45;border:1px solid #9a84b5;color:#f6eaff;border-radius:9px;padding:7px 11px}
body.in-room .lobby-stage .divider{background:#726080}
body.in-room .lobby-stage h4,body.in-room .lobby-stage .panel-title{color:#ffedc3}
body.in-room .lobby-stage .soft{background:#ffffff11;color:#e5d9ef;border:1px solid #8c739c}
body.in-room .lobby-stage .opt-group label{color:#e7d9f4;font-size:12px}
body.in-room .lobby-stage .select{background:#fef9ef;border:2px solid #cdbbd6;font-size:14px;color:#38283f;min-height:46px}
body.in-room .mode-checks label{background:#faf2ff;border:1px solid #a48caf;color:#382e48;font-size:12px;padding:12px}
body.in-room .lobby-stage .tiny.muted{color:#c2b6d2}
body.in-room .stage-start{background:linear-gradient(100deg,#5c496d,#42364f);border:2px solid #ab90aa;border-radius:18px;padding:21px 23px;color:#fff}
body.in-room .stage-start p{color:#cfc4da}
body.in-room .stage-launch{background:#ffe17c;color:#332542;box-shadow:0 5px 0 #ba8750;border:2px solid #ffefba;border-radius:14px;min-height:55px;font-size:17px}
body.in-room .stage-launch:hover:not(:disabled){background:#fff0a6}
body.in-room .history-collapse{background:#2c2242;color:#e4d9f0;border-color:#69577e}
/* Persistent party rail; never confused with current primary task */
body.in-room .layout-side>.card{background:#29213d;border:1px solid #716080;box-shadow:0 6px 0 #100d1b;color:#f5eefe;padding:19px;border-radius:20px}
body.in-room .layout-side .panel-title{color:#fff3da;font-size:15px;margin-bottom:15px}
body.in-room .layout-side .chip{background:#4c3e61;color:#e8d7f1;border:1px solid #655579}
body.in-room .layout-side .player{background:#3c3053;border:1px solid #60516c;border-radius:11px;padding:9px;color:#f9f2ff}
body.in-room .layout-side .player-name strong{font-size:12px;color:#fff4fc}
body.in-room .layout-side .player-name small{color:#bbaac9}
body.in-room .layout-side .avatar{width:34px;height:34px;border:1px solid #ffffff51}
body.in-room .layout-side .side-toggle{color:#f4e9f8;font-size:14px}
body.in-room .layout-side .side-toggle span:last-child{color:#bcabcd}
body.in-room .layout-side p.muted,body.in-room .layout-side .tiny.muted{color:#baacc8}
body.in-room .layout-side .divider{background:#584968}
body.in-room .layout-side .chat-log{background:#201a33;color:#efe4fc;border:1px solid #54435f;border-radius:13px}
body.in-room .layout-side .chat-row strong{color:#ffe08a}
body.in-room .layout-side .input{background:#f8f3fa}
body.in-room .layout-side .btn-ghost{background:#433451;color:#f0e5fa}
body.in-room .layout-side .btn-main{background:#ffe17b;color:#352842}
/* Main play surface: bright readable foreground inside a theatrical dark stage frame */
body.in-room .layout-main>.card:not(.lobby-stage){border:3px solid #88749d;background:#fffaf3;color:#342943;border-radius:25px;box-shadow:0 8px 0 #120e24,0 21px 45px #0a061a88;padding:clamp(20px,3vw,33px);min-height:500px}
body.in-room .layout-main>.card:not(.lobby-stage) h2,body.in-room .layout-main>.card:not(.lobby-stage) h3{color:#312543}
body.in-room .layout-main>.card:not(.lobby-stage) .choice{border:2px solid #d5bfdf;box-shadow:0 5px 0 #e9dbeb;min-height:85px;border-radius:17px}
body.in-room .layout-main>.card:not(.lobby-stage) .choice:hover:not(:disabled){transform:translateY(-3px);border-color:#a88ac5;box-shadow:0 8px 0 #c1a3d4}
body.in-room .layout-main>.card:not(.lobby-stage) .choice.selected{background:#fff0bd;border-color:#e6aa60;box-shadow:0 5px 0 #cfac7b}
body.in-room .layout-main>.card:not(.lobby-stage) .question{font-size:clamp(23px,2.6vw,36px);line-height:1.5}
body.in-room .layout-main>.card:not(.lobby-stage) .btn-main{background:#ffe179;border:2px solid #62496c;color:#302542;box-shadow:0 5px 0 #8f688c}
body.in-room #g3-shared{border-color:#5f4f75;box-shadow:0 7px 0 #d8cadf}
/* Always available side arcade button / floating minigames */
body.in-room .floating-mini{background:#fbf6f0;border-color:#a58abf;color:#352a45;box-shadow:0 9px 0 #30203d,0 30px 70px #0a071ccc}
body.in-room .countdown{background:#ffe5a8;border:2px solid #e6be7c;color:#4d354e}
body.in-room button:focus-visible,body.in-room a:focus-visible,body.in-room input:focus-visible,body.in-room select:focus-visible{outline:3px solid #ffe282;outline-offset:3px}
@media (max-width:1250px){body.in-room .arcade-hud{grid-template-columns:72px 1fr auto;gap:12px}body.in-room .hud-game-status{display:none}body.in-room .layout{grid-template-columns:minmax(0,1fr) 260px}body.in-room .site-header .head-live{display:none}}
@media (max-width:960px){body.in-room .layout{grid-template-columns:1fr}body.in-room .layout-side{grid-template-columns:repeat(2,minmax(0,1fr))}body.in-room .layout-side>.card:first-child{grid-row:span 2}body.in-room .arcade-hud{grid-template-columns:69px 1fr;gap:10px}body.in-room .room-top-buttons{grid-column:1/-1;justify-content:flex-start;max-width:none}body.in-room .stage-games{gap:12px}body.in-room .stage-game{min-height:245px}body.in-room .stage-game-icon{height:110px}body.in-room .stage-game strong{font-size:15px}body.in-room .stage-head{padding-right:220px}body.in-room .stage-hero-icon{width:219px}}
@media (max-width:700px){body.in-room .site-header{padding:9px 13px;min-height:74px}body.in-room .site-logo{font-size:13px;gap:8px}body.in-room .site-logo .mark{width:37px;height:37px}body.in-room .site-logo .mark img{height:45px;width:45px}body.in-room .site-logo .brand-text small{font-size:7px;letter-spacing:0}body.in-room .head-right{gap:5px}body.in-room .head-right>.tool{font-size:10px;min-height:35px;padding:4px 7px}body.in-room .head-right .icon-btn{height:34px;width:34px}body.in-room .wrap{padding:13px 11px 27px}body.in-room .arcade-hud{padding:13px;grid-template-columns:46px minmax(0,1fr);border-radius:17px}body.in-room .hud-icon{width:46px;height:50px;border-radius:12px}body.in-room .hud-icon img{height:55px;width:57px}body.in-room .hud-info h2{font-size:18px;white-space:normal}body.in-room .hud-info .eyebrow{font-size:8px}body.in-room .room-top-buttons .btn{font-size:10px;padding:6px 9px}body.in-room .room-code{font-size:11px}body.in-room .lobby-stage{min-height:480px;padding:18px 15px 27px;border-radius:21px}body.in-room .lobby-steps{gap:5px;margin-bottom:20px}body.in-room .lobby-steps span{min-height:41px;font-size:10px;padding:7px 3px}body.in-room .lobby-steps span b{font-size:9px}body.in-room .stage-head{min-height:0;padding:135px 0 10px;text-align:center;align-items:center}body.in-room .stage-hero-icon{top:-8px;left:50%;right:auto;transform:translateX(-50%);width:180px;height:145px}body.in-room .stage-head h2{font-size:30px}body.in-room .stage-head p{font-size:12px}body.in-room .stage-games{grid-template-columns:1fr}body.in-room .stage-game{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto auto;gap:4px 12px;min-height:138px;padding:10px}body.in-room .stage-game-icon{grid-row:1/4;width:120px;height:116px;align-self:center}body.in-room .stage-game strong{font-size:16px;align-self:end}body.in-room .stage-game small{font-size:11px}body.in-room .stage-game-arrow{align-self:start;padding:7px 11px;font-size:11px}body.in-room .ready-actions{gap:11px;flex-direction:column}body.in-room .ready-actions .btn{width:100%;max-width:320px;min-height:62px}body.in-room .layout-side{grid-template-columns:1fr}body.in-room .layout-side>.card:first-child{grid-row:auto}body.in-room .hud-ballot{padding:13px;gap:10px}body.in-room .hud-ballot-actions{width:100%}body.in-room .hud-ballot-actions .btn{flex:1}body.in-room .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){body.in-room .stage-game{grid-template-columns:101px 1fr}body.in-room .stage-game-icon{width:101px}body.in-room .stage-game strong{font-size:14px}body.in-room .mode-checks{grid-template-columns:1fr}body.in-room .settings-grid{grid-template-columns:1fr}body.in-room .site-logo .brand-text small{display:none}}
@media (prefers-reduced-motion:reduce){body.in-room .stage-game,body.in-room .stage-game-icon img,body.in-room .layout-main>.card:not(.lobby-stage) .choice{transition:none!important}body.in-room .stage-game:hover:not(:disabled){transform:none}}
/* Start screen: a full PC game launch screen, not a brochure-like website. */
body:not(.in-room){background:radial-gradient(ellipse at 80% 14%,#523a7b88,transparent 40%),radial-gradient(ellipse at 8% 78%,#60426572,transparent 35%),#1c162e;color:#fff8fd}
body:not(.in-room):before{content:"";position:fixed;inset:0;width:auto;height:auto;left:0;top:0;background-image:linear-gradient(#b8a1d00b 1px,transparent 1px),linear-gradient(90deg,#b8a1d00b 1px,transparent 1px);background-size:48px 48px;filter:none;opacity:1;z-index:-1}
body:not(.in-room) .site-header{max-width:1600px;padding:18px clamp(22px,3.6vw,64px);background:#17112691;border-bottom:1px solid #a690b729}
body:not(.in-room) .site-logo{color:#fff;font-size:18px}
body:not(.in-room) .site-logo .brand-text>span{color:#ffe0a4}
body:not(.in-room) .site-logo .brand-text small{color:#9f91b2}
body:not(.in-room) .site-logo .mark{width:55px;height:55px;overflow:hidden;background:#42325d;border:1px solid #8b77a1;box-shadow:0 4px 0 #141022;transform:none;border-radius:17px}
body:not(.in-room) .site-logo .mark img{width:70px;height:62px;max-width:none;object-fit:cover}
body:not(.in-room) .head-live{color:#d1c1dd}
body:not(.in-room) .head-right>.tool,body:not(.in-room) .icon-btn{background:#322643;border:1px solid #665477;color:#fff;border-radius:12px;font-size:12px;min-height:42px}
body:not(.in-room) .site-footer{border-color:#463950;color:#81718e;max-width:1500px}
body:not(.in-room) .arcade-home{max-width:1440px;padding-bottom:56px}
.arcade-home .hero{min-height:580px;margin:19px auto 35px;padding:46px clamp(22px,4vw,60px);border-radius:32px;border:2px solid #76628d;background:linear-gradient(135deg,#3d305f,#2a2243 60%,#211a33);box-shadow:0 12px 0 #0c0a16,0 35px 70px #09051588;overflow:hidden;position:relative;gap:10px}
.arcade-home .hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 47%,#ab8de440 0,transparent 38%);pointer-events:none}
.arcade-home .hero-copy{position:relative;z-index:2;padding-left:0}
.arcade-home .hero .sticker-top{color:#b6edda;font-size:12px;letter-spacing:.14em}
.arcade-home .hero h1{color:#fff8f6;font-size:clamp(45px,5.4vw,85px);letter-spacing:-.08em;line-height:1.23;text-shadow:0 10px 25px #110c2655;margin:20px 0}
.arcade-home .hero h1 span{color:#ffe084;text-shadow:0 6px 0 #a4736e44}
.arcade-home .hero .sub{color:#d5c9dd;font-size:15px;max-width:535px;line-height:2.1}
.arcade-home .hero-actions .btn{min-height:65px;border-radius:15px;font-size:16px;box-shadow:0 7px 0 #181022;padding:16px 24px}
.arcade-home .hero-actions .btn-main{background:#ffe17e;border:2px solid #fff0b0;color:#392941;box-shadow:0 7px 0 #a57d4b}
.arcade-home .hero-actions .btn-outline{background:#523d67;border:2px solid #9c7fac;color:#fff6fc;box-shadow:0 7px 0 #23182d}
.arcade-home .meta-line{color:#c0adcf}
.arcade-home .hero-art{height:480px}
.arcade-home .blob-card{width:470px;height:470px;border-radius:50%;background:#79629853;border:2px solid #a59ad44e;box-shadow:0 0 0 38px #d8b7ff08,0 0 0 76px #d8b7ff08;transform:none}
.arcade-home .blob-card:after{display:none}
.arcade-home .banana-mascot{height:400px;width:435px;transform:none;display:grid;place-items:center;filter:drop-shadow(0 20px 30px #0a081e88)}
.arcade-home .banana-mascot img{width:100%;height:100%;object-fit:contain}
.arcade-home .hero-sticker{background:#fff6e5;border:2px solid #eec7e5;color:#423450;box-shadow:0 6px 0 #221929}
.arcade-home .section-heading h2{color:#fff4fa;font-size:33px}
.arcade-home .section-heading .eyebrow{color:#e1a2ca}
.arcade-home .section-heading .micro{color:#b9a7d0}
.arcade-home .game-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.arcade-home .game-card{border:2px solid #7d6896;background:linear-gradient(158deg,#352a4c,#282038);padding:17px 17px 23px;border-radius:23px;box-shadow:0 8px 0 #0e0a1c,0 24px 55px #0b081f55}
.arcade-home .game-card:hover{transform:translateY(-7px);border-color:#ffd98a}
.arcade-home .game-visual{min-height:178px;max-height:210px;background:#4a3a69;border-radius:17px;overflow:hidden;margin-bottom:20px}
.arcade-home .game-visual:before{display:none}
.arcade-home .game-visual .mode-art{width:100%;height:210px;object-fit:cover;display:block}
.arcade-home .game-label{color:#c7afe9}
.arcade-home .game-card h3{color:#fff9ef;font-size:23px;margin:14px 0 8px}
.arcade-home .game-card p{color:#d3c4de;line-height:1.85;font-size:13px}
.arcade-home .chip{background:#4a3c5e;color:#e0d4ed;border:1px solid #756389}
.arcade-home .note-card{background:linear-gradient(100deg,#483761,#2f2643);border:1px solid #9b82ab;color:#fff5e6;box-shadow:0 6px 0 #0a0818}
.arcade-home .note-card p{color:#c5b4d2}
.arcade-home .btn-pink{background:#f6add0;border:2px solid #ffd3e5;box-shadow:0 6px 0 #aa6d93;color:#30243b}
/* Create/join page remains a simple foreground form inside game client theme. */
body:not(.in-room) .form-card{color:#372b42;background:#fff9f3;border:3px solid #b79ac6;box-shadow:0 9px 0 #141021,0 23px 50px #09071888}
@media(max-width:1020px){.arcade-home .hero{min-height:480px}.arcade-home .hero-art{height:350px}.arcade-home .banana-mascot{width:340px;height:330px}.arcade-home .blob-card{width:320px;height:320px}.arcade-home .hero-sticker{display:none}.arcade-home .game-cards{grid-template-columns:1fr 1fr}.arcade-home .game-card-chaos{grid-column:span 2}}
@media(max-width:690px){.arcade-home .hero{grid-template-columns:1fr;padding:26px 20px}.arcade-home .hero h1{font-size:46px}.arcade-home .hero-art{height:210px}.arcade-home .banana-mascot{height:215px;width:235px}.arcade-home .blob-card{width:210px;height:210px}.arcade-home .game-cards{grid-template-columns:1fr}.arcade-home .game-card-chaos{grid-column:span 1}.arcade-home .game-visual{min-height:125px;max-height:170px}.arcade-home .game-visual .mode-art{height:170px}}
/* Animated but non-distracting standby scene: don't leave spectators on a blank page */
body.in-room .waiting-scene{background:radial-gradient(circle at 50% 30%,#67547b,#322745 68%);border:2px solid #ad95bd;border-radius:24px;padding:23px 20px 25px;margin:24px 0 12px;text-align:center;color:#fff;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
body.in-room .waiting-scene:before{content:"";position:absolute;left:50%;top:37%;transform:translate(-50%,-50%);border-radius:50%;width:245px;height:245px;box-shadow:0 0 0 26px #ffffff07,0 0 0 53px #ffffff05;border:1px solid #eee4ff33}
body.in-room .waiting-visual{width:170px;height:126px;z-index:1;display:grid;place-items:center;margin-bottom:4px}
body.in-room .waiting-visual img{max-width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 11px 10px #201a35a6)}
body.in-room .waiting-scene h3{color:#fff5ed!important;font-size:18px;max-width:500px;line-height:1.7;z-index:1;margin:5px 0}
body.in-room .waiting-scene p{font-size:12px;color:#d3c5e3;z-index:1;margin:2px 0 15px}
body.in-room .waiting-scene-status{font-size:10px;font-weight:900;letter-spacing:.15em;color:#aef3d7;z-index:1}
body.in-room .waiting-pulse{width:8px;height:8px;display:inline-block;margin-right:5px;border-radius:50%;background:#aef3d7;box-shadow:0 0 14px #aef3d7}
body.in-room .waiting-lightbar{display:flex;gap:7px;z-index:1}
body.in-room .waiting-lightbar i{height:7px;width:22px;border-radius:5px;background:#8e779d;animation:idle-indicator 1.8s ease-in-out infinite alternate}
body.in-room .waiting-lightbar i:nth-child(3n){animation-delay:.4s}body.in-room .waiting-lightbar i:nth-child(2n){animation-delay:.8s}
@keyframes idle-indicator{from{background:#765e92;opacity:.55}to{background:#ffda7c;opacity:1}}
@media(prefers-reduced-motion:reduce){body.in-room .waiting-lightbar i{animation:none}}
/* v2.2 answer cards: illustrative scene + substantial readable copy, not text-only rows */
body.in-room .question-scene{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:center;background:linear-gradient(115deg,#4c386f,#35274d);border:2px solid #9678b4;border-radius:22px;padding:17px 23px 17px 16px;margin:15px 0 22px;box-shadow:0 6px 0 #1a132b;color:#fff}
body.in-room .question-scene>.scene-illustration{width:100%;height:auto;border-radius:17px;border:3px solid #f6dca2;box-shadow:0 6px 0 #28203c;aspect-ratio:360/170;object-fit:cover}
body.in-room .question-scene-copy{min-width:0}.question-scene-label{font-size:10px;letter-spacing:.15em;font-weight:900;color:#ffe196}
body.in-room .question-scene-copy h2{font-size:clamp(19px,2.1vw,30px);line-height:1.6;color:#fff7e7;margin:8px 0;letter-spacing:0}
body.in-room .question-scene-copy p{font-size:12px;color:#dfd1e9;margin:0}
body.in-room .scene-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:19px 0 24px}
body.in-room .scene-choice{border:3px solid #9180ab;border-radius:22px;background:#fffdf8;overflow:hidden;min-width:0;display:flex;flex-direction:column;text-align:left;padding:0;position:relative;box-shadow:0 7px 0 #33263c,0 15px 26px #130b2440;transition:transform .16s,box-shadow .16s,border-color .16s;cursor:pointer;color:#30283c;opacity:1}
body.in-room .scene-choice:hover:not(:disabled){transform:translateY(-5px);box-shadow:0 12px 0 #33263c,0 20px 26px #130b2440;border-color:#e2ae78}
body.in-room .scene-choice:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 #33263c}
body.in-room .scene-choice:disabled{cursor:default;opacity:.76;filter:saturate(.65)}
body.in-room .scene-choice.selected{border-color:#ffd976;box-shadow:0 0 0 3px #ffe9a557,0 7px 0 #866440;opacity:1;filter:none}
body.in-room .scene-choice-art{height:180px;width:100%;background:#efdef0;display:block;overflow:hidden}
body.in-room .scene-choice-art svg{width:100%;height:100%;display:block;object-fit:cover}
body.in-room .scene-choice-copy{display:flex;align-items:center;gap:14px;padding:17px 16px 12px;min-height:92px;line-height:1.5;flex:1;width:100%}
body.in-room .scene-choice-copy strong{font-size:clamp(13px,1.1vw,17px);font-weight:900;color:#3d3150;word-break:break-word}
body.in-room .scene-letter{width:43px;height:43px;border-radius:12px;border:2px solid #3e3151;background:#ffe38a;color:#3b2c4d;box-shadow:0 3px 0 #8e7080;display:grid;place-items:center;flex:none;font-size:21px;font-weight:950}
body.in-room .scene-choice-check{display:block;width:100%;padding:0 18px 14px;text-align:right;font-size:11px;font-weight:900;color:#7c688d}
body.in-room .scene-choice.selected .scene-choice-check{color:#84633a}
body.in-room .scene-result-inner{display:grid;grid-template-columns:150px minmax(0,1fr);gap:15px;align-items:center}
body.in-room .scene-result-art{border-radius:12px;overflow:hidden}.scene-result-art svg{display:block;width:100%;height:auto}
body.in-room .scene-result-info{min-width:0}.scene-result-info .space-between b{line-height:1.5}
body.in-room .scene-result-info .space-between span{white-space:nowrap}
@media(max-width:1120px){body.in-room .question-scene{grid-template-columns:200px minmax(0,1fr)}body.in-room .scene-choice-art{height:156px}}
@media(max-width:720px){body.in-room .question-scene{grid-template-columns:1fr;padding:12px 15px 19px;gap:16px}body.in-room .question-scene>.scene-illustration{max-height:155px}body.in-room .scene-choice-grid{gap:10px}body.in-room .scene-choice-art{height:105px}body.in-room .scene-choice-copy{padding:10px;gap:7px;align-items:flex-start;min-height:80px}body.in-room .scene-letter{height:31px;width:31px;font-size:15px}body.in-room .scene-choice-copy strong{font-size:12px}body.in-room .scene-choice-check{padding:0 9px 10px;font-size:10px}body.in-room .scene-result-inner{grid-template-columns:90px minmax(0,1fr);gap:9px}}
/* Feedback on every real action: click / loading / server confirmation */
body.in-room button{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,filter .15s ease}
body.in-room button:active:not(:disabled){transform:translateY(3px);filter:brightness(.94)}
body.in-room button:focus-visible{outline:3px solid #ffdf76;outline-offset:3px}
body.in-room button.is-submitting{position:relative;opacity:1!important;filter:saturate(.8);cursor:progress!important;pointer-events:none}
body.in-room button.is-submitting:after{content:attr(data-progress);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:inherit;background:#37294dec;color:#fff8d7;font-size:clamp(12px,1.05vw,15px);font-weight:900;letter-spacing:.03em;text-align:center;box-shadow:inset 0 0 0 2px #d0b4f0}
body.in-room .scene-choice-grid.has-pending button:not(.is-submitting){pointer-events:none;opacity:.55}
#game-action-indicator{pointer-events:none;position:fixed;z-index:150;left:50%;bottom:22px;transform:translate(-50%,14px);max-width:min(480px,calc(100vw - 30px));padding:13px 22px;border-radius:14px;background:#332549;color:#fff3d2;border:2px solid #aa8bcc;box-shadow:0 8px 0 #191028,0 16px 45px #0007;text-align:center;opacity:0;visibility:hidden;transition:opacity .17s,transform .17s;font-size:14px;font-weight:900}
#game-action-indicator.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){body.in-room button,#game-action-indicator{transition:none!important}}
body.in-room .question-scene .question{color:#fff9ed!important;text-shadow:0 2px 0 #2f224b;font-weight:950}

/* Explicit async artwork loading, readable failure and tap-to-retry. */
.art-load-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:110px;gap:9px;background:#fff9f1;border:1px dashed #b4a6bd;border-radius:12px;overflow:hidden;padding:7px}
.art-load-frame img:not([src]){display:none}
.art-load-frame.loaded{background:transparent;border:0;padding:0}
.art-load-frame.loaded img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
.art-load-frame .art-loading-label{font-size:12px;color:#786783;text-align:center}
.art-load-frame.loaded .art-loading-label,.art-load-frame.failed .art-loading-label{display:none}
.art-load-frame .art-retry{display:none}
.art-load-frame.failed .art-retry{display:inline-flex;min-height:38px}
.art-load-frame.failed::before{content:'⚠️ 畫作載入失敗';font-size:13px;font-weight:700;color:#8e4358}
.g3-history{margin-top:22px}.g3-history-round{margin:12px 0;background:#fffbf6;border:1px solid #ddd1e8;padding:12px;border-radius:13px}.g3-history-round summary{cursor:pointer;font-weight:750;color:#382b4f}.g3-history-round .chaos-gallery{margin-top:14px}

.g3-stroke-tip{display:block;font-size:12px;color:#776589;margin:5px}.g3-stroke-tip.failed{color:#a23c5f}