:root{--gb-accent:var(--bp-theme-color,#155eef);--gb-bg:#f3f7fc;--gb-card:#fff;--gb-text:#152033;--gb-muted:#6e7b90;--gb-line:#dbe5f1;--gb-gold:#f6b800}
*{box-sizing:border-box}.gb-shell{width:min(calc(100% - 360px),1480px);margin:0 auto;padding:28px 0 60px;color:var(--gb-text)}
.gb-hero,.gb-guide-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--gb-accent) 96%,#fff 4%),color-mix(in srgb,var(--gb-accent) 62%,#8b5cf6 38%));color:#fff;border-radius:26px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:28px;box-shadow:0 18px 50px color-mix(in srgb,var(--gb-accent) 22%,transparent)}
.gb-hero.compact{padding:25px 32px}.gb-kicker{font-size:12px;letter-spacing:1.7px;font-weight:900;opacity:.82}.gb-hero h1,.gb-guide-hero h1{font-size:38px;margin:7px 0 8px}.gb-hero p,.gb-guide-hero p{margin:0;line-height:1.7;max-width:850px}.gb-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.gb-btn{border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#e8eef7;color:#25364d}.gb-btn.primary{background:var(--gb-accent);color:#fff}.gb-hero .gb-btn.primary,.gb-guide-hero .gb-btn.primary{background:#fff;color:var(--gb-accent)}.gb-btn.ghost{background:rgba(255,255,255,.14);color:inherit;border:1px solid rgba(255,255,255,.26)}.gb-topbar .gb-btn.ghost{background:transparent;color:var(--gb-text);border:1px solid var(--gb-line)}
.gb-btn.small{padding:8px 12px;font-size:13px}.gb-btn.tiny{padding:6px 9px;font-size:11px}.gb-btn.danger{background:#fff1f2;color:#c5263d}.gb-btn.wide{width:100%;margin-top:16px}.gb-card{background:var(--gb-card);border:1px solid var(--gb-line);border-radius:20px;padding:22px;margin-top:20px;box-shadow:0 10px 30px rgba(28,44,69,.06)}.gb-card.mini{margin:0;padding:16px}.gb-card.mini.grow{min-height:280px}
.gb-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.gb-card h2,.gb-card h3{margin:0 0 14px}.gb-room-list{display:grid;gap:12px}.gb-room{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px;border:1px solid var(--gb-line);border-radius:15px}.gb-room-title{font-weight:900}.gb-room-meta{font-size:13px;color:var(--gb-muted);margin-top:5px}.gb-room-actions{display:flex;gap:7px;align-items:center}
.gb-modal{position:fixed;inset:0;background:rgba(12,21,36,.62);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}.gb-modal.show{display:flex}.gb-modal-card{width:min(520px,100%);background:var(--gb-card);color:var(--gb-text);border-radius:22px;padding:28px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.25)}.gb-x{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:28px;cursor:pointer;color:var(--gb-muted)}.gb-modal label,.gb-name{display:grid;gap:7px;font-weight:800;margin-top:15px}.gb-modal input,.gb-name input,.gb-answer-row input{border:1px solid var(--gb-line);background:var(--gb-card);color:var(--gb-text);border-radius:12px;padding:12px 14px;font-size:15px;outline:none}.gb-help{font-size:13px;color:var(--gb-muted);line-height:1.6}
.gb-character-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.gb-character{border:2px solid transparent;background:#f7f9fc;border-radius:17px;padding:10px;cursor:pointer;transition:.2s}.gb-character img{width:100%;aspect-ratio:3/4;object-fit:contain}.gb-character strong{display:block;margin-top:7px}.gb-character.selected{border-color:var(--gb-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gb-accent) 15%,transparent);transform:translateY(-2px)}
.gb-topbar{display:flex;justify-content:space-between;align-items:center;background:var(--gb-card);border:1px solid var(--gb-line);border-radius:16px;padding:12px 15px;margin-bottom:10px}.gb-live{color:#e22;font-weight:900;margin-right:9px}.gb-top-actions{display:flex;gap:8px}.gb-notice-banner{background:#fff8d9;border:1px solid #f1da7d;border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:800;color:#765b00}
.gb-game-layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:16px}.gb-board-wrap{min-width:0}.gb-score-strip{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:10px}.gb-score-strip span{background:var(--gb-card);border:1px solid var(--gb-line);border-radius:999px;padding:7px 11px;font-size:12px}
.gb-board{display:grid;grid-template-columns:86px repeat(5,1fr);grid-template-rows:60px repeat(5,108px);gap:6px;background:#dfe8f4;padding:7px;border-radius:20px;border:1px solid #cfdbeb;perspective:1100px}.gb-cell{position:relative;border:0;border-radius:12px;background:linear-gradient(145deg,#fff,#edf3fa);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;color:#32435c;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(88,111,143,.12)}.gb-cell.header{background:color-mix(in srgb,var(--gb-accent) 88%,#fff 12%);color:#fff;font-size:16px}.gb-cell.score{background:#17243a;color:#fff;font-size:18px}.gb-cell.problem{cursor:pointer;transform-style:preserve-3d;transition:transform .7s}.gb-cell.problem::before{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--gb-accent) 78%,#fff 22%),var(--gb-accent));color:#fff;font-size:31px}.gb-cell.problem.opened{animation:gbFlip .8s ease both;background:#fff4c9;color:#5c4800}.gb-cell.problem.opened::before{display:none}.gb-cell.problem.selectable{box-shadow:0 0 0 3px var(--gb-gold),0 0 20px rgba(246,184,0,.45);animation:gbPulse 1.3s infinite}.gb-cell.problem.disabled{cursor:default;opacity:.7}.gb-keyword{padding:8px;font-size:14px}.gb-keyword small{display:block;font-size:10px;opacity:.62;margin-top:5px}
@keyframes gbFlip{0%{transform:rotateY(0)}48%{transform:rotateY(92deg)}100%{transform:rotateY(360deg)}}@keyframes gbPulse{50%{transform:translateY(-3px)}}
.gb-question-card{background:var(--gb-card);border:1px solid var(--gb-line);border-radius:20px;padding:20px;margin-top:12px}.gb-qmeta{display:flex;gap:7px;flex-wrap:wrap}.gb-qmeta span{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px;background:#edf3fb;color:#47607f}.gb-question-card h2{font-size:21px;line-height:1.55;margin:13px 0}.gb-answer-row{display:grid;grid-template-columns:1fr auto;gap:8px}.gb-answer-stats{font-size:13px;color:var(--gb-muted);margin-top:10px;min-height:20px}
.gb-sidepanel{display:grid;gap:12px;align-content:start}.gb-my-avatar{height:210px;display:flex;align-items:center;justify-content:center;position:relative}.gb-my-avatar img{height:100%;max-width:100%}.gb-handwriting{position:absolute;left:50%;transform:translateX(-50%);top:96px;width:155px;text-align:center;font-size:22px;font-family:"Nanum Pen Script","Comic Sans MS",cursive;font-weight:700;color:#202020;pointer-events:none}.gb-rank{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--gb-line);font-size:13px}.gb-rank:last-child{border:0}.gb-notice-log{max-height:260px;overflow:auto;font-size:12px;line-height:1.55}.gb-notice-item{padding:7px 0;border-bottom:1px solid var(--gb-line)}.gb-notice-item.success,.gb-notice-item.golden{color:#996d00;font-weight:800}.gb-notice-item.revive{color:#bd2a58;font-weight:800}
.gb-guide-hero{margin-bottom:18px}.gb-guide-hero>div{flex:1}.gb-guide-hero img{width:420px;max-width:40%;background:rgba(255,255,255,.12);border-radius:22px;padding:8px}.gb-guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.gb-guide-card{background:var(--gb-card);border:1px solid var(--gb-line);border-radius:17px;padding:18px}.gb-guide-card b{font-size:16px}.gb-guide-card p{font-size:13px;color:var(--gb-muted);line-height:1.65;margin-bottom:0}.gb-mini-board{display:grid;grid-template-columns:70px repeat(5,1fr);gap:5px}.gb-mini-board>*{min-height:52px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eef3f9}.gb-mini-board>b{background:var(--gb-accent);color:#fff}
.gb-admock{width:160px;height:600px;border:1px dashed #b9c9dd;border-radius:14px;background:#f8fafd;color:#718198;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px}.gb-admock-content{width:100%;height:100px}.bp-side-ad{position:fixed;top:102px;z-index:80;width:160px;min-height:600px}.bp-side-ad--left{left:max(18px,calc((100vw - 1780px)/2))}.bp-side-ad--right{right:max(18px,calc((100vw - 1780px)/2))}.bp-content-ad{margin:26px 0 12px}.bp-content-ad__label{text-align:center;font-size:9px;color:#9aa6b6;letter-spacing:1.4px;margin-bottom:7px}
html.bp-dark,html.dark,body.dark,body.dark-mode,[data-theme="dark"]{--gb-bg:#09111f;--gb-card:#111c2b;--gb-text:#e8f0fb;--gb-muted:#9fb0c7;--gb-line:#28384e}html.bp-dark body,html.dark body,body.dark,body.dark-mode,[data-theme="dark"] body{background:var(--gb-bg)}html.bp-dark .gb-cell.problem.opened,body.dark .gb-cell.problem.opened{background:#403719;color:#ffe79a}html.bp-dark .gb-character,body.dark .gb-character{background:#162337}
@media(max-width:1300px){.gb-shell{width:min(calc(100% - 40px),1480px)}.bp-side-ad{display:none}.gb-game-layout{grid-template-columns:1fr 280px}.gb-board{grid-template-rows:55px repeat(5,95px)}}
@media(max-width:900px){.gb-game-layout{grid-template-columns:1fr}.gb-sidepanel{grid-template-columns:repeat(2,1fr)}.gb-character-grid{grid-template-columns:repeat(3,1fr)}.gb-guide-grid{grid-template-columns:repeat(2,1fr)}.gb-guide-hero{flex-direction:column}.gb-guide-hero img{max-width:100%;width:500px}.gb-board{grid-template-columns:54px repeat(5,minmax(90px,1fr));overflow:auto}.gb-topbar,.gb-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.gb-shell{width:calc(100% - 18px);padding-top:10px}.gb-hero,.gb-guide-hero{padding:24px 20px}.gb-hero h1,.gb-guide-hero h1{font-size:30px}.gb-sidepanel{grid-template-columns:1fr}.gb-guide-grid{grid-template-columns:1fr}.gb-character-grid{grid-template-columns:repeat(2,1fr)}.gb-answer-row{grid-template-columns:1fr}.gb-room{grid-template-columns:1fr}}
/* Goldenbell refined board + practice room */
.gb-shell{width:min(calc(100% - 360px),1360px)}
.gb-room-type-banner{margin:-2px 0 12px;padding:10px 15px;border-radius:12px;background:#eef4ff;border:1px solid #cddcff;color:#31507f;font-size:13px}.gb-room-type-banner.practice{background:#ecfdf5;border-color:#a7f3d0;color:#166534}
.gb-practice-badge,.gb-live-badge{display:inline-flex;margin-left:7px;padding:3px 8px;border-radius:999px;font-size:10px}.gb-practice-badge{background:#dcfce7;color:#166534}.gb-live-badge{background:#fee2e2;color:#991b1b}
.gb-board{gap:8px;padding:10px;background:linear-gradient(145deg,#eaf1fa,#d8e4f2);box-shadow:0 18px 42px rgba(35,62,99,.12)}
.gb-cell.header{font-size:19px}.gb-cell.header.cat-0{background:linear-gradient(135deg,#2563eb,#3b82f6)}.gb-cell.header.cat-1{background:linear-gradient(135deg,#7c3aed,#a855f7)}.gb-cell.header.cat-2{background:linear-gradient(135deg,#db2777,#f43f5e)}.gb-cell.header.cat-3{background:linear-gradient(135deg,#d97706,#f59e0b)}.gb-cell.header.cat-4{background:linear-gradient(135deg,#059669,#14b8a6)}
.gb-cell.score{flex-direction:column;gap:1px}.gb-cell.score small{font-size:9px;opacity:.75}.gb-cell.score b{font-size:22px}.gb-cell.score-0{background:#475569}.gb-cell.score-1{background:#2563eb}.gb-cell.score-2{background:#7c3aed}.gb-cell.score-3{background:#ea580c}.gb-cell.score-4{background:#dc2626}
.gb-cell.problem{background:#10264a;transition:transform 1.35s cubic-bezier(.2,.72,.2,1)}.gb-card-back{position:absolute;inset:6px;border-radius:9px;border:2px solid rgba(255,255,255,.72);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;color:#fff;background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 5px,transparent 5px 11px),linear-gradient(145deg,#173c78,#0e2854);box-shadow:inset 0 0 0 3px rgba(255,255,255,.09)}.gb-card-back b{font:900 36px/1 Georgia,serif}.gb-card-back i{font-style:normal;font-size:12px;opacity:.72}.gb-cell.problem.cat-1 .gb-card-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 5px,transparent 5px 11px),linear-gradient(145deg,#5b21b6,#341273)}.gb-cell.problem.cat-2 .gb-card-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 5px,transparent 5px 11px),linear-gradient(145deg,#be185d,#701a3f)}.gb-cell.problem.cat-3 .gb-card-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 5px,transparent 5px 11px),linear-gradient(145deg,#b45309,#78350f)}.gb-cell.problem.cat-4 .gb-card-back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 5px,transparent 5px 11px),linear-gradient(145deg,#047857,#064e3b)}
.gb-cell.problem.opened{background:linear-gradient(145deg,#fff9dc,#ffefad);color:#4b3a05}.gb-cell.problem.just-opened{animation:gbSlowFlip 1.45s cubic-bezier(.2,.7,.2,1) both}.gb-keyword{font-size:18px}.gb-keyword small{font-size:12px;margin-top:8px}.gb-question-card h2{font-size:24px}.gb-qmeta span{font-size:13px}
.gb-person{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--gb-line);font-size:12px}.gb-person small{color:var(--gb-muted);max-width:115px;overflow:hidden;text-overflow:ellipsis}.gb-roster-watch{margin-top:14px!important}
@keyframes gbSlowFlip{0%{transform:rotateY(0) scale(1)}48%{transform:rotateY(90deg) scale(.94)}58%{transform:rotateY(90deg) scale(.94)}100%{transform:rotateY(360deg) scale(1)}}
html.bp-dark .gb-card-back,body.dark .gb-card-back{border-color:rgba(255,255,255,.48)}
@media(max-width:1300px){.gb-shell{width:min(calc(100% - 40px),1360px)}}

/* Practice UX / premium card backs */
.gb-cell.problem{position:relative;overflow:hidden;box-shadow:0 5px 12px rgba(15,37,67,.22),inset 0 1px 0 rgba(255,255,255,.55)}
.gb-card-back{position:absolute;inset:4px;border-radius:11px;overflow:hidden;border:1px solid rgba(255,255,255,.72);display:block!important;box-shadow:inset 0 0 0 2px rgba(7,74,48,.30),inset 0 0 0 5px rgba(255,255,255,.10),inset 0 13px 22px rgba(255,255,255,.18),0 2px 5px rgba(0,0,0,.18)}
.gb-card-back::before,.gb-card-back::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.28);border-radius:8px}.gb-card-back::after{inset:13px;border-color:rgba(0,40,50,.22)}
.gb-card-shine{position:absolute;left:-20%;top:-36%;width:90%;height:70%;transform:rotate(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent)}
.gb-card-dot{position:absolute;left:14px;top:12px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.76)}
.gb-card-diamond{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(255,255,255,.34);border-radius:10px;display:flex;align-items:center;justify-content:center}
.gb-card-diamond em{transform:rotate(-45deg);font-style:normal;font-size:8px;line-height:1.05;font-weight:900;color:rgba(255,255,255,.92);text-align:center}
.gb-card-back>b{position:absolute;right:13px;bottom:9px;font:900 25px/1 Georgia,serif;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.32)}
.gb-cell.problem.cat-0 .gb-card-back{background:linear-gradient(155deg,#6ad7a3,#269567 48%,#176c4c)}
.gb-cell.problem.cat-1 .gb-card-back{background:linear-gradient(155deg,#7bc6ff,#3687dc 48%,#245b9f)}
.gb-cell.problem.cat-2 .gb-card-back{background:linear-gradient(155deg,#d08df1,#9750c2 48%,#653282)}
.gb-cell.problem.cat-3 .gb-card-back{background:linear-gradient(155deg,#ffc66d,#ee9634 48%,#b96316)}
.gb-cell.problem.cat-4 .gb-card-back{background:linear-gradient(155deg,#62ddd0,#25aa9c 48%,#157568)}
.gb-cell.problem.selectable:hover .gb-card-back{filter:brightness(1.08);box-shadow:inset 0 0 0 2px rgba(255,255,255,.46),0 0 0 3px rgba(255,208,74,.55)}
.gb-cell.problem.just-opened{animation:gbSlowFlip2 1.75s cubic-bezier(.22,.74,.22,1) both}
@keyframes gbSlowFlip2{0%{transform:rotateY(0) scale(1)}42%{transform:rotateY(88deg) scale(.93)}56%{transform:rotateY(96deg) scale(.92)}100%{transform:rotateY(360deg) scale(1)}}
.gb-keyword strong{display:block;font-size:21px;font-weight:900}.gb-keyword small{display:block;font-size:12px;font-weight:800;margin-top:8px;opacity:.72}
.gb-practice-next-row{display:flex;justify-content:flex-end;margin-top:10px}.gb-next-question{display:none;min-width:150px;justify-content:center}.gb-start-btn{margin-left:10px}
.gb-my-avatar{min-height:245px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,rgba(239,246,255,.60),rgba(255,255,255,.18))}
.gb-avatar-stage{position:relative;width:100%;max-width:220px;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}.gb-avatar-stage img{width:100%;height:100%;object-fit:contain;display:block}
.gb-board-answer{position:absolute;left:50%;transform:translateX(-50%) rotate(-1deg);width:58%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:"Nanum Pen Script","Gaegu","Segoe Print","Comic Sans MS",cursive;font-size:21px;font-weight:700;color:#172033;letter-spacing:-.8px;pointer-events:none}
.gb-avatar-stage.stage-1 .gb-board-answer{top:59%}.gb-avatar-stage.stage-2 .gb-board-answer{top:53%}.gb-avatar-stage.stage-3 .gb-board-answer{top:43%}.gb-avatar-stage.stage-4 .gb-board-answer{top:23%}.gb-avatar-stage.stage-5 .gb-board-answer{top:10%}
.gb-handwriting{min-height:24px;margin-top:4px;text-align:center;font-family:"Nanum Pen Script","Gaegu","Segoe Print",cursive;font-size:18px;color:var(--gb-muted)}


/* === 2026-08-20 board polish / one-way 180deg flip / avatar === */
.gb-cell.corner{
 background:linear-gradient(155deg,#17253f 0%,#0d1730 55%,#081020 100%)!important;
 color:#ffd966!important;border:1px solid #30476d!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 5px 12px rgba(9,20,42,.22)!important;
 display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
}
.gb-corner-bell{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff6bd 0 10%,#ffd358 34%,#e59a13 72%,#9d5d00 100%);box-shadow:0 0 0 2px rgba(255,217,102,.22),0 5px 10px rgba(0,0,0,.22);font-size:19px;filter:saturate(.9)}
.gb-cell.corner small{font-size:7px;letter-spacing:.8px;color:#f8df93;font-weight:900}
.gb-cell.header{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.38)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -12px 24px rgba(0,0,0,.08),0 5px 11px rgba(33,55,91,.18)!important;font-size:18px!important;letter-spacing:-.4px!important;text-shadow:0 1px 2px rgba(0,0,0,.17);border-radius:12px!important}
.gb-cell.header::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.25);border-radius:9px;pointer-events:none}
.gb-cell.header::after{content:"✦";position:absolute;right:10px;top:6px;font-size:8px;color:rgba(255,255,255,.7)}
.gb-cell.header.cat-0{background:linear-gradient(145deg,#62d49b,#188559)!important}
.gb-cell.header.cat-1{background:linear-gradient(145deg,#69bcff,#2a72c9)!important}
.gb-cell.header.cat-2{background:linear-gradient(145deg,#c67dea,#813daf)!important}
.gb-cell.header.cat-3{background:linear-gradient(145deg,#ffb653,#dc7815)!important}
.gb-cell.header.cat-4{background:linear-gradient(145deg,#51d7c6,#128d7d)!important}
.gb-cell.score{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.30)!important;border-radius:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -16px 28px rgba(0,0,0,.13),0 5px 10px rgba(35,52,82,.18)!important;text-shadow:0 2px 3px rgba(0,0,0,.22)}
.gb-cell.score::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.20);border-radius:8px}
.gb-cell.score small{position:relative;z-index:1;font-size:7px!important;letter-spacing:.8px;color:rgba(255,255,255,.78)!important}.gb-cell.score b{position:relative;z-index:1;font-size:22px!important}
.gb-cell.score-0{background:linear-gradient(150deg,#597a9f,#344d70)!important}.gb-cell.score-1{background:linear-gradient(150deg,#4d91ef,#2764bd)!important}.gb-cell.score-2{background:linear-gradient(150deg,#9b5cf0,#6e2ecb)!important}.gb-cell.score-3{background:linear-gradient(150deg,#ff914c,#d94f0b)!important}.gb-cell.score-4{background:linear-gradient(150deg,#ff4c50,#cf202b)!important}

/* true one-way card reveal: covered -> 180deg -> front */
.gb-cell.problem{transform-style:preserve-3d;transition:none!important;perspective:900px}
.gb-cell.problem.opened{transform:rotateY(180deg)}
.gb-cell.problem.just-opened{animation:gbFlip180 1s cubic-bezier(.22,.72,.25,1) forwards!important}
@keyframes gbFlip180{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
.gb-card-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gb-keyword{position:absolute;inset:4px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);background:linear-gradient(145deg,#fff8d8,#ffe8a1);border:1px solid #efce67;box-shadow:inset 0 1px 0 #fff,0 3px 9px rgba(87,67,16,.16);color:#5a4310}
.gb-keyword strong{font-size:22px!important}.gb-keyword small{font-size:12px!important}

.gb-my-avatar{min-height:300px!important;padding:6px!important;position:relative;background:radial-gradient(circle at 50% 20%,#fff 0,#f4f8ff 42%,#eef4fb 100%)!important;border:1px solid #e2eaf4}
.gb-avatar-stage{width:100%!important;max-width:280px!important;height:286px!important;aspect-ratio:auto!important}
.gb-avatar-stage img{width:100%!important;height:100%!important;object-fit:contain!important;transform:scale(1.65);transform-origin:center center}
.gb-board-answer{display:none!important;font-family:"Nanum Pen Script","Gaegu","Nanum Brush Script",cursive!important;font-size:28px!important;font-weight:400!important;line-height:1!important;color:#111827!important;z-index:5;transform:translateX(-50%) rotate(-1.5deg)!important;text-overflow:clip!important}
.gb-avatar-stage.stage-5 .gb-board-answer{display:block!important;top:36%!important;width:42%!important}
.gb-handwriting{display:none!important}
html.bp-dark .gb-my-avatar,body.dark .gb-my-avatar{background:radial-gradient(circle at 50% 20%,#1d2b3e,#111b2b 65%,#0d1624)!important;border-color:#334155}

/* 2026-08-20 admin/practice/avatar fixes */
.gb-topbar .gb-live{font-size:15px;font-weight:900;letter-spacing:.2px}
.gb-my-avatar{min-height:285px!important;padding:6px!important;background:linear-gradient(180deg,#f8fbff,#eef5ff)!important}
.gb-avatar-stage{width:100%!important;max-width:250px!important;aspect-ratio:3/4!important;margin:auto!important}
.gb-avatar-stage img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
html.bp-dark .gb-my-avatar{background:linear-gradient(180deg,#17243a,#101b2c)!important}

/* A구역 캐릭터 표시영역: desktop sidepanel 315px - card horizontal padding 32px - border ≈ 281px */
.gb-sidepanel>.gb-card.mini:first-child{padding:14px!important}
.gb-sidepanel>.gb-card.mini:first-child .gb-my-avatar{
  width:100%!important;
  height:285px!important;
  min-height:285px!important;
  padding:0!important;
  overflow:hidden!important;
}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  aspect-ratio:auto!important;
  margin:0!important;
}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}

/* A-region final sizing */
.gb-sidepanel>.gb-card.mini:first-child .gb-my-avatar{width:100%!important;height:285px!important;min-height:285px!important;display:block!important;position:relative!important;overflow:hidden!important}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage img{position:absolute!important;left:50%!important;top:50%!important;width:118%!important;height:118%!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important;object-fit:contain!important}

/* Rebuilt behavior only: keep current board visuals */
.gb-cell.problem.just-opened{animation:gbOpen180 1s ease-in-out both;transform-style:preserve-3d}
@keyframes gbOpen180{0%{transform:rotateY(0deg)}100%{transform:rotateY(180deg)}}
.gb-cell.problem.just-opened .gb-keyword{transform:rotateY(180deg)}

.gb-sidepanel>.gb-card.mini:first-child .gb-my-avatar{
  width:100%!important;height:285px!important;min-height:285px!important;
  padding:0!important;display:block!important;position:relative!important;overflow:hidden!important;
}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;aspect-ratio:auto!important;margin:0!important
}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage img{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;display:block!important
}
.gb-board-answer{
  z-index:3!important;
  font-family:"Nanum Pen Script","Gaegu","Segoe Print",cursive!important;
  font-size:25px!important;font-weight:700!important
}
/* New cropped square stage assets position the board much larger. */
.gb-avatar-stage.stage-5 .gb-board-answer{top:18%!important;width:62%!important}

/* =========================================================
   Goldenbell 2026-08 UI normalization
   ========================================================= */
:root{
 --gb-accent:var(--bp-theme-color,var(--bp-header-accent,#356BF0));
 --gb-accent-soft:color-mix(in srgb,var(--gb-accent) 12%,#fff);
 --gb-surface:#fff;
 --gb-surface-2:#f6f9fd;
 --gb-border:#d7e3f1;
 --gb-text:#15243a;
 --gb-muted:#6f8198;
}
.gb-shell,.gb-theme-root{--gb-accent:var(--bp-theme-color,var(--bp-header-accent,#356BF0))}
.gb-titlebar{
 min-height:76px!important;
 padding:14px 18px!important;
 border:1px solid color-mix(in srgb,var(--gb-accent) 25%,#d8e2ef)!important;
 background:linear-gradient(135deg,color-mix(in srgb,var(--gb-accent) 12%,#fff),#fff)!important;
 box-shadow:0 10px 28px color-mix(in srgb,var(--gb-accent) 9%,transparent)!important;
}
.gb-titlebar-name{display:flex;align-items:center;gap:10px;min-width:0;color:var(--gb-text)}
.gb-titlebar-name strong{font-size:24px!important;font-weight:900;letter-spacing:-.7px}
.gb-titlebar-icon{font-size:28px}
.gb-top-actions .gb-btn{font-size:14px!important;min-height:40px}
.gb-room-top-ad .bp-content-ad{margin:10px 0 14px!important}
.gb-room-top-ad .bp-content-ad__slot{min-height:100px!important}

/* Raise small typography one step */
.gb-score-strip,.gb-qmeta,.gb-room-meta,.gb-help,.gb-person small,.gb-notice-item,.gb-answer-stats{font-size:13px!important}
.gb-cell.header{font-size:18px!important}
.gb-cell.score small{font-size:9px!important}
.gb-cell.score b{font-size:23px!important}
.gb-keyword small{font-size:13px!important}
.gb-keyword strong{font-size:22px!important}
.gb-sidepanel h3{font-size:18px!important}
.gb-rank,.gb-person{font-size:14px!important}
.gb-question-card h2{font-size:22px!important}
.gb-answer-row input{font-size:16px!important}
.gb-btn{font-size:14px}

/* Theme color follows site's 7-theme system */
.gb-hero,.gb-btn.primary,.gb-theme-chip.active{
 background:linear-gradient(135deg,
   color-mix(in srgb,var(--gb-accent) 92%,#fff 8%),
   color-mix(in srgb,var(--gb-accent) 82%,#10204a 18%))!important;
}
.gb-character.selected,.gb-cell.problem.selectable{border-color:var(--gb-accent)!important}
.gb-titlebar,.gb-card,.gb-question-card,.gb-board-wrap,.gb-sidepanel .gb-card{transition:background-color .25s,border-color .25s,color .25s}

/* Complete dark mode */
html.bp-dark,body.bp-dark,html[data-theme="dark"],body[data-theme="dark"]{
 --gb-surface:#101a29;
 --gb-surface-2:#152235;
 --gb-border:#2a3b52;
 --gb-text:#edf3fb;
 --gb-muted:#98a8bd;
}
html.bp-dark .gb-titlebar,body.bp-dark .gb-titlebar,html[data-theme="dark"] .gb-titlebar,
html.bp-dark .gb-card,body.bp-dark .gb-card,html[data-theme="dark"] .gb-card,
html.bp-dark .gb-question-card,body.bp-dark .gb-question-card,html[data-theme="dark"] .gb-question-card,
html.bp-dark .gb-board-wrap,body.bp-dark .gb-board-wrap,html[data-theme="dark"] .gb-board-wrap{
 background:#101a29!important;border-color:#2a3b52!important;color:#edf3fb!important
}
html.bp-dark .gb-titlebar-name,body.bp-dark .gb-titlebar-name,html[data-theme="dark"] .gb-titlebar-name{color:#edf3fb!important}
html.bp-dark .gb-board,body.bp-dark .gb-board,html[data-theme="dark"] .gb-board{background:#0b1421!important;border-color:#2d425f!important}
html.bp-dark .gb-cell.corner,body.bp-dark .gb-cell.corner,html[data-theme="dark"] .gb-cell.corner{background:#0d1726!important;border-color:#30445d!important}
html.bp-dark .gb-cell.score,body.bp-dark .gb-cell.score,html[data-theme="dark"] .gb-cell.score{filter:brightness(.78) saturate(.86)}
html.bp-dark .gb-cell.problem,body.bp-dark .gb-cell.problem,html[data-theme="dark"] .gb-cell.problem{box-shadow:0 5px 14px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.09)!important}
html.bp-dark .gb-keyword,body.bp-dark .gb-keyword,html[data-theme="dark"] .gb-keyword{background:#17263a!important;color:#edf3fb!important}
html.bp-dark .gb-my-avatar,body.bp-dark .gb-my-avatar,html[data-theme="dark"] .gb-my-avatar{background:#0c1624!important;border-color:#2b3e56!important}
html.bp-dark .gb-answer-row input,body.bp-dark .gb-answer-row input,html[data-theme="dark"] .gb-answer-row input{background:#0c1624!important;color:#eef4fc!important;border-color:#31465f!important}
html.bp-dark .gb-score-strip span,body.bp-dark .gb-score-strip span,html[data-theme="dark"] .gb-score-strip span{background:#152235!important;border-color:#2d415a!important;color:#eaf1fa!important}
html.bp-dark .gb-room,body.bp-dark .gb-room,html[data-theme="dark"] .gb-room{background:#101a29!important;border-color:#2a3b52!important;color:#edf3fb!important}
html.bp-dark .gb-room-meta,body.bp-dark .gb-room-meta,html[data-theme="dark"] .gb-room-meta{color:#9eb0c6!important}

/* Force Goldenbell game-room title bar */
.gb-game-shell .gb-topbar.gb-titlebar{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 min-height:82px!important;
 padding:15px 18px!important;
 margin-bottom:10px!important;
 border-radius:16px!important;
 border:1px solid color-mix(in srgb,var(--gb-accent,#356BF0) 28%,#d5e1f1)!important;
 background:
   linear-gradient(135deg,
     color-mix(in srgb,var(--gb-accent,#356BF0) 13%,#fff 87%) 0%,
     color-mix(in srgb,var(--gb-accent,#356BF0) 5%,#fff 95%) 100%)!important;
 box-shadow:0 8px 24px color-mix(in srgb,var(--gb-accent,#356BF0) 10%,transparent)!important;
}
.gb-game-shell .gb-titlebar-name{
 display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important
}
.gb-game-shell .gb-titlebar-icon{font-size:30px!important;line-height:1!important}
.gb-game-shell .gb-titlebar-name>strong{
 display:inline-block!important;
 font-size:25px!important;
 line-height:1.2!important;
 font-weight:900!important;
 color:var(--gb-text,#15243a)!important;
 letter-spacing:-.7px!important
}
.gb-game-shell .gb-titlebar-room{
 font-size:14px!important;font-weight:800!important;color:var(--gb-muted,#6f8198)!important
}
.gb-game-shell .gb-live{display:none!important}
html.bp-dark .gb-game-shell .gb-topbar.gb-titlebar,
body.bp-dark .gb-game-shell .gb-topbar.gb-titlebar,
html[data-theme="dark"] .gb-game-shell .gb-topbar.gb-titlebar{
 background:linear-gradient(135deg,#15243a,#101a29)!important;
 border-color:#30435d!important
}
html.bp-dark .gb-game-shell .gb-titlebar-name>strong,
body.bp-dark .gb-game-shell .gb-titlebar-name>strong,
html[data-theme="dark"] .gb-game-shell .gb-titlebar-name>strong{color:#f1f6fd!important}

/* Lobby hero action buttons: keep labels readable on every theme */
.gb-hero .gb-hero-actions .gb-btn,
.gb-hero .gb-hero-actions a.gb-btn,
.gb-hero .gb-hero-actions button.gb-btn{
 color:#fff!important;
 opacity:1!important;
 -webkit-text-fill-color:#fff!important;
 text-shadow:0 1px 1px rgba(0,0,0,.16)!important;
}
.gb-hero .gb-hero-actions .gb-btn.primary{
 background:rgba(255,255,255,.96)!important;
 color:var(--gb-accent,#155EEF)!important;
 -webkit-text-fill-color:var(--gb-accent,#155EEF)!important;
 border-color:rgba(255,255,255,.98)!important;
 text-shadow:none!important;
}
.gb-hero .gb-hero-actions .gb-btn.ghost{
 background:rgba(255,255,255,.12)!important;
 color:#fff!important;
 -webkit-text-fill-color:#fff!important;
 border-color:rgba(255,255,255,.36)!important;
}
html.bp-dark .gb-hero .gb-hero-actions .gb-btn.primary,
body.bp-dark .gb-hero .gb-hero-actions .gb-btn.primary,
html[data-theme="dark"] .gb-hero .gb-hero-actions .gb-btn.primary{
 background:#f4f7fb!important;
 color:var(--gb-accent,#155EEF)!important;
 -webkit-text-fill-color:var(--gb-accent,#155EEF)!important;
}


/* =========================================================
   Goldenbell whiteboard animation - 800x600 landscape assets
   ========================================================= */
.gb-sidepanel>.gb-card.mini:first-child .gb-my-avatar{
  height:300px!important;
  min-height:300px!important;
  padding:0!important;
  overflow:hidden!important;
  position:relative!important;
}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  aspect-ratio:4/3!important;
  margin:0!important;
}
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  display:block!important;
}

/* The typed answer appears only when stage 5 reaches its final position. */
.gb-avatar-stage .gb-board-answer{display:none!important}
.gb-avatar-stage.stage-5 .gb-board-answer{
  display:flex!important;
  position:absolute!important;
  left:50%!important;
  top:7.5%!important;
  transform:translateX(-50%) rotate(-1deg)!important;
  width:54%!important;
  height:24%!important;
  padding:0 5%!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  z-index:8!important;
  color:#172033!important;
  font-size:clamp(20px,2vw,30px)!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:-1px!important;
  pointer-events:none!important;
  text-shadow:0 .5px 0 rgba(0,0,0,.12);
}

/* Six distinct handwriting personalities.
   These use browser/system fallbacks now; supplied font files can replace them later. */
.gb-char-boy.stage-5 .gb-board-answer{
  font-family:"Gaegu","Nanum Pen Script","Segoe Print",cursive!important;
  transform:translateX(-50%) rotate(-1.6deg)!important;
}
.gb-char-girl.stage-5 .gb-board-answer{
  font-family:"Nanum Pen Script","Gaegu","Comic Sans MS",cursive!important;
  transform:translateX(-50%) rotate(.8deg)!important;
}
.gb-char-young_man.stage-5 .gb-board-answer{
  font-family:"Segoe Print","Nanum Pen Script","Gaegu",cursive!important;
  transform:translateX(-50%) rotate(-.6deg)!important;
}
.gb-char-young_woman.stage-5 .gb-board-answer{
  font-family:"Nanum Pen Script","Segoe Print","Gaegu",cursive!important;
  font-style:italic!important;
  transform:translateX(-50%) rotate(1deg)!important;
}
.gb-char-middle_man.stage-5 .gb-board-answer{
  font-family:"Gaegu","Segoe Print","Nanum Pen Script",cursive!important;
  font-weight:700!important;
  transform:translateX(-50%) rotate(-.3deg)!important;
}
.gb-char-middle_woman.stage-5 .gb-board-answer{
  font-family:"Nanum Pen Script","Gaegu","Segoe Print",cursive!important;
  font-size:clamp(19px,1.9vw,28px)!important;
  transform:translateX(-50%) rotate(.4deg)!important;
}

/* Quick frame changes: no crossfade, so the five PNGs read like a flipbook animation. */
.gb-avatar-stage img{will-change:contents}


/* Practice start button interaction */
.gb-start-btn{
  position:relative;
  min-width:118px;
  transition:transform .11s ease,box-shadow .11s ease,filter .11s ease!important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--gb-accent,#356BF0) 28%,transparent)!important;
  user-select:none;
}
.gb-start-btn:hover:not(:disabled){
  filter:brightness(1.04);
  box-shadow:0 8px 18px color-mix(in srgb,var(--gb-accent,#356BF0) 32%,transparent)!important;
}
.gb-start-btn:active:not(:disabled),
.gb-start-btn.is-pressing{
  transform:translateY(2px) scale(.97)!important;
  box-shadow:0 2px 6px color-mix(in srgb,var(--gb-accent,#356BF0) 25%,transparent)!important;
  filter:brightness(.96);
}
.gb-start-btn.is-started{transform:scale(.96)!important;filter:brightness(1.08)}
.gb-start-btn:disabled{cursor:wait;opacity:.82}
.gb-start-error{
  display:inline-block;
  margin-left:10px;
  padding:6px 9px;
  border-radius:9px;
  background:#fff1f2;
  color:#b42336;
  font-size:13px;
  font-weight:800;
}
html.bp-dark .gb-start-error,
html[data-theme="dark"] .gb-start-error{
  background:#3a1820;
  color:#ffb5c0;
}


/* Lobby room access / invitation / closure controls */
.gb-access-choice{display:grid;gap:9px;margin-top:16px}.gb-access-choice>strong{font-size:14px}
.gb-radio-card{display:flex!important;align-items:flex-start;gap:10px!important;margin:0!important;padding:12px 13px;border:1px solid var(--gb-line);border-radius:12px;background:color-mix(in srgb,var(--gb-card) 94%,var(--gb-accent) 6%);cursor:pointer}
.gb-radio-card input{margin-top:4px}.gb-radio-card span{display:grid;gap:2px}.gb-radio-card b{font-size:14px}.gb-radio-card small,.gb-invite-code-wrap small{font-size:12px;color:var(--gb-muted);font-weight:500}
.gb-invite-code-wrap{margin-top:14px}.gb-access-badge{display:inline-flex;align-items:center;margin-left:6px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:900}.gb-access-badge.open{background:#e8f5ff;color:#155ca3}.gb-access-badge.invite{background:#f4eaff;color:#6b2da0}
.gb-room-actions{flex-wrap:wrap;justify-content:flex-end}.gb-room-actions .gb-btn{white-space:nowrap}
.gb-invite-preview{margin-top:14px;padding:14px;border:1px solid var(--gb-line);border-radius:13px;background:color-mix(in srgb,var(--gb-accent) 5%,var(--gb-card));font-size:13px;line-height:1.6}.gb-invite-preview p{margin:5px 0}.gb-invite-preview .gb-btn{margin-top:7px}
.gb-close-consent-card{width:min(470px,100%)}.gb-close-consent-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
html.bp-dark .gb-radio-card,html[data-theme="dark"] .gb-radio-card,html.bp-dark .gb-invite-preview,html[data-theme="dark"] .gb-invite-preview{background:#142238}
@media(max-width:760px){.gb-room{grid-template-columns:1fr}.gb-room-actions{justify-content:flex-start}.gb-close-consent-actions{flex-direction:column-reverse}.gb-close-consent-actions .gb-btn{width:100%}}


/* ==========================================================
   2026-08-21: 20-second rounds, full stage-1 avatar, result UI
   ========================================================== */

/* 1단계는 800x600 원본 전체를 보여 양손이 잘리지 않도록 합니다. */
.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage.stage-1 img{
  width:94%!important;
  height:94%!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* 게임판 크기에 가까운 라운드 결과 창 */
.gb-round-result-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:120000;
  padding:24px;
  align-items:center;
  justify-content:center;
  background:rgba(8,18,34,.34);
  backdrop-filter:blur(2px);
}
.gb-round-result-overlay.show{display:flex}
.gb-round-result-card{
  width:min(920px,calc(100vw - 48px));
  min-height:min(500px,calc(100vh - 80px));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:42px 48px;
  border:2px solid color-mix(in srgb,var(--gb-accent,#356BF0) 34%,#d8e3f2);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--gb-accent,#356BF0) 10%,#fff) 0,#fff 45%),
    #fff;
  color:var(--gb-text,#172033);
  text-align:center;
  box-shadow:0 30px 90px rgba(15,32,58,.28);
}
.gb-result-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  color:var(--gb-accent,#356BF0);
}
.gb-round-result-card h2{
  margin:0;
  font-size:34px;
  font-weight:950;
}
.gb-result-status{
  min-width:240px;
  padding:12px 28px;
  border-radius:999px;
  font-size:27px;
  font-weight:950;
  background:#eef3f9;
}
.gb-result-status.is-correct{background:#e8f9ef;color:#087443}
.gb-result-status.is-wrong{background:#fff0f1;color:#c42a3a}
.gb-result-answer{font-size:25px;font-weight:800}
.gb-result-answer strong{font-size:32px;color:var(--gb-accent,#356BF0)}
.gb-result-reward{font-size:21px;font-weight:850}
.gb-result-stage{
  margin-top:4px;
  padding:15px 24px;
  border-radius:16px;
  background:color-mix(in srgb,var(--gb-accent,#356BF0) 8%,#fff);
  font-size:23px;
  font-weight:900;
}
.gb-result-dismiss{margin:4px 0 0;color:var(--gb-muted,#74849a);font-size:13px}

html.bp-dark .gb-round-result-overlay,
body.bp-dark .gb-round-result-overlay,
html[data-theme="dark"] .gb-round-result-overlay{background:rgba(0,0,0,.58)}
html.bp-dark .gb-round-result-card,
body.bp-dark .gb-round-result-card,
html[data-theme="dark"] .gb-round-result-card{
  background:linear-gradient(180deg,#17243a,#101b2c);
  color:#f1f6fd;
  border-color:#35506e;
}
html.bp-dark .gb-result-status,
body.bp-dark .gb-result-status,
html[data-theme="dark"] .gb-result-status{background:#213149}
html.bp-dark .gb-result-stage,
body.bp-dark .gb-result-stage,
html[data-theme="dark"] .gb-result-stage{background:#1c2d44}
html.bp-dark .gb-result-dismiss,
body.bp-dark .gb-result-dismiss,
html[data-theme="dark"] .gb-result-dismiss{color:#9eafc3}

@media(max-width:720px){
  .gb-round-result-overlay{padding:14px}
  .gb-round-result-card{
    width:calc(100vw - 28px);
    min-height:420px;
    padding:30px 20px;
    border-radius:20px;
  }
  .gb-round-result-card h2{font-size:28px}
  .gb-result-status{font-size:23px}
  .gb-result-answer{font-size:21px}
  .gb-result-answer strong{font-size:27px}
  .gb-result-stage{font-size:19px}
}


/* ==========================================================
   2026-08-21: elimination lock, leave button, aqua keyword board
   ========================================================== */

.gb-score-strip .gb-leave-game{
  margin-left:auto!important;
  min-height:34px;
  padding:7px 14px!important;
  font-size:12px!important;
  font-weight:900!important;
  border-radius:10px!important;
}
.gb-leave-game-card{max-width:480px!important;text-align:center}
.gb-leave-game-card h2{margin:0 0 12px;font-size:23px}
.gb-leave-game-card p{font-size:15px;line-height:1.75;color:var(--gb-text,#24344b)}
.gb-leave-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
.gb-leave-actions .gb-btn{min-width:105px}

/* 열린 5×5 키워드 셀 전체가 하나의 아쿠아블루 그라데이션 그림처럼 이어집니다. */
.gb-cell.problem.opened{
  background:transparent!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 12px rgba(7,96,140,.16)!important;
}
.gb-cell.problem.opened .gb-keyword{
  inset:0!important;
  border-radius:11px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:
    radial-gradient(circle at 16% 12%,rgba(255,255,255,.42),transparent 24%),
    radial-gradient(circle at 82% 82%,rgba(18,209,226,.44),transparent 28%),
    linear-gradient(135deg,#63e1ec 0%,#24c5dc 28%,#139fc9 58%,#0b78ad 100%)!important;
  background-size:500% 500%,500% 500%,500% 500%!important;
  background-position:var(--gb-grad-x,50%) var(--gb-grad-y,50%)!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,63,95,.35)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,67,102,.12)!important;
}
.gb-cell.problem.opened .gb-keyword strong{
  color:#fff!important;
  font-size:22px!important;
  font-weight:950!important;
  opacity:1!important;
}
.gb-cell.problem.opened .gb-keyword small{
  color:rgba(255,255,255,.92)!important;
  font-size:12px!important;
  font-weight:850!important;
  opacity:1!important;
}

/* 다크모드에서도 키워드 자체는 동일한 아쿠아 계열로 유지 */
html.bp-dark .gb-cell.problem.opened .gb-keyword,
body.bp-dark .gb-cell.problem.opened .gb-keyword,
html[data-theme="dark"] .gb-cell.problem.opened .gb-keyword{
  background:
    radial-gradient(circle at 16% 12%,rgba(255,255,255,.32),transparent 24%),
    radial-gradient(circle at 82% 82%,rgba(32,222,235,.42),transparent 28%),
    linear-gradient(135deg,#39d5e5 0%,#17b9d3 30%,#0e91bd 62%,#075f91 100%)!important;
  background-size:500% 500%,500% 500%,500% 500%!important;
  background-position:var(--gb-grad-x,50%) var(--gb-grad-y,50%)!important;
  color:#fff!important;
}

html.bp-dark .gb-leave-game-card p,
body.bp-dark .gb-leave-game-card p,
html[data-theme="dark"] .gb-leave-game-card p{color:#e8eff8}

@media(max-width:700px){
  .gb-score-strip .gb-leave-game{width:100%;margin-left:0!important;justify-content:center}
}


/* ===== 실전 골든벨 자동진행 + 채팅 ===== */
.gb-chat-card{min-height:290px}
.gb-chat-card .gb-card-head{margin-bottom:8px}
.gb-chat-card .gb-card-head small{font-size:11px;color:var(--gb-muted,#718096)}
.gb-chat-log{
  height:210px;overflow-y:auto;padding:10px;border:1px solid #d8e3ef;border-radius:12px;
  background:#f8fbff;display:flex;flex-direction:column;gap:8px
}
.gb-chat-msg{max-width:88%;padding:8px 10px;border-radius:11px;background:#edf3fa;color:#20324b;font-size:12px;line-height:1.45}
.gb-chat-msg.mine{align-self:flex-end;background:color-mix(in srgb,var(--gb-accent,#356BF0) 14%,#fff)}
.gb-chat-msg.watcher{border-left:3px solid #8b9bb0}
.gb-chat-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:3px;font-size:10px;color:#73849b}
.gb-chat-meta b{color:#31445f}
.gb-chat-compose{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}
.gb-chat-compose input{min-width:0;height:38px;border:1px solid #cdd9e7;border-radius:10px;padding:0 11px;background:#fff;color:#172033}

/* 답안 글자는 1~5단계 모든 화이트보드에 표시됩니다. */
.gb-avatar-stage .gb-board-answer{
  display:flex!important;position:absolute!important;left:50%!important;z-index:8!important;
  align-items:center!important;justify-content:center!important;width:56%!important;height:21%!important;
  transform:translateX(-50%) rotate(-.5deg)!important;padding:0 4%!important;
  color:#162033!important;font-family:"Nanum Pen Script","Gaegu","Segoe Print",cursive!important;
  font-size:clamp(19px,1.8vw,29px)!important;font-weight:500!important;line-height:1!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;pointer-events:none!important
}
.gb-avatar-stage.stage-1 .gb-board-answer{top:46%!important}
.gb-avatar-stage.stage-2 .gb-board-answer{top:34%!important}
.gb-avatar-stage.stage-3 .gb-board-answer{top:22%!important}
.gb-avatar-stage.stage-4 .gb-board-answer{top:10%!important}
.gb-avatar-stage.stage-5 .gb-board-answer{top:6.5%!important}

/* 밝은 아쿠아 카드에서도 키워드가 확실히 보이도록 어두운 글자 사용 */
.gb-cell.problem.opened .gb-keyword strong{
  color:#082a38!important;text-shadow:0 1px 0 rgba(255,255,255,.62)!important;
  font-weight:950!important
}
.gb-cell.problem.opened .gb-keyword small{
  color:#123b4b!important;text-shadow:0 1px 0 rgba(255,255,255,.48)!important
}
html.bp-dark .gb-cell.problem.opened .gb-keyword strong,
body.bp-dark .gb-cell.problem.opened .gb-keyword strong,
html[data-theme="dark"] .gb-cell.problem.opened .gb-keyword strong{color:#f4fdff!important;text-shadow:0 1px 2px rgba(0,0,0,.45)!important}
html.bp-dark .gb-cell.problem.opened .gb-keyword small,
body.bp-dark .gb-cell.problem.opened .gb-keyword small,
html[data-theme="dark"] .gb-cell.problem.opened .gb-keyword small{color:#dff9ff!important}

html.bp-dark .gb-chat-log,body.bp-dark .gb-chat-log,html[data-theme="dark"] .gb-chat-log{background:#0d1827;border-color:#2d415b}
html.bp-dark .gb-chat-msg,body.bp-dark .gb-chat-msg,html[data-theme="dark"] .gb-chat-msg{background:#17263a;color:#edf4fb}
html.bp-dark .gb-chat-compose input,body.bp-dark .gb-chat-compose input,html[data-theme="dark"] .gb-chat-compose input{background:#0e1928;border-color:#30445e;color:#eef5fc}
html.bp-dark .gb-chat-meta b,body.bp-dark .gb-chat-meta b,html[data-theme="dark"] .gb-chat-meta b{color:#dceafa}
.gb-question-overlay{display:none;position:fixed;inset:0;z-index:110000;background:rgba(7,18,35,.55);padding:24px;align-items:center;justify-content:center}.gb-question-overlay.show{display:flex}.gb-question-modal{width:min(900px,calc(100vw - 48px));min-height:440px;background:#fff;border-radius:26px;padding:36px 42px;box-shadow:0 30px 90px rgba(8,28,52,.34)}.gb-qm-top{display:flex;justify-content:space-between;font-weight:900}.gb-qm-keyword{font-size:20px;margin-top:16px}.gb-qm-keyword strong{color:#078aa8;font-size:25px}#gbModalQuestion{font-size:30px;line-height:1.45}.gb-modal-choices{grid-template-columns:1fr 1fr;gap:12px}.gb-choice-btn{min-height:70px;border:2px solid #d5e4f1;border-radius:15px;background:#f8fbff;padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:17px}.gb-choice-btn span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#159fc2;color:#fff}.gb-modal-subjective{grid-template-columns:1fr auto;gap:10px}.gb-modal-subjective input{height:52px;border:2px solid #cfddeb;border-radius:13px;padding:0 15px;font-size:18px}.gb-modal-inline-result{margin-top:18px;padding:12px;background:#eef8ff;text-align:center;font-weight:800}.gb-sidepanel>.gb-card.mini:first-child .gb-my-avatar{height:auto!important;min-height:0!important;aspect-ratio:4/3!important;padding:0!important}.gb-sidepanel>.gb-card.mini:first-child .gb-avatar-stage img{width:100%!important;height:100%!important;object-fit:contain!important}@media(max-width:700px){.gb-modal-choices{grid-template-columns:1fr}}

/* =========================================================
   SUBJECTIVE-ONLY GOLDEN BELL QUESTION MODAL
   ========================================================= */
.gb-modal-choices,
.gb-choice-btn{
  display:none!important;
}

.gb-question-modal .gb-modal-subjective{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  width:100%;
  margin-top:8px;
}

.gb-question-modal #gbModalAnswerInput{
  width:100%;
  height:58px;
  box-sizing:border-box;
  border:2px solid #cbd9e8;
  border-radius:14px;
  padding:0 17px;
  background:#fff;
  color:#17263b;
  font-size:20px;
  font-weight:700;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.gb-question-modal #gbModalAnswerInput:focus{
  border-color:#169fc1;
  box-shadow:0 0 0 4px rgba(22,159,193,.13);
}

.gb-lift-board-btn{
  min-width:150px;
  height:58px;
  border-radius:14px!important;
  font-size:16px!important;
  font-weight:950!important;
  transition:transform .1s ease,box-shadow .1s ease,filter .1s ease!important;
}
.gb-lift-board-btn:active:not(:disabled){
  transform:translateY(2px) scale(.97)!important;
}
.gb-lift-board-btn:disabled{
  cursor:default;
  opacity:.78;
}

html.bp-dark .gb-question-modal #gbModalAnswerInput,
body.bp-dark .gb-question-modal #gbModalAnswerInput,
html[data-theme="dark"] .gb-question-modal #gbModalAnswerInput{
  background:#0f1c2c;
  border-color:#38506a;
  color:#f1f7fd;
}

@media(max-width:700px){
  .gb-question-modal .gb-modal-subjective{
    grid-template-columns:1fr;
  }
  .gb-lift-board-btn{
    width:100%;
  }
}


/* =========================================================
   BiblePang 7-color theme + complete dark mode bridge
   Ported from the working Mission Marble /journey behavior.
   ========================================================= */
:root{
  --gb-accent:var(--bp-main-accent,var(--bp-home-accent,var(--bp-theme-color,#1769e0)));
  --gb-accent2:var(--bp-main-accent2,var(--bp-home-accent-2,#4388eb));
  --gb-deep:var(--bp-main-deep,var(--bp-home-accent-deep,#0d52bc));
  --gb-soft:var(--bp-main-soft,var(--bp-home-accent-soft,#edf5ff));
}

/* explicit fallbacks for all seven site themes */
html.bp-theme-red,body.bp-theme-red,.bp-theme-red .gb-theme-root{--gb-accent:#e23b3b;--gb-accent2:#f06464;--gb-deep:#b92525;--gb-soft:#fff0f1}
html.bp-theme-orange,body.bp-theme-orange,.bp-theme-orange .gb-theme-root{--gb-accent:#ed7818;--gb-accent2:#f59a43;--gb-deep:#bd590b;--gb-soft:#fff3e8}
html.bp-theme-yellow,body.bp-theme-yellow,.bp-theme-yellow .gb-theme-root{--gb-accent:#d69a00;--gb-accent2:#efb930;--gb-deep:#a87600;--gb-soft:#fff8dd}
html.bp-theme-green,body.bp-theme-green,.bp-theme-green .gb-theme-root{--gb-accent:#15945d;--gb-accent2:#38b87b;--gb-deep:#087345;--gb-soft:#eafaf2}
html.bp-theme-blue,body.bp-theme-blue,.bp-theme-blue .gb-theme-root{--gb-accent:#1769e0;--gb-accent2:#4388eb;--gb-deep:#0d52bc;--gb-soft:#edf5ff}
html.bp-theme-indigo,body.bp-theme-indigo,.bp-theme-indigo .gb-theme-root{--gb-accent:#4052c7;--gb-accent2:#6576df;--gb-deep:#2e3ba4;--gb-soft:#f0f2ff}
html.bp-theme-purple,body.bp-theme-purple,.bp-theme-purple .gb-theme-root{--gb-accent:#8250c7;--gb-accent2:#a06fdd;--gb-deep:#6335a0;--gb-soft:#f8f0ff}

.gb-theme-root{
  --gb-bg:color-mix(in srgb,var(--gb-soft) 46%,#fff);
  --gb-card:#fff;
  --gb-text:#152033;
  --gb-muted:#6e7b90;
  --gb-line:color-mix(in srgb,var(--gb-accent) 14%,#dbe5f1);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gb-soft) 50%,#fff),#fff 42%);
}
.gb-hero,.gb-guide-hero{
  background:
   radial-gradient(circle at 92% 18%,rgba(255,255,255,.18),transparent 27%),
   linear-gradient(120deg,var(--gb-deep),var(--gb-accent) 68%,var(--gb-accent2))!important;
}
.gb-btn.primary{
  background:linear-gradient(135deg,var(--gb-deep),var(--gb-accent))!important;
  border-color:var(--gb-accent)!important;
  color:#fff!important;
}
.gb-character.selected,
.gb-cell.problem.selectable{
  border-color:var(--gb-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gb-accent) 18%,transparent)!important;
}
.gb-kicker,.gb-room-total,.gb-qm-keyword strong{color:var(--gb-accent)!important}

/* ---------- complete dark mode ---------- */
html.bp-dark .gb-theme-root,
body.bp-dark .gb-theme-root,
html[data-theme="dark"] .gb-theme-root,
body[data-theme="dark"] .gb-theme-root,
html.dark .gb-theme-root,
body.dark .gb-theme-root,
body.dark-mode .gb-theme-root,
body.theme-dark .gb-theme-root{
  --gb-bg:#0b1623;
  --gb-card:#132233;
  --gb-text:#edf5fd;
  --gb-muted:#9eafc2;
  --gb-line:#2c4258;
  background:#0b1623!important;
  color:#edf5fd!important;
}

/* page surfaces, cards, room list, board wrappers, chat, guide, modals */
html.bp-dark :is(.gb-card,.gb-topbar,.gb-room,.gb-modal-card,.gb-question-card,.gb-question-modal,.gb-round-result-card,.gb-board-wrap,.gb-chat-log,.gb-notice-log,.gb-roster,.gb-guide-card,.gb-guide-section,.gb-character,.gb-name,.gb-answer-box,.gb-question-panel),
body.bp-dark :is(.gb-card,.gb-topbar,.gb-room,.gb-modal-card,.gb-question-card,.gb-question-modal,.gb-round-result-card,.gb-board-wrap,.gb-chat-log,.gb-notice-log,.gb-roster,.gb-guide-card,.gb-guide-section,.gb-character,.gb-name,.gb-answer-box,.gb-question-panel),
html[data-theme="dark"] :is(.gb-card,.gb-topbar,.gb-room,.gb-modal-card,.gb-question-card,.gb-question-modal,.gb-round-result-card,.gb-board-wrap,.gb-chat-log,.gb-notice-log,.gb-roster,.gb-guide-card,.gb-guide-section,.gb-character,.gb-name,.gb-answer-box,.gb-question-panel){
  background:#132233!important;
  color:#edf5fd!important;
  border-color:#2c4258!important;
  box-shadow:0 10px 30px rgba(0,0,0,.18)!important;
}

html.bp-dark :is(.gb-room-meta,.gb-help,.gb-answer-stats,.gb-chat-meta,.gb-result-dismiss,.gb-card small,.gb-guide-section p,.gb-guide-section li),
body.bp-dark :is(.gb-room-meta,.gb-help,.gb-answer-stats,.gb-chat-meta,.gb-result-dismiss,.gb-card small,.gb-guide-section p,.gb-guide-section li),
html[data-theme="dark"] :is(.gb-room-meta,.gb-help,.gb-answer-stats,.gb-chat-meta,.gb-result-dismiss,.gb-card small,.gb-guide-section p,.gb-guide-section li){
  color:#9fb0c3!important;
}

html.bp-dark :is(h1,h2,h3,h4,.gb-room-title,.gb-card-head,.gb-name strong,.gb-chat-meta b),
body.bp-dark :is(h1,h2,h3,h4,.gb-room-title,.gb-card-head,.gb-name strong,.gb-chat-meta b),
html[data-theme="dark"] :is(h1,h2,h3,h4,.gb-room-title,.gb-card-head,.gb-name strong,.gb-chat-meta b){
  color:#f1f6fc;
}

/* inputs, textarea, selects */
html.bp-dark :is(.gb-theme-root input,.gb-theme-root textarea,.gb-theme-root select),
body.bp-dark :is(.gb-theme-root input,.gb-theme-root textarea,.gb-theme-root select),
html[data-theme="dark"] :is(.gb-theme-root input,.gb-theme-root textarea,.gb-theme-root select){
  background:#0f1c2a!important;
  border-color:#30485f!important;
  color:#eef6fd!important;
  caret-color:#fff;
}
html.bp-dark .gb-theme-root ::placeholder,
body.bp-dark .gb-theme-root ::placeholder,
html[data-theme="dark"] .gb-theme-root ::placeholder{color:#778ba0!important;opacity:1}

/* ordinary buttons */
html.bp-dark .gb-btn:not(.primary):not(.danger),
body.bp-dark .gb-btn:not(.primary):not(.danger),
html[data-theme="dark"] .gb-btn:not(.primary):not(.danger){
  background:#1b2c40!important;
  color:#e9f2fb!important;
  border:1px solid #334b63!important;
}
html.bp-dark .gb-btn.danger,
body.bp-dark .gb-btn.danger,
html[data-theme="dark"] .gb-btn.danger{
  background:#42202a!important;
  color:#ffb7c2!important;
  border-color:#62303d!important;
}

/* board */
html.bp-dark .gb-board,
body.bp-dark .gb-board,
html[data-theme="dark"] .gb-board{
  background:#0f1d2c!important;
  border-color:#2b4158!important;
  filter:none!important;
}
html.bp-dark .gb-cell,
body.bp-dark .gb-cell,
html[data-theme="dark"] .gb-cell{
  color:#edf4fb;
  border-color:#2e455e!important;
}
html.bp-dark .gb-cell.problem:not(.opened),
body.bp-dark .gb-cell.problem:not(.opened),
html[data-theme="dark"] .gb-cell.problem:not(.opened){
  background:#13263b!important;
}
html.bp-dark .gb-cell.score,
body.bp-dark .gb-cell.score,
html[data-theme="dark"] .gb-cell.score{
  background:#071321!important;color:#fff!important;
}
html.bp-dark .gb-cell.problem.opened,
body.bp-dark .gb-cell.problem.opened,
html[data-theme="dark"] .gb-cell.problem.opened{
  color:#f5fbff!important;
  border-color:#356079!important;
}

/* chat */
html.bp-dark .gb-chat-msg,
body.bp-dark .gb-chat-msg,
html[data-theme="dark"] .gb-chat-msg{
  background:#1a2a3e!important;color:#edf5fd!important;
}
html.bp-dark .gb-chat-msg.mine,
body.bp-dark .gb-chat-msg.mine,
html[data-theme="dark"] .gb-chat-msg.mine{
  background:color-mix(in srgb,var(--gb-accent) 25%,#14263a)!important;
}

/* character/whiteboard/illustration images — darken the artwork itself too */
html.bp-dark :is(.gb-character img,.gb-avatar-stage img,.gb-guide img,.gb-my-avatar img),
body.bp-dark :is(.gb-character img,.gb-avatar-stage img,.gb-guide img,.gb-my-avatar img),
html[data-theme="dark"] :is(.gb-character img,.gb-avatar-stage img,.gb-guide img,.gb-my-avatar img){
  filter:brightness(.72) saturate(.86) contrast(1.03)!important;
}
html.bp-dark .gb-my-avatar,
body.bp-dark .gb-my-avatar,
html[data-theme="dark"] .gb-my-avatar{
  background:#0b1623!important;border-color:#2b4158!important;
}

/* notice strips and status chips */
html.bp-dark .gb-notice-banner,
body.bp-dark .gb-notice-banner,
html[data-theme="dark"] .gb-notice-banner{
  background:#302b16!important;color:#f1d77a!important;border-color:#665b27!important;
}
html.bp-dark .gb-score-strip span,
body.bp-dark .gb-score-strip span,
html[data-theme="dark"] .gb-score-strip span{
  background:#132233!important;color:#edf5fd!important;border-color:#2c4258!important;
}

/* Google ads: containers, labels, placeholders and iframe treatment */
html.bp-dark :is(.bp-side-ad,.bp-content-ad,.bp-content-ad__slot,.gb-room-top-ad,.gb-admock),
body.bp-dark :is(.bp-side-ad,.bp-content-ad,.bp-content-ad__slot,.gb-room-top-ad,.gb-admock),
html[data-theme="dark"] :is(.bp-side-ad,.bp-content-ad,.bp-content-ad__slot,.gb-room-top-ad,.gb-admock){
  background:#0c1724!important;
  color:#93a8bc!important;
  border-color:#294159!important;
}
html.bp-dark :is(.bp-side-ad,.bp-content-ad) iframe,
body.bp-dark :is(.bp-side-ad,.bp-content-ad) iframe,
html[data-theme="dark"] :is(.bp-side-ad,.bp-content-ad) iframe{
  filter:brightness(.76) saturate(.82)!important;
}
html.bp-dark .bp-content-ad__label,
body.bp-dark .bp-content-ad__label,
html[data-theme="dark"] .bp-content-ad__label{
  color:#71879e!important;
}

/* overlays stay dark but modal content remains readable */
html.bp-dark :is(.gb-modal,.gb-question-overlay,.gb-round-result-overlay),
body.bp-dark :is(.gb-modal,.gb-question-overlay,.gb-round-result-overlay),
html[data-theme="dark"] :is(.gb-modal,.gb-question-overlay,.gb-round-result-overlay){
  background:rgba(0,0,0,.62)!important;
}


/* =========================================================
   LIVE QUESTION MODAL FLOW
   Live game questions no longer occupy the area below the board.
   ========================================================= */
.gb-live-question-card-hidden{
  display:none!important;
}

/* The modal is deliberately above the board/game area and large enough
   to read easily without forcing the player to look below the board. */
.gb-question-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:120000!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background:rgba(6,17,32,.58)!important;
  backdrop-filter:blur(4px);
}
.gb-question-overlay.show{display:flex!important}

.gb-question-modal{
  width:min(760px,calc(100vw - 36px))!important;
  min-height:0!important;
  padding:30px 34px 32px!important;
  border:2px solid color-mix(in srgb,var(--gb-accent,#1769e0) 20%,#dce7f3)!important;
  border-radius:24px!important;
  background:var(--gb-card,#fff)!important;
  color:var(--gb-text,#172033)!important;
  box-shadow:0 28px 90px rgba(7,28,54,.35)!important;
}

.gb-qm-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--gb-line,#dbe5f0);
}
.gb-qm-heading h2{
  margin:0!important;
  font-size:28px!important;
  letter-spacing:-.035em;
  color:var(--gb-text,#172033)!important;
}
.gb-qm-timer{
  flex:0 0 auto;
  min-width:82px;
  padding:8px 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--gb-accent,#1769e0) 11%,#fff);
  color:var(--gb-deep,#0d52bc);
  font-size:15px;
  font-weight:950;
  text-align:center;
}

.gb-qm-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
}
.gb-qm-summary span{
  padding:7px 11px;
  border-radius:10px;
  background:color-mix(in srgb,var(--gb-soft,#edf5ff) 72%,#fff);
  border:1px solid color-mix(in srgb,var(--gb-accent,#1769e0) 13%,var(--gb-line,#dbe5f0));
  color:#425a74;
  font-size:14px;
  font-weight:850;
}
.gb-qm-summary strong{color:var(--gb-accent,#1769e0)}

.gb-qm-prepare{
  padding:34px 10px 20px;
  text-align:center;
}
.gb-qm-ready-title{
  font-size:22px;
  font-weight:900;
  color:var(--gb-text,#172033);
}
.gb-qm-ready-count{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  margin-top:12px;
  color:var(--gb-accent,#1769e0);
}
.gb-qm-ready-count b{
  font-size:76px;
  line-height:1;
  font-weight:1000;
}
.gb-qm-ready-count small{
  font-size:18px;
  font-weight:900;
}

.gb-qm-question-area{
  margin-top:23px;
}
.gb-qm-question-label{
  margin-bottom:8px;
  color:var(--gb-accent,#1769e0);
  font-size:13px;
  font-weight:950;
  letter-spacing:.08em;
}
.gb-qm-question-text{
  min-height:70px;
  font-size:26px;
  line-height:1.55;
  font-weight:900;
  letter-spacing:-.025em;
  color:var(--gb-text,#172033);
}
.gb-question-modal .gb-modal-subjective{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  margin-top:22px!important;
}
.gb-question-modal #gbModalAnswerInput{
  width:100%!important;
  min-width:0!important;
  height:56px!important;
  padding:0 16px!important;
  border:2px solid #cddbea!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#172033!important;
  font-size:19px!important;
  font-weight:700!important;
  outline:none!important;
}
.gb-question-modal #gbModalAnswerInput:focus{
  border-color:var(--gb-accent,#1769e0)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gb-accent,#1769e0) 13%,transparent)!important;
}
.gb-lift-board-btn{
  min-width:150px!important;
  height:56px!important;
  border-radius:13px!important;
  font-size:15px!important;
  font-weight:950!important;
}

/* Typed text follows the board through every animation frame.
   Stage-specific top positions are kept because the whiteboard moves upward. */
.gb-avatar-stage .gb-board-answer{
  display:flex!important;
  position:absolute!important;
  left:50%!important;
  z-index:9!important;
  align-items:center!important;
  justify-content:center!important;
  width:56%!important;
  height:21%!important;
  padding:0 4%!important;
  transform:translateX(-50%) rotate(-.5deg)!important;
  color:#162033!important;
  font-family:"Nanum Pen Script","Gaegu","Segoe Print",cursive!important;
  font-size:clamp(19px,1.8vw,29px)!important;
  font-weight:500!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  pointer-events:none!important;
}
.gb-avatar-stage.stage-1 .gb-board-answer{top:46%!important}
.gb-avatar-stage.stage-2 .gb-board-answer{top:34%!important}
.gb-avatar-stage.stage-3 .gb-board-answer{top:22%!important}
.gb-avatar-stage.stage-4 .gb-board-answer{top:10%!important}
.gb-avatar-stage.stage-5 .gb-board-answer{top:6.5%!important}

/* Dark mode, including modal controls. */
html.bp-dark .gb-question-modal,
body.bp-dark .gb-question-modal,
html[data-theme="dark"] .gb-question-modal{
  background:#132233!important;
  color:#edf5fd!important;
  border-color:#35506a!important;
}
html.bp-dark .gb-qm-heading h2,
body.bp-dark .gb-qm-heading h2,
html[data-theme="dark"] .gb-qm-heading h2,
html.bp-dark .gb-qm-ready-title,
body.bp-dark .gb-qm-ready-title,
html[data-theme="dark"] .gb-qm-ready-title,
html.bp-dark .gb-qm-question-text,
body.bp-dark .gb-qm-question-text,
html[data-theme="dark"] .gb-qm-question-text{
  color:#eef6fd!important;
}
html.bp-dark .gb-qm-summary span,
body.bp-dark .gb-qm-summary span,
html[data-theme="dark"] .gb-qm-summary span{
  background:#182a3e!important;
  border-color:#30485f!important;
  color:#b7c7d7!important;
}
html.bp-dark .gb-question-modal #gbModalAnswerInput,
body.bp-dark .gb-question-modal #gbModalAnswerInput,
html[data-theme="dark"] .gb-question-modal #gbModalAnswerInput{
  background:#0d1927!important;
  border-color:#34506a!important;
  color:#f1f7fd!important;
}

@media(max-width:650px){
  .gb-question-modal{padding:24px 18px 26px!important}
  .gb-qm-heading h2{font-size:23px!important}
  .gb-qm-question-text{font-size:21px!important}
  .gb-question-modal .gb-modal-subjective{grid-template-columns:1fr!important}
  .gb-lift-board-btn{width:100%!important}
}

.gb-start-banner{width:100%;min-height:48px;margin:0 0 9px;padding:9px 18px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:13px;background:#d5202f;color:#fff;box-shadow:0 7px 18px rgba(161,20,34,.22);font-size:16px;font-weight:950;text-align:center}.gb-start-banner[hidden]{display:none!important}.gb-start-banner b{min-width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#c91d2b;font-size:20px}
.gb-cell.problem.opened{background:linear-gradient(135deg,#57e0e7 0%,#24c6d5 46%,#0d91b6 100%)!important;color:#062d38!important}.gb-cell.problem.opened .gb-keyword{position:absolute!important;inset:0!important;z-index:4!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:7px!important;background:transparent!important;opacity:1!important;visibility:visible!important}.gb-cell.problem.opened .gb-keyword strong{display:block!important;color:#072c38!important;font-size:17px!important;font-weight:1000!important;line-height:1.2!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important}.gb-cell.problem.opened .gb-keyword small{display:block!important;margin-top:5px!important;color:#164a59!important;font-size:9px!important;font-weight:850!important;opacity:.88!important}
.gb-question-overlay{background:transparent!important;backdrop-filter:none!important;pointer-events:none!important;align-items:flex-start!important;justify-content:flex-start!important;padding:86px 390px 20px max(22px,calc((100vw - 1480px)/2 + 18px))!important}.gb-question-modal{pointer-events:auto!important;width:min(900px,calc(100vw - 430px))!important;max-height:none!important;overflow:visible!important}.gb-qm-lead{margin-top:22px;font-size:18px;font-weight:950;text-align:center;color:var(--gb-accent,#1769e0)}.gb-qm-question-text{min-height:0!important;max-height:none!important;overflow:visible!important;word-break:keep-all!important;overflow-wrap:anywhere!important;font-size:clamp(20px,2vw,27px)!important;line-height:1.55!important}
.gb-avatar-stage.stage-1 .gb-board-answer{top:46%!important}.gb-avatar-stage.stage-2 .gb-board-answer{top:34%!important}.gb-avatar-stage.stage-3 .gb-board-answer{top:22%!important}
.gb-my-status-card h3{font-size:14px!important;margin-bottom:9px!important}.gb-my-status-grid{display:grid;gap:6px}.gb-my-status-grid>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,var(--gb-soft,#edf5ff) 55%,#fff);border:1px solid var(--gb-line,#dbe5f1)}.gb-my-status-grid small{font-size:10px!important;color:var(--gb-muted,#6e7b90)}.gb-my-status-grid b{font-size:12px!important;color:var(--gb-text,#152033)}
.gb-sidepanel .gb-card.mini>h3,.gb-sidepanel .gb-card-head h3{font-size:14px!important;line-height:1.3!important;margin-bottom:9px!important}.gb-sidepanel .gb-roster .gb-roster-watch{margin-top:13px!important}.gb-sidepanel .gb-person,.gb-sidepanel .gb-person span{font-size:11px!important}.gb-sidepanel .gb-person small{font-size:9px!important}.gb-sidepanel .gb-rank{font-size:11px!important}.gb-sidepanel .gb-help,.gb-sidepanel .gb-notice-log{font-size:10px!important}
.gb-result-revive{margin-top:4px!important;min-width:150px}.gb-round-result-overlay{pointer-events:none}.gb-round-result-card{pointer-events:auto}
html.bp-dark .gb-cell.problem.opened,body.bp-dark .gb-cell.problem.opened,html[data-theme="dark"] .gb-cell.problem.opened{background:linear-gradient(135deg,#2eb9c5,#138ca9)!important}html.bp-dark .gb-cell.problem.opened .gb-keyword strong,body.bp-dark .gb-cell.problem.opened .gb-keyword strong,html[data-theme="dark"] .gb-cell.problem.opened .gb-keyword strong{color:#f3fdff!important;text-shadow:0 1px 2px rgba(0,0,0,.38)!important}html.bp-dark .gb-cell.problem.opened .gb-keyword small,body.bp-dark .gb-cell.problem.opened .gb-keyword small,html[data-theme="dark"] .gb-cell.problem.opened .gb-keyword small{color:#d7f8fb!important}html.bp-dark .gb-my-status-grid>div,body.bp-dark .gb-my-status-grid>div,html[data-theme="dark"] .gb-my-status-grid>div{background:#182a3e!important;border-color:#2d465e!important}html.bp-dark .gb-my-status-grid b,body.bp-dark .gb-my-status-grid b,html[data-theme="dark"] .gb-my-status-grid b{color:#eef6fd!important}
@media(max-width:1050px){.gb-question-overlay{padding:80px 20px 20px!important}.gb-question-modal{width:min(900px,calc(100vw - 40px))!important}}


/* =========================================================
   HARD FIX — opened keywords are rendered in their own top layer.
   This deliberately bypasses legacy card flip/front/back stacking.
   ========================================================= */
.gb-cell.problem.opened{
  position:relative!important;
  overflow:hidden!important;
  perspective:900px!important;
  transform-style:preserve-3d!important;
}

.gb-cell.problem.opened:not(.just-opened) > *:not(.gb-keyword-force){
  display:none!important;
}

.gb-keyword-force{
  position:absolute!important;
  inset:0!important;
  z-index:9999!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  width:100%!important;
  height:100%!important;
  padding:6px!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:rotateY(180deg)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  pointer-events:none!important;
  background:linear-gradient(135deg,#5be9ed 0%,#31ceda 50%,#0c97b8 100%)!important;
}

.gb-keyword-force strong{
  display:block!important;
  position:relative!important;
  z-index:10000!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  color:#062d38!important;
  font-size:clamp(13px,1.15vw,18px)!important;
  font-weight:1000!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
  text-shadow:0 1px 0 rgba(255,255,255,.58)!important;
}

.gb-keyword-force small{
  display:block!important;
  position:relative!important;
  z-index:10000!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  color:#15515f!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1.15!important;
  text-align:center!important;
}

html.bp-dark .gb-keyword-force,
body.bp-dark .gb-keyword-force,
html[data-theme="dark"] .gb-keyword-force{
  background:linear-gradient(135deg,#2eb9c5 0%,#168fa9 58%,#0c6986 100%)!important;
}
html.bp-dark .gb-keyword-force strong,
body.bp-dark .gb-keyword-force strong,
html[data-theme="dark"] .gb-keyword-force strong{
  color:#f4fdff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.48)!important;
}
html.bp-dark .gb-keyword-force small,
body.bp-dark .gb-keyword-force small,
html[data-theme="dark"] .gb-keyword-force small{
  color:#d9f7fb!important;
}

/* Final 1→3 board text tracking */
.gb-avatar-stage.stage-1 .gb-board-answer{top:46%!important}
.gb-avatar-stage.stage-2 .gb-board-answer{top:33%!important}
.gb-avatar-stage.stage-3 .gb-board-answer{top:17.5%!important}

/* Eliminated spectators use a dedicated character illustration.
   Voluntary spectators see centered text only. */
.gb-eliminated-avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gb-eliminated-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.gb-watch-only{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:20px!important;color:var(--gb-muted,#6e7b90)!important;font-size:18px!important;font-weight:900!important}

/* Taller game board: increase category row and every 10–50 row proportionally */
.gb-board{grid-template-rows:64px repeat(5,minmax(94px,1fr))!important}
.gb-board .gb-cell{min-height:94px!important}
.gb-board .gb-cell.category{min-height:64px!important}
.gb-board .gb-cell.score{min-height:94px!important}
@media(max-width:1100px){
 .gb-board{grid-template-rows:58px repeat(5,minmax(82px,1fr))!important}
 .gb-board .gb-cell{min-height:82px!important}
 .gb-board .gb-cell.category{min-height:58px!important}
 .gb-board .gb-cell.score{min-height:82px!important}
}
html.bp-dark .gb-eliminated-avatar img,body.bp-dark .gb-eliminated-avatar img,html[data-theme="dark"] .gb-eliminated-avatar img{filter:brightness(.72) saturate(.86) contrast(1.03)!important}


/* =========================================================
   SAFE FINAL UI OVERRIDES
   ========================================================= */

/* 탈락 관전 이미지: 박스를 채우되 머리/얼굴은 절대 자르지 않음 */
.gb-eliminated-avatar{
  background:#f5f2f0!important;
}
.gb-eliminated-avatar img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
}
html.bp-dark .gb-eliminated-avatar,
body.bp-dark .gb-eliminated-avatar,
html[data-theme="dark"] .gb-eliminated-avatar{
  background:#0f1b29!important;
}

/*
 * 게임보드 세로 확대:
 * 기존 열 너비/열 간격은 그대로.
 * header + 10/20/30/40/50 각 행 자체의 높이만 증가.
 */
.gb-board{
  grid-template-rows:78px repeat(5,112px)!important;
  gap:8px!important;
}
.gb-board .gb-cell.header{
  min-height:78px!important;
  height:78px!important;
}
.gb-board .gb-cell.score,
.gb-board .gb-cell.problem{
  min-height:112px!important;
  height:112px!important;
}
.gb-board .gb-cell.header,
.gb-board .gb-cell.score,
.gb-board .gb-cell.problem{
  margin:0!important;
}

/* 화이트보드 1→3 단계의 답안 위치 */
.gb-avatar-stage.stage-1 .gb-board-answer{top:46%!important}
.gb-avatar-stage.stage-2 .gb-board-answer{top:33%!important}
.gb-avatar-stage.stage-3 .gb-board-answer{top:17.5%!important}

/* 골든벨 게임룸에서만 상단 헤더 로그아웃 글자 줄바꿈 방지 */
body a[href*="logout.php"],
body a[href*="/logout"],
body .bp-logout,
body .logout-btn,
body .btn-logout{
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  min-width:max-content!important;
  width:auto!important;
  flex-shrink:0!important;
}

/* 오른쪽 패널 제목/본문 크기 조정 */
.gb-sidepanel .gb-card.mini>h3,
.gb-sidepanel .gb-card-head h3{
  font-size:14px!important;
  line-height:1.25!important;
}
.gb-sidepanel .gb-person,
.gb-sidepanel .gb-rank,
.gb-sidepanel .gb-notice-log{
  font-size:11px!important;
}
.gb-sidepanel small,
.gb-sidepanel .gb-help{
  font-size:10px!important;
}

/* smaller screens: proportions remain, but row height reduces */
@media(max-width:1100px){
  .gb-board{grid-template-rows:68px repeat(5,98px)!important}
  .gb-board .gb-cell.header{height:68px!important;min-height:68px!important}
  .gb-board .gb-cell.score,
  .gb-board .gb-cell.problem{height:98px!important;min-height:98px!important}
}
@media(max-width:760px){
  .gb-board{grid-template-rows:60px repeat(5,88px)!important}
  .gb-board .gb-cell.header{height:60px!important;min-height:60px!important}
  .gb-board .gb-cell.score,
  .gb-board .gb-cell.problem{height:88px!important;min-height:88px!important}
}


/* =========================================================
   TOP-LEFT GOLDEN BELL CORNER HEIGHT FIX
   Match the corner cell exactly to the category row height.
   ========================================================= */
.gb-board .gb-cell.corner{
  height:78px!important;
  min-height:78px!important;
  max-height:78px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  align-self:stretch!important;
}


@media(max-width:1100px){
  .gb-board .gb-cell.corner{
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
  }
}

@media(max-width:760px){
  .gb-board .gb-cell.corner{
    height:60px!important;
    min-height:60px!important;
    max-height:60px!important;
  }
}


/* Restore the original Golden Bell logo appearance.
   The corner CELL keeps the category-row height, but the logo itself
   is no longer stretched to fill the entire box. */
.gb-board .gb-cell.corner{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.gb-board .gb-cell.corner .gb-bell-logo,
.gb-board .gb-cell.corner img{
  width:auto!important;
  height:auto!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  flex:none!important;
}


/* 일반 플레이 캐릭터와 탈락 관전 캐릭터 모두 가로폭만 확장 */
.gb-my-whiteboard-card .gb-avatar-stage img,
.gb-my-whiteboard-card .gb-eliminated-avatar img{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:100%!important;
  object-fit:fill!important;
  object-position:center top!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* 이미지가 원래보다 좁아도 좌우 빈 공간 없이 박스 폭을 사용 */
.gb-my-whiteboard-card .gb-avatar-stage,
.gb-my-whiteboard-card .gb-eliminated-avatar{
  width:100%!important;
  left:0!important;
  right:0!important;
}


/* =========================================================
   MY WHITEBOARD — TRUE HORIZONTAL STRETCH
   박스 높이는 그대로 유지하고 이미지의 좌우만 늘려 빈 공간을 없앱니다.
   ========================================================= */
.gb-my-whiteboard-card .gb-my-avatar{
  position:relative!important;
  width:100%!important;
  overflow:hidden!important;
}

/* stage wrapper fills the existing whiteboard image box */
.gb-my-whiteboard-card .gb-avatar-stage,
.gb-my-whiteboard-card .gb-eliminated-avatar{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
}

/*
 * 핵심:
 * width:100% + height:100% + object-fit:fill
 * => 세로 박스 높이는 그대로 사용하고, 좌우만 강제로 박스 끝까지 늘어납니다.
 */
.gb-my-whiteboard-card .gb-avatar-stage img,
.gb-my-whiteboard-card .gb-eliminated-avatar img{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  max-height:none!important;
  object-fit:fill!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}

/* 관전중 텍스트도 같은 박스 중앙 유지 */
.gb-my-whiteboard-card .gb-watch-only{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}


/* Same result window becomes the 3-question revival challenge */
.gb-revive-challenge{margin-top:16px;padding:16px;border:1px solid var(--gb-line,#dbe5f1);border-radius:14px;background:color-mix(in srgb,var(--gb-soft,#edf5ff) 55%,#fff)}
.gb-revive-challenge[hidden]{display:none!important}
.gb-revive-progress{color:var(--gb-accent,#1769e0);font-size:13px;font-weight:950;margin-bottom:9px}
.gb-revive-question{color:var(--gb-text,#152033);font-size:20px;line-height:1.5;font-weight:900;margin-bottom:13px}
.gb-revive-answer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.gb-revive-answer-row input{width:100%;min-width:0;height:46px;padding:0 13px;border:1px solid #cbd9e7;border-radius:10px;font-size:16px;outline:none}
.gb-revive-feedback{min-height:22px;margin-top:9px;font-size:13px;font-weight:900}
.gb-revive-feedback.is-correct{color:#168753}.gb-revive-feedback.is-wrong{color:#d33a49}
html.bp-dark .gb-revive-challenge,body.bp-dark .gb-revive-challenge,html[data-theme="dark"] .gb-revive-challenge{background:#182a3e!important;border-color:#30485f!important}
html.bp-dark .gb-revive-question,body.bp-dark .gb-revive-question,html[data-theme="dark"] .gb-revive-question{color:#eef6fd!important}
html.bp-dark .gb-revive-answer-row input,body.bp-dark .gb-revive-answer-row input,html[data-theme="dark"] .gb-revive-answer-row input{background:#0e1b29!important;color:#eef6fd!important;border-color:#34506a!important}

/* 관전중 PNG 안쪽에 포함된 좌우 여백까지 잘라내는 효과:
   높이는 그대로, X축만 1.34배 확대하고 박스 밖은 숨김 */
.gb-my-whiteboard-card .gb-eliminated-avatar{overflow:hidden!important}
.gb-my-whiteboard-card .gb-eliminated-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center!important;
  transform:scaleX(1.34)!important;
  transform-origin:center center!important;
}
@media(max-width:650px){.gb-revive-answer-row{grid-template-columns:1fr}}


/* =========================================================
   AUTO WHITEBOARD TEXT TRACKING
   Position/width/font-size are calculated from each loaded PNG itself.
   ========================================================= */
.gb-my-whiteboard-card .gb-auto-board-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}
.gb-my-whiteboard-card .gb-auto-board-stage img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  transform:none!important;
}
.gb-my-whiteboard-card .gb-auto-board-text{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  height:auto!important;
  min-height:1.15em!important;
  padding:0!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-family:"Gaegu","Nanum Pen Script","Noto Sans KR",sans-serif!important;
  font-weight:900!important;
  line-height:1!important;
  color:#111827!important;
  z-index:30!important;
  pointer-events:none!important;
  -webkit-text-stroke:.3px currentColor;
}


/* =========================================================
   PHRASE-AWARE CENTERED WHITEBOARD ANSWER
   - 띄어쓰기 기준 의미구 줄바꿈
   - 각 행은 모두 가운데 정렬
   - 둘째 줄이 길면 둘째 줄만 자동 축소
   ========================================================= */
.gb-my-whiteboard-card .gb-auto-board-text,
.gb-my-whiteboard-card .gb-board-answer{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;

  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;

  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
}

.gb-my-whiteboard-card .gb-answer-line{
  display:block!important;
  width:auto!important;
  max-width:100%!important;

  /* 각 줄을 독립적으로 가운데 정렬 */
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;

  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.03!important;
  flex:0 0 auto!important;
}

.gb-my-whiteboard-card .gb-auto-board-text[data-lines="2"] .gb-answer-line + .gb-answer-line{
  margin-top:2px!important;
}


/* Result window countdown: 5 → 4 → 3 → 2 → 1 */
.gb-result-countdown{
  margin:13px auto 8px!important;
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:8px 14px!important;
  border-radius:13px!important;
  background:color-mix(in srgb,var(--gb-soft,#edf5ff) 62%,#fff)!important;
  border:1px solid var(--gb-line,#dbe5f1)!important;
  text-align:center!important;
}
.gb-result-countdown[hidden]{display:none!important}
.gb-result-countdown span{
  font-size:13px!important;
  font-weight:850!important;
  color:var(--gb-muted,#65748a)!important;
}
.gb-result-countdown b{
  min-width:38px!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:1000!important;
  color:var(--gb-accent,#1769e0)!important;
}
.gb-result-countdown small{
  font-size:12px!important;
  font-weight:850!important;
  color:var(--gb-muted,#65748a)!important;
}
html.bp-dark .gb-result-countdown,
body.bp-dark .gb-result-countdown,
html[data-theme="dark"] .gb-result-countdown{
  background:#182a3e!important;
  border-color:#30485f!important;
}


/* === 2026-08-25 keyword-first visible flip ===
   1.0s card flip, then keyword remains visible before the question modal opens. */
.gb-cell.problem.opened:not(.just-opened){transform:rotateY(180deg)!important}
.gb-cell.problem.opened.just-opened{
  animation:gbKeywordVisibleFlip 1s ease-in-out both!important;
  transform-style:preserve-3d!important;
}
.gb-cell.problem.opened.just-opened .gb-card-back{
  display:grid!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform:rotateY(0deg)!important;
}
.gb-cell.problem.opened .gb-keyword-force{
  transform:rotateY(180deg)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
@keyframes gbKeywordVisibleFlip{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(180deg)}
}


/* === 2026-08-25 keyword front visibility + revival wait feedback === */
.gb-cell.problem.opened{
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
}
.gb-cell.problem.opened .gb-keyword-force{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  transform:rotateY(180deg) translateZ(2px)!important;
  -webkit-transform:rotateY(180deg) translateZ(2px)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.gb-cell.problem.opened .gb-keyword-force strong,
.gb-cell.problem.opened .gb-keyword-force small{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
.gb-cell.problem.opened:not(.just-opened) .gb-keyword-force{
  color:#062d38!important;
}
.gb-revive-wait-blink{
  animation:gbReviveWaitBlink .85s ease-in-out infinite!important;
  color:#0b70d1!important;
  font-weight:1000!important;
}
@keyframes gbReviveWaitBlink{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.32;transform:scale(1.012)}
}
.gb-revive-ended-notice{
  animation:none!important;
  color:#d22f42!important;
  font-weight:1000!important;
}


/* === 2026-08-25 Edge/Chrome stable keyword flip ===
   Rotate an inner flipper instead of the BUTTON itself.
   This avoids Edge backface/compositing differences and guarantees that
   the keyword face becomes the visible inside face after the flip. */
.gb-cell.problem.opened,
.gb-cell.problem.opened.just-opened,
.gb-cell.problem.opened:not(.just-opened){
  transform:none!important;
  -webkit-transform:none!important;
  perspective:1100px!important;
  -webkit-perspective:1100px!important;
  transform-style:flat!important;
  overflow:hidden!important;
}
.gb-cell.problem.opened:not(.just-opened) > .gb-card-flipper,
.gb-cell.problem.opened > .gb-card-flipper{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  z-index:20!important;
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
  transform-origin:50% 50%!important;
  -webkit-transform-origin:50% 50%!important;
  will-change:transform!important;
  transform:rotateY(180deg)!important;
  -webkit-transform:rotateY(180deg)!important;
}
.gb-cell.problem.opened.just-opened > .gb-card-flipper{
  animation:gbEdgeSafeKeywordFlip 1s cubic-bezier(.22,.72,.25,1) both!important;
  -webkit-animation:gbEdgeSafeKeywordFlip 1s cubic-bezier(.22,.72,.25,1) both!important;
}
@keyframes gbEdgeSafeKeywordFlip{
  0%{transform:rotateY(0deg)}
  49.9%{transform:rotateY(89.8deg)}
  50.1%{transform:rotateY(90.2deg)}
  100%{transform:rotateY(180deg)}
}
@-webkit-keyframes gbEdgeSafeKeywordFlip{
  0%{-webkit-transform:rotateY(0deg)}
  49.9%{-webkit-transform:rotateY(89.8deg)}
  50.1%{-webkit-transform:rotateY(90.2deg)}
  100%{-webkit-transform:rotateY(180deg)}
}
.gb-cell.problem.opened .gb-card-flipper > .gb-card-back,
.gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:flat!important;
  -webkit-transform-style:flat!important;
}
.gb-cell.problem.opened .gb-card-flipper > .gb-card-back{
  z-index:2!important;
  display:grid!important;
  transform:rotateY(0deg) translateZ(1px)!important;
  -webkit-transform:rotateY(0deg) translateZ(1px)!important;
}
.gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force{
  z-index:3!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:8px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:rotateY(180deg) translateZ(1px)!important;
  -webkit-transform:rotateY(180deg) translateZ(1px)!important;
  background:linear-gradient(135deg,#5be9ed 0%,#31ceda 50%,#0c97b8 100%)!important;
  color:#062d38!important;
}
.gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force strong{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  color:#062d38!important;
  font-family:Arial,"Noto Sans KR","Malgun Gothic",sans-serif!important;
  font-size:clamp(15px,1.25vw,20px)!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65)!important;
}
.gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force small{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  color:#164a59!important;
  font-family:Arial,"Noto Sans KR","Malgun Gothic",sans-serif!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1.15!important;
  text-align:center!important;
}
html.bp-dark .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force,
body.bp-dark .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force,
html[data-theme="dark"] .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force{
  background:linear-gradient(135deg,#2eb9c5 0%,#168fa9 58%,#0c6986 100%)!important;
}
html.bp-dark .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force strong,
body.bp-dark .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force strong,
html[data-theme="dark"] .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force strong{
  color:#f4fdff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.48)!important;
}
html.bp-dark .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force small,
body.bp-dark .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force small,
html[data-theme="dark"] .gb-cell.problem.opened .gb-card-flipper > .gb-keyword-force small{
  color:#d9f7fb!important;
}