/* Live game only: the administration and lobby keep their existing styles. */
body:has(.live-castle){background:#101720}

body:has(.live-castle) .site-header,body:has(.live-castle) footer.container-xl{display:none}

main.container-xl:has(.live-castle){max-width:none;padding:0!important;margin:0}

.live-castle{color:#f1e5cf;font-family:'Segoe UI',sans-serif;line-height:normal}

.live-castle *{box-sizing:border-box}

.live-castle h1,.live-castle h2,.live-castle h3,.live-castle p{margin:0}

.live-castle button,.live-castle input,.live-castle select{font:inherit}

.live-castle button{cursor:pointer;color:inherit}

.live-castle button:disabled{cursor:default;opacity:.55}

.live-castle button:focus-visible,.live-castle input:focus-visible,.live-castle canvas:focus-visible,.live-castle select:focus-visible{outline:3px solid #ffe2a0;outline-offset:3px}

.live-castle svg{width:1.6em;height:1.6em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;vertical-align:middle}

.live-castle.castle-screen{height:100svh;min-height:620px;position:relative;overflow:hidden;isolation:isolate}
.live-castle .environment,.live-castle .vignette,.live-castle #scene,.live-castle .ground-mist{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.live-castle .environment{inset:-2%;width:104%;height:104%;background:url('/art/castle/prototype/environment.png') center center/cover;z-index:-3;will-change:transform}
.live-castle .vignette{background:linear-gradient(0deg,#060a14ab,transparent 33%,transparent 82%,#0007);z-index:-2}
.live-castle #scene{pointer-events:auto;touch-action:none;z-index:-1}
.live-castle .ground-mist{inset:57% -10% auto;width:120%;height:22%;background:radial-gradient(ellipse at center,#94acbf15,transparent 68%);z-index:0}
.live-castle .scoreboard{position:absolute;left:1.6%;top:1.5%;width:76.5%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1%;pointer-events:none}
.live-castle .team,.live-castle .framed,.live-castle .resource,.live-castle .utility button{border:1px solid #b49351;outline:2px solid #281f16;box-shadow:inset 0 0 0 3px #17130e,inset 0 0 0 4px #655033,0 6px 14px #0009}
.live-castle .team{position:relative;display:flex;align-items:center;gap:9px;min-height:88px;padding:10px 12px 10px 8px;background:linear-gradient(115deg,#171b1ded,#070b0df2);border-radius:7px 2px}
.live-castle .team:before,.live-castle .framed:before,.live-castle .resource:before{content:'◆';position:absolute;top:-8px;left:6px;font-size:15px;color:#b7934c;text-shadow:0 1px #130f08}
.live-castle .team:after,.live-castle .resource:after{content:'◆';position:absolute;bottom:-7px;right:5px;font-size:15px;color:#a9864b}
.live-castle .team.own{background:linear-gradient(110deg,#561c17ed,#1c0c0cf0);border-color:#d4a565;box-shadow:inset 0 0 0 3px #41130e,inset 0 0 0 4px #a25b37,0 4px 16px #0009}
.live-castle .crest{color:#f3cd7f;flex-shrink:0;display:grid;place-items:center;width:51px;height:51px;font:32px Georgia;background:radial-gradient(ellipse at 40% 35%,var(--team),#111a20);border:2px solid var(--team);border-radius:50%;box-shadow:inset 0 0 0 2px #e4d3ae44;aspect-ratio:1;flex-shrink:0}
.live-castle .crest svg{width:39px;height:39px}
.live-castle .team h2{font-size:clamp(13px,1.1vw,21px);font-weight:600;white-space:nowrap}
.live-castle .team p{font-size:clamp(11px,.9vw,16px);white-space:nowrap;margin-top:5px}
.live-castle .team b{font-weight:500}
.live-castle .team small{font-size:11px;color:#eabf7b}
.live-castle .coin{color:#eebd58;filter:drop-shadow(1px 2px 1px #0005)}
.live-castle .coin svg{width:20px;height:24px;fill:#ac702a55}
.live-castle .answer-status{display:block;text-align:right;font-size:11px;color:#efc582;margin-top:5px}
.live-castle .answer-status.ready{color:#a5d5c0}
.live-castle .utility{position:absolute;right:1.5%;top:1.5%;display:flex;gap:12px}
.live-castle .utility button{background:linear-gradient(#1d252de6,#080d10ee);width:52px;height:52px;border-radius:5px;color:#d9bd81}
.live-castle .utility button:hover{background:#33332b}
.live-castle .framed{border-radius:7px;background:#0b1116d9;position:relative}
.live-castle .chat{position:absolute;right:1.5%;top:13%;width:19%;height:42%;padding:12px;backdrop-filter:blur(4px)}
.live-castle .chat-heading{display:flex;align-items:center;gap:8px;border-bottom:1px solid #ad8c4855;padding-bottom:9px}
.live-castle .chat h2{font:small-caps 20px Georgia;flex:1;color:#ebce8c;white-space:nowrap}
.live-castle .chat-heading small{font-size:11px;color:#c6c6bf;white-space:nowrap}
.live-castle .chat-heading button{border:0;background:none;font-size:20px;color:#d4b276}
.live-castle .chat-content{height:calc(100% - 37px);display:flex;flex-direction:column}
.live-castle .messages{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#846e47 #10161c;padding:8px 0}
.live-castle .messages article{display:flex;gap:9px;margin:7px 0;font-size:13px;line-height:1.35}
.live-castle .messages article>div{background:#202831aa;padding:8px 9px;flex:1;border-radius:5px;min-width:0;overflow-wrap:anywhere}
.live-castle .messages header{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.live-castle .messages header b{font-size:12px;font-weight:600;color:#e4cfa2}
.live-castle .messages time{font-size:10px;color:#9ea7ad}
.live-castle .avatar{flex-shrink:0;width:29px;height:29px;display:grid;place-items:center;border:1px solid #ac9291;border-radius:50%;font-size:17px;margin-top:5px;box-shadow:inset 0 0 0 2px #0005;aspect-ratio:1;flex-shrink:0}
.live-castle .red{background:#742a2a}
.live-castle .green{background:#284f3d}
.live-castle .gold{background:#695127}
.live-castle .chat form{display:flex;gap:6px;margin-top:8px}
.live-castle .chat input{width:0;flex:1;background:#0b1116ab;border:1px solid #76838b;border-radius:5px;color:#eee;padding:10px;font-size:12px}
.live-castle .chat form button{border:1px solid #909fa8;border-radius:5px;background:linear-gradient(#566773,#25323e);width:38px}
.live-castle .resources{position:absolute;left:1.6%;bottom:4.5%;width:36%;height:22%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.live-castle .resource{position:relative;padding:16px 8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:7px 7px 5px 5px;background:radial-gradient(ellipse at top,#663029,#260e10);color:#f0d6a0}
.live-castle .resource>svg{width:45%;height:35%;filter:drop-shadow(2px 4px 2px #0009);stroke-width:2;fill:#ba85452b}
.live-castle .resource.shield{background:radial-gradient(ellipse at top,#24445e,#101c2c);color:#c3d4e8}
.live-castle .resource.spy{background:radial-gradient(ellipse at top,#493552,#1f1229);color:#d8bddb}
.live-castle .resource.competition{background:radial-gradient(ellipse at top,#68501d,#2a1c0d)}
.live-castle .resource h3{font:small-caps clamp(13px,1.2vw,21px) Georgia;text-align:center}
.live-castle .resource .count{align-self:flex-end;border-radius:50%;border:2px solid #bd9450;box-shadow:0 2px 4px #000a;display:grid;place-items:center;width:31px;height:31px;background:#10131a;font:24px/1 Arial,sans-serif;font-variant-numeric:lining-nums tabular-nums;text-align:center;color:#f1e4c9;aspect-ratio:1;flex-shrink:0}
.live-castle .resource small{font-size:clamp(9px,.76vw,14px);color:#cbbeb3}
.live-castle .question{position:absolute;right:1.5%;bottom:3%;width:60%;min-height:26%;display:grid;grid-template-columns:minmax(0,1fr) 27%;padding:16px;background:radial-gradient(ellipse at 28% 40%,#f1e2c2e8,#d2b58be8),repeating-linear-gradient(25deg,#91774d 0 1px,#e5d0a6 1px 4px);color:#271c11;border:5px ridge #9d7947;outline:3px solid #211c16;box-shadow:inset 0 0 0 2px #82623d,inset 0 0 24px #61421e9c,0 8px 25px #000a}
.live-castle .question-main{min-width:0;padding-right:16px}
.live-castle .round{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;background:linear-gradient(90deg,#372b20,#645037,#33291d);color:#f3e4c8;margin:-8px 0 12px;padding:6px 10px;border:1px solid #a78346;border-radius:3px}
.live-castle .round svg{width:22px;height:22px;color:#d7b56d}
.live-castle .round time{font-size:22px;color:#f0d571;font-weight:600}
.live-castle .question h1{font:bold clamp(16px,1.42vw,27px)/1.22 Georgia;margin:0 0 12px}
.live-castle .options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.live-castle .options button{min-height:42px;padding:8px 14px;border:1px solid #998265;border-radius:5px;background:#eddbba55;color:#211a10;font-weight:600;font-size:clamp(13px,1vw,18px);position:relative;box-shadow:inset 0 1px #fff5}
.live-castle .options button[aria-pressed=true]{background:linear-gradient(#74542d,#392919);color:#ffe2a1;border:2px solid #f9cf6b;box-shadow:0 0 5px #e7b04d,inset 0 0 4px #e9b34b}
.live-castle .options button:hover:not(:disabled){filter:brightness(1.12)}
.live-castle .marks{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:3px}
.live-castle .marks i{font:11px 'Segoe UI';border:1px solid #c3ae7d;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;background:#82372f;color:white;aspect-ratio:1;flex-shrink:0}
.live-castle .marks i:nth-child(2){background:#3e684d}
.live-castle .marks i:nth-child(3){background:#796235}
.live-castle .answer-actions{border-left:1px solid #a48a6480;padding-left:16px;display:flex;flex-direction:column;gap:10px;text-align:center;font-size:14px}
.live-castle .answer-actions p{font-weight:600}
.live-castle .price{display:flex;gap:6px;align-items:center;justify-content:center}
.live-castle .reward{text-align:left;display:grid;gap:5px}
.live-castle .reward strong{font-size:clamp(12px,1vw,18px);white-space:nowrap}
.live-castle .reward small{font-size:10px;color:#6b553b}
.live-castle .answer-actions>button{margin-top:auto;padding:10px 8px;background:linear-gradient(#8a3927,#471b16);border:3px ridge #b7814e;outline:1px solid #4d2d1e;box-shadow:inset 0 0 0 2px #441c16,0 3px 4px #0004;color:#f8e5c4;font:small-caps clamp(14px,1.35vw,24px) Georgia;border-radius:3px}
.live-castle .answer-actions>small{font-size:11px;margin-top:-5px}
.live-castle .demo-controls{position:absolute;left:40%;bottom:32%;display:flex;align-items:center;gap:6px;background:#0b131dc9;padding:5px 8px;border:1px solid #9c835a60;border-radius:5px;font-size:11px}
.live-castle .demo-controls>span{color:#d9c49c;margin-right:5px}
.live-castle .demo-controls button{background:#2c343bbd;border:1px solid #7e775e;border-radius:3px;padding:5px 9px}
.live-castle .notice{position:absolute;bottom:.5%;width:100%;text-align:center;font-size:10px;color:#c4cbd0;text-shadow:0 1px 3px black;pointer-events:none}
.live-castle dialog{color:#e9dbc2;width:min(480px,90vw);padding:28px;background:#121c25!important}
.live-castle dialog::backdrop{background:#050b14b5;backdrop-filter:blur(5px)}
.live-castle dialog h2{font:24px Georgia;color:#e5c38a;margin-bottom:20px}
.live-castle dialog p{margin:14px 0;line-height:1.6}
.live-castle dialog label{display:block;margin:18px 0}
.live-castle dialog .close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:28px}
.live-castle body.reduced .environment{will-change:auto}
.live-castle .chat.collapsed{height:48px}
.live-castle .chat.collapsed .chat-content{display:none}

@media(min-width:1800px){.live-castle .team{min-height:105px}
.live-castle .crest{width:64px;height:64px;aspect-ratio:1;flex-shrink:0}
.live-castle .team small,.live-castle .answer-status{font-size:13px}
.live-castle .chat{padding:16px}
.live-castle .chat h2{font-size:24px}
.live-castle .messages article{font-size:16px;margin:12px 0}
.live-castle .messages header b{font-size:14px}
.live-castle .avatar{width:35px;height:35px;aspect-ratio:1;flex-shrink:0}
.live-castle .question{padding:22px}
.live-castle .options button{min-height:49px}
.live-castle .resource .count{width:38px;height:38px;aspect-ratio:1;flex-shrink:0}
.live-castle .answer-actions{font-size:17px;gap:13px}
.live-castle .utility button{width:60px;height:60px}
.live-castle .demo-controls{font-size:13px}
}

@media(max-width:1200px){.live-castle .crest{width:33px;height:33px;font-size:23px;aspect-ratio:1;flex-shrink:0}
.live-castle .crest svg{width:27px;height:27px}
.live-castle .team{gap:5px;padding:8px;min-height:77px}
.live-castle .team h2{font-size:12px}
.live-castle .team p{font-size:10px}
.live-castle .team p svg{display:none}
.live-castle .chat{width:23%;top:15%;height:40%}
.live-castle .chat h2{font-size:17px}
.live-castle .chat-heading small{display:none}
.live-castle .scoreboard{width:79%}
.live-castle .utility{gap:7px}
.live-castle .utility button{width:38px;height:42px}
.live-castle .messages article{font-size:12px;gap:5px}
.live-castle .avatar{width:23px;height:23px;font-size:13px;aspect-ratio:1;flex-shrink:0}
.live-castle .question{width:62%;min-height:29%;padding:12px;grid-template-columns:minmax(0,1fr) 28%}
.live-castle .question-main{padding-right:10px}
.live-castle .round{font-size:11px;gap:7px}
.live-castle .question h1{font-size:17px}
.live-castle .answer-actions{padding-left:10px;font-size:12px;gap:9px}
.live-castle .options button{min-height:39px;font-size:13px;padding:7px}
.live-castle .marks{position:static;transform:none;display:inline-flex;margin-left:6px}
.live-castle .marks i{width:14px;height:14px;font-size:9px;aspect-ratio:1;flex-shrink:0}
.live-castle .resources{width:33.5%;gap:6px}
.live-castle .resource{padding:12px 5px}
.live-castle .resource h3{font-size:13px}
.live-castle .demo-controls{bottom:35%;left:38%}
.live-castle .reward strong{white-space:normal}
.live-castle .answer-status{font-size:10px}
}

@media(max-width:700px){.live-castle.castle-screen{height:100svh;min-height:850px}
.live-castle .environment{background-position:42% center}
.live-castle .scoreboard{width:96%;left:2%;top:1%;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.live-castle .team{min-height:65px;padding:6px}
.live-castle .team h2{font-size:12px}
.live-castle .team p{font-size:10px;margin:3px 0}
.live-castle .team .crest{;aspect-ratio:1;flex-shrink:0}
.live-castle .team small{display:none}
.live-castle .answer-status{font-size:9px;margin-top:0}
.live-castle .utility{top:18%;right:3%;gap:7px}
.live-castle .utility button{width:34px;height:35px}
.live-castle .utility svg{width:20px;height:20px}
.live-castle .chat{width:57%;height:23%;top:23%;right:3%;padding:9px}
.live-castle .chat h2{font-size:16px}
.live-castle .chat-heading{padding-bottom:3px}
.live-castle .chat-heading button{font-size:16px}
.live-castle .chat-content{height:calc(100% - 25px)}
.live-castle .messages article{font-size:11px;margin:4px 0}
.live-castle .messages header b{font-size:10px}
.live-castle .messages time{font-size:9px}
.live-castle .messages article>div{padding:5px}
.live-castle .messages .avatar{display:none;aspect-ratio:1;flex-shrink:0}
.live-castle .chat input{font-size:11px;padding:6px}
.live-castle .chat form button{width:30px}
.live-castle .chat.collapsed{height:35px}
.live-castle .resources{bottom:35.5%;height:12%;left:3%;width:94%;gap:7px}
.live-castle .resource{padding:9px 5px 7px}
.live-castle .resource>svg{height:29%;width:35%}
.live-castle .resource h3{font-size:12px}
.live-castle .resource .count{position:absolute;right:7px;top:8px;width:20px;height:20px;font-size:16px;border-width:1px;aspect-ratio:1;flex-shrink:0}
.live-castle .resource small{font-size:8px}
.live-castle .question{bottom:3%;left:3%;width:94%;min-height:30%;padding:11px;grid-template-columns:1fr;gap:10px}
.live-castle .question-main{padding:0}
.live-castle .question h1{font-size:16px;margin-bottom:9px}
.live-castle .round{margin-top:-4px;margin-bottom:8px;font-size:11px}
.live-castle .round time{font-size:17px}
.live-castle .round svg{width:17px;height:17px}
.live-castle .options{gap:6px}
.live-castle .options button{min-height:35px;font-size:12px}
.live-castle .answer-actions{border-left:0;border-top:1px solid #8d755160;padding:9px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;text-align:left}
.live-castle .answer-actions p{font-size:10px}
.live-castle .price{grid-row:2;justify-content:start;font-size:11px}
.live-castle .price svg{height:17px;width:14px}
.live-castle .reward{grid-row:3;gap:3px}
.live-castle .reward span,.live-castle .reward small{font-size:8px}
.live-castle .reward strong{font-size:11px}
.live-castle .answer-actions>button{grid-row:1 / 3;grid-column:2;align-self:center;margin:0;font-size:18px;padding:8px}
.live-castle .answer-actions>small{grid-row:3;grid-column:2;align-self:start;text-align:center;margin:0;font-size:10px}
.live-castle .demo-controls{left:3%;bottom:49%;font-size:10px;gap:4px;padding:4px 6px}
.live-castle .demo-controls button{padding:5px 6px}
.live-castle .notice{font-size:8px;padding:0 10px}
.live-castle .resources,.live-castle .question{z-index:1}
}
.live-castle .resource h3{font-size:clamp(11px,1.05vw,19px)}
.live-castle .demo-controls{bottom:calc(3% + var(--question-height, 260px) + 14px)}
 @media(max-width:700px){.live-castle.castle-screen{min-height:1000px}
.live-castle .resources{bottom:36%;height:11%}
.live-castle .demo-controls{bottom:49%}
.live-castle .resource h3{font-size:12px}
}

@media(min-width:700px){.live-castle #home{display:none}
}
.live-castle /* Translucent event key,.live-castle kept clear of the team's character and resource cards. */
.cell-legend{position:absolute;left:1.6%;top:max(140px,15%);width:225px;max-height:53%;overflow:auto;padding:10px 12px;background:linear-gradient(90deg,#080e17ba,#080e1780);border-top:1px solid #ac8c505e;border-bottom:1px solid #ac8c505e;border-radius:4px;color:#e9e0d0;scrollbar-width:thin;scrollbar-color:#776344 transparent}
.live-castle .cell-legend summary{font:small-caps 16px Georgia;color:#ddc38f;cursor:pointer;padding-bottom:4px}
.live-castle .cell-legend dl{margin:5px 0 0}
.live-castle .cell-legend dl>div{position:relative;min-height:39px;padding:3px 0 4px 37px}
.live-castle .cell-legend dt{font-size:13px;font-weight:500}
.live-castle .cell-legend dd{margin:2px 0 0;font-size:10px;line-height:1.3;color:#c4c4c2}
.live-castle .cell-legend i{position:absolute;left:0;top:4px;width:29px;height:29px;display:grid;place-items:center;font:21px Georgia;color:#f5dfab;background:linear-gradient(135deg,var(--event,#465565),#141b2480);border:1px solid #b69c635c;border-radius:4px;box-shadow:inset 0 0 6px #0005}
.live-castle .cell-legend .unknown{border-top:1px solid #ac8c5038;margin-top:4px;padding-top:8px}
.live-castle .cell-legend .unknown i{top:9px}

@media(max-width:1200px) and (min-width:701px){.live-castle .cell-legend{width:203px;top:15%;max-height:51%;padding:8px}
.live-castle .cell-legend dl>div{min-height:34px}
.live-castle .cell-legend dd{font-size:9px}
.live-castle .cell-legend dt{font-size:12px}
}

@media(max-width:700px){.live-castle .cell-legend{left:3%;top:18%;width:185px;max-height:42%;z-index:3;padding:7px 9px;background:#0b1420e8}
.live-castle .cell-legend:not([open]){width:auto;background:#0b1420b8}
.live-castle .cell-legend summary{font-size:14px;padding:0}
.live-castle .cell-legend dl>div{min-height:36px}
.live-castle .cell-legend dd{font-size:9px}
}
.live-castle .preview-icon-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.live-castle .preview-icon-options button{padding:8px;border:1px solid #81683c;border-radius:5px;background:#19222c;color:#e0c385}
.live-castle .preview-icon-options button[aria-pressed=true]{outline:2px solid #edc579;background:#4f4030}
.live-castle .preview-icon-options svg{width:32px;height:32px}


.live-castle .scoreboard{display:flex;overflow-x:auto;overflow-y:hidden;pointer-events:auto;padding:8px 4px 12px;gap:12px;scrollbar-width:thin}

.live-castle .team{flex:0 0 280px;min-width:0}

.live-castle .team>div{min-width:0}
.live-castle .team h2{overflow:hidden;text-overflow:ellipsis}

.live-castle .team-emblem{width:51px;height:51px;flex-shrink:0}

.live-castle .team-emblem svg{width:39px;height:39px}

.live-castle .options .option{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px}

.live-castle .marks{position:static;transform:none;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;max-width:40%}

.live-castle .options .correct{background:#446d37;color:#fff;border-color:#a0bd73}

.live-castle .answer-mode{display:flex;gap:8px;margin:0 0 8px}

.live-castle .answer-mode button{border:1px solid #998265;border-radius:4px;background:#eddbba55;color:#211a10;padding:4px 8px;font-size:12px}

.live-castle .answer-mode [aria-pressed=true]{background:#5e452a;color:#fff0d1}

.live-castle .answer-actions .text-action{font:11px 'Segoe UI';background:transparent;color:#3c2917;border:0;outline:0;box-shadow:none;padding:2px}

.live-castle .question{max-height:48%;overflow:auto;scrollbar-width:thin}

.live-castle .round-result{margin-top:10px;font-size:13px}

.live-castle .game-notices{position:absolute;left:27%;right:23%;top:15%;z-index:5;pointer-events:none}

.live-castle .game-notices p{background:#101923ed;border:1px solid #ba965b;padding:8px;margin:3px 0;font-size:13px;pointer-events:auto}

.live-castle .game-notices button{background:#34414c;border:1px solid #ba965b;border-radius:3px}

.live-castle .castle-modal-backdrop{position:fixed;inset:0;z-index:100;background:#050b14b5;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}

.live-castle .castle-modal{width:min(650px,95vw);max-height:85svh;overflow:auto;padding:28px;color:#e9dbc2;background:#121c25}

.live-castle .castle-modal h2{font:24px Georgia;color:#e5c38a;margin-bottom:20px}

.live-castle .castle-modal h3{font:20px Georgia;margin:18px 0}

.live-castle .castle-modal p{margin:14px 0;line-height:1.6}

.live-castle .castle-modal label{display:block;margin:18px 0 8px}

.live-castle .castle-modal button,.live-castle .castle-modal select{background:#293641;color:#eedfc6;border:1px solid #b29461;border-radius:4px;padding:8px;margin:4px;max-width:100%}

.live-castle .castle-modal .close{position:absolute;right:10px;top:4px;border:0;background:none;font-size:28px}

@media(max-width:700px){.live-castle .scoreboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:16%;gap:6px;overflow-x:hidden;overflow-y:auto}
.live-castle .team{padding:6px;min-height:64px}
.live-castle .team-emblem{width:30px;height:30px}
.live-castle .team-emblem svg{width:25px;height:25px}
.live-castle .game-notices{left:3%;right:3%;top:16%;z-index:8}
.live-castle .question{max-height:34%;min-height:30%}
.live-castle .answer-actions{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;align-items:center}
.live-castle .answer-actions>button{font-size:14px}
.live-castle .answer-actions>small{width:100%;margin:0}
.live-castle .answer-actions .reward strong{white-space:normal}
.live-castle .marks{max-width:45%}
.live-castle .marks i{font-size:9px}
}


@media(max-width:700px){.live-castle .resources{bottom:37%;height:10%}.live-castle .question{max-height:36%;min-height:30%;bottom:1.5%}}

.live-castle .options button.option.correct{background:#446d37;color:#fff;border:2px solid #a0bd73;opacity:1}

/* Phone HUD follows document flow so content length cannot overlap adjacent panels. */
@media(max-width:1100px){
.live-castle.castle-screen{height:auto;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:10px 12px 24px}
.live-castle .scoreboard,.live-castle .utility,.live-castle .cell-legend,.live-castle .resources,.live-castle .question,.live-castle .chat,.live-castle .game-notices{position:relative;inset:auto;width:100%;min-width:0;margin:0}
.live-castle .scoreboard{grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,280px));max-height:180px;overflow-x:hidden;overflow-y:auto;gap:8px;padding:8px 4px 12px}
.live-castle .team{min-height:76px;padding:8px;gap:6px}
.live-castle .team-emblem{width:30px;height:30px}.live-castle .team-emblem svg{width:25px;height:25px}.live-castle .team h2{font-size:12px}.live-castle .team p{font-size:11px}.live-castle .answer-status{font-size:10px}
.live-castle .utility{grid-row:2;justify-content:flex-end;gap:10px}.live-castle .utility button{width:44px;height:44px}
.live-castle .cell-legend,.live-castle .cell-legend:not([open]){grid-row:3;width:100%;max-height:none}.live-castle .cell-legend summary{min-height:30px;align-content:center}
.live-castle #scene{position:relative;inset:auto;grid-row:4;width:100%;height:260px;z-index:0;border-radius:8px}
.live-castle .ground-mist{display:none}
.live-castle .resources{grid-row:5;height:110px;bottom:auto;gap:8px}
.live-castle .resource{padding:10px 4px}.live-castle .resource h3{font-size:11px}.live-castle .resource small{font-size:9px}.live-castle .resource .count{top:6px;right:5px}
.live-castle .question{grid-row:6;min-height:0;max-height:none;overflow:visible;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
.live-castle .question-main{min-width:0;padding:0}.live-castle .question h1{font-size:17px;overflow-wrap:anywhere}
.live-castle .options{grid-template-columns:minmax(0,1fr);gap:8px}.live-castle .options button{min-height:44px;font-size:14px;overflow-wrap:anywhere}
.live-castle .answer-mode{flex-wrap:wrap}.live-castle .answer-mode button{min-height:44px}
.live-castle .answer-actions{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;border-left:0;border-top:1px solid #8d755160;padding:12px 0 0;font-size:14px}
.live-castle .answer-actions>button{min-height:44px;font-size:15px}.live-castle .answer-actions p,.live-castle .answer-actions>small,.live-castle .price{font-size:12px}.live-castle .reward strong{font-size:13px}.live-castle .reward span,.live-castle .reward small{font-size:11px}
.live-castle .chat{grid-row:7;height:280px;max-height:none;padding:12px}.live-castle .chat.collapsed{height:auto}.live-castle .chat-heading{min-height:44px}.live-castle .chat-content{height:calc(100% - 48px)}
.live-castle .messages{min-height:0}.live-castle .messages article{font-size:13px}.live-castle .chat input{font-size:16px;min-width:0}.live-castle .chat form button,.live-castle .chat-heading button{min-width:44px;min-height:44px}
.live-castle .game-notices{grid-row:8}.live-castle .game-notices:empty{display:none}
.live-castle .castle-modal-backdrop{padding:10px}.live-castle .castle-modal{position:relative;width:100%;max-height:calc(100dvh - 20px);padding:48px 16px 16px;overflow:auto}.live-castle .castle-modal .close{position:absolute;top:8px;right:8px;width:44px;height:44px;margin:0}.live-castle .castle-modal button{min-height:44px}
}
@media(max-width:380px){.live-castle .resources{grid-template-columns:repeat(2,minmax(0,1fr));height:220px}.live-castle .resource h3{font-size:13px}.live-castle .resource small{font-size:11px}}

.live-castle .messages .system-message>div{background:#65502a55;border-left:3px solid #c6a35f}.live-castle .messages .system-message header b{color:#f4ce84}

.live-castle[data-theme="forest"] .environment{background-image:url("/art/forest/environment.png")}

.live-castle[data-theme="desert"] .environment{background-image:url("/art/desert/environment.png")}