/* Physical stone controls and state-driven symbols; verbal task content stays UI. */
.hud-values, .team-title small, .phase-state, .world-caption, .world-note,
.landscape-title, .task-history, .answer-panel > span, .charge > span, .charge > small {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap;
}
.team-title strong { font: 600 21px Georgia, serif; }
.team-title { gap: 8px; }
.hud, .team-b .hud { background: linear-gradient(#08171c75, transparent); }
.prompt { position: relative; padding-right: 66px; border-radius: 2px; }
.prompt-label { color: #e6dfca; font-size: clamp(11px, .85vw, 16px); letter-spacing: .14em; }
.phase-rune { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; fill: none; stroke: #a7a58b; stroke-width: 1.3; }
.clock-track { stroke: #ffffff1c; stroke-width: 2; }
.clock-fill { stroke-dasharray: 100; stroke: var(--accent); stroke-width: 2.6; transform-origin: 24px 24px; transform: rotate(-90deg); }
.team[data-phase='AKTION'] .phase-rune { color: var(--accent); filter: drop-shadow(0 0 4px #9acaff44); }
.team[data-urgent='true'] .clock-fill { stroke-dasharray: 100; stroke: #ffb357; }
.team[data-phase='AKTION'] .prompt { border-left: 3px solid var(--accent); box-shadow: inset 14px 0 26px -21px var(--accent); }
.team[data-phase='VORBEREITUNG'] .prompt { border-left-color: #c3b78b5e; }
.keyboard, .team-b .keyboard { background: #09151b4d; border: 0; padding-inline: 6px; }
.key-row button, .team-b .key-row button {
  border: 1px solid #9f926562; border-radius: 3px;
  background: radial-gradient(ellipse at 30% 10%, #62727644, transparent 70%), linear-gradient(155deg, #303b3a, #152429 65%, #0c141a);
  box-shadow: inset 0 1px 0 #c8c3a253, inset 0 -3px 0 #060d10, 0 2px 3px #0008;
  color: #f2eedc; font-family: Georgia, serif; font-weight: 600;
  text-shadow: 0 1px 1px #000, 0 0 9px #ccdccc24;
}
.key-row button:disabled { opacity: .6; color: #9caaad; }
.key-row button:not(:disabled):active { background-color: #536c75; box-shadow: inset 0 0 18px var(--accent); color: white; }
.key-row .function-key { font: 500 28px Georgia, serif; }
.key-row .enter-key { border-color: var(--accent); border-width: 1px; }
.answer-panel { border: 0; border-bottom: 1px solid #b6a57555; border-radius: 0; background: #0a171cbf; grid-template-columns: 1fr auto; grid-template-rows: 1fr; gap: 10px; }
.answer-panel output { grid-column: 1; font-family: Georgia, serif; letter-spacing: .03em; }
.answer-panel small { grid-column: 2; font-size: 17px; color: #e7e7d8; }
.team[data-result='correct'] .answer-panel small { color: #b7e1ad; }
.team[data-result='wrong'] .answer-panel small { color: #efb096; }
.power-panel, .team-b .power-panel { grid-template-columns: 130px 1fr; background: #09141c9c; border: 0; align-items: center; }
.charge { display: flex; align-items: center; justify-content: center; }
.charge-pips { display: flex; gap: 9px; align-items: center; }
.charge-pips i { flex: none; width: 20px; height: 27px; border: 0; border-radius: 0; clip-path: polygon(50% 0,100% 33%,85% 75%,50% 100%,15% 75%,0 33%); background: linear-gradient(125deg,#657a7a,#1a2b31 45%,#53666a 48%,#18252c); box-shadow: none; opacity: .7; }
.charge-pips i.filled { background: linear-gradient(125deg,#f4ffff,var(--accent) 35%,#254d61 38%,var(--accent) 70%,#c0f3f7); opacity: 1; filter: drop-shadow(0 0 4px var(--accent)); }
.power-buttons { display: flex; gap: 14px; justify-content: flex-end; align-items: center; }
.power-buttons button { position: relative; width: 58px; height: 46px; flex: none; border: 1px solid #b4a57a7a; border-radius: 35%; background: radial-gradient(ellipse at 40% 30%,#3a4946,#101d24 75%); box-shadow: inset 0 0 0 3px #07141c, 0 2px 4px #0009; color: #d3c08c; }
.power-buttons svg { display: block; width: 35px; height: 35px; margin: auto; pointer-events: none; }
.power-buttons button:disabled { opacity: .48; filter: saturate(.4); }
.charged .power-buttons button:not(:disabled) { color: #f6e2a5; border-color: #ecda9d; box-shadow: inset 0 0 12px #d3b57545,0 0 10px #d3b57540; }
.power-buttons button:not(:disabled):active { box-shadow: inset 0 0 20px var(--accent); }
.world-portal { transform: translate(-50%, 4%); }
.world-portal::before { inset: 21% 42% 28% 37%; border-radius: 50%; transform: skewY(-12deg); background: radial-gradient(ellipse,#e4f2f7aa,var(--accent) 60%,transparent 75%); opacity: .18; }
.team[data-world-action='portal'] .world-portal::before { opacity: 1; filter: blur(5px); }
.team[data-world-action='portal'] .world-portal { filter: drop-shadow(0 0 20px var(--accent)); }
.route i { background: #a9b29b44; border-color: #b4c6a266; }
.magic-trail, .ward, .binding { position: absolute; pointer-events: none; display: none; }
.magic-trail { inset: 30% 32% 18% -25%; }
.magic-trail i { position: absolute; height: 3px; left: 0; right: 0; top: 25%; background: linear-gradient(90deg,transparent,var(--accent),#e8fcff); box-shadow: 0 0 8px var(--accent); transform: rotate(-4deg); }
.magic-trail i:nth-child(2) { top: 50%; left: 15%; }
.magic-trail i:nth-child(3) { top: 75%; left: 30%; }
.team[data-cue='dash'] .magic-trail { display: block; animation: dash-ribbons .5s ease-out both; }
@keyframes dash-ribbons { from { transform: translateX(20px) scaleX(.3); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(-14px) scaleX(1.15); opacity: 0; } }
.ward { inset: 10% 23% 6%; border: 2px solid #bddef4c9; border-radius: 48%; box-shadow: inset 0 0 18px #72b7d92c,0 0 10px #72b7d972; background: radial-gradient(ellipse,transparent 48%,#a7daf126 80%,transparent); }
.ward i { position: absolute; top: -5px; left: 46%; width: 7px; height: 10px; background: #d6f0ff; transform: rotate(45deg); box-shadow: 0 0 6px #b5e2ff; }
.ward i:nth-child(2) { top: 9%; left: 19%; }
.ward i:nth-child(3) { top: 9%; left: 77%; }
.team[data-shield='1'] .ward i:nth-child(n+2),.team[data-shield='2'] .ward i:nth-child(3) { opacity: .12; }
.team.shielded .ward { display: block; }
.team.shielded .world-figure::after,.team.hexed .world-figure::after { display: none; }
.team[data-cue='shield'] .ward,.team[data-cue='block'] .ward { display: block; animation: ward-impact .65s ease-out; }
@keyframes ward-impact { from { transform: scale(.65); opacity: .2; } 40% { transform: scale(1.13); opacity: 1; } to { transform: scale(1); opacity: .8; } }
.binding { inset: 43% 34% 19%; display: none; border: 3px double #c8a8f3; transform: rotate(25deg); box-shadow: 0 0 13px #a871df,inset 0 0 10px #a871df30; }
.binding::before,.binding::after { content: ''; position: absolute; width: 9px; height: 9px; background: #d9b6f2; box-shadow: 0 0 9px #bc8bef; top: -7px; left: -7px; }
.binding::after { top: auto; left: auto; right: -7px; bottom: -7px; }
.team.hexed .binding { display: block; }
.team[data-cue='hex'] .binding { animation: hex-impact .65s ease-out; }
@keyframes hex-impact { from { transform: rotate(70deg) scale(1.8); opacity: 0; } 40% { opacity: 1; } to { transform: rotate(25deg) scale(1); } }
.landscape[data-transition='active'] { animation: world-instability .48s ease-out; }
.landscape[data-transition='active']::after { background: radial-gradient(ellipse at 50% 58%,#adceef33,transparent 65%),linear-gradient(180deg,#08121755,transparent 30%,transparent 67%,#081217aa); }
@keyframes world-instability { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3px,1px)} 40%{transform:translate(3px,-1px)} 60%{transform:translate(-2px,0)} 80%{transform:translate(1px,1px)} }
#gameScene[data-motion='reduced'] .landscape,#gameScene[data-motion='reduced'] .world * { animation: none !important; }
#gameScene[data-motion='reduced'] .magic-trail { display: none; }
@media(max-width:1100px) { .power-panel,.team-b .power-panel { grid-template-columns:100px 1fr; } .power-buttons{gap:8px} .power-buttons button{width:48px} .charge-pips{gap:6px}.charge-pips i{width:17px} }
.key-row button,.team-b .key-row button {
  background-color: transparent;
  background-image: url('../media/crawl-v8/stone-key.png');
  background-size: 100% 100%; background-repeat: no-repeat;
  border-color: transparent; box-shadow: none;
}
.key-row .enter-key { box-shadow: inset 0 0 15px -6px var(--accent); }
.key-row button:disabled { opacity: .55; }
.portal-trophies { display:flex; gap:5px; align-items:center; margin-left:12px; }
.portal-trophies i { display:block; width:10px; height:14px; border:2px solid #d1be89; border-radius:50% 50% 25% 25%; box-shadow:inset 0 0 4px var(--accent); }
.team.leading .team-mark { filter:drop-shadow(0 0 5px var(--accent)); }