/* Sturmfrei: alles liegt über dem Spielfeld in #sturm-root */
#sturm-root { position: fixed; inset: 0; z-index: 900; overflow: hidden; background: #05070c; font-family: var(--font, sans-serif); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; font-size: clamp(13px, 1.6vh, 20px); }
#sturm-root[hidden] { display: none; }
.sf-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sf-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.sf-x { pointer-events: auto; width: 2.4em; height: 2.4em; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(14,12,36,.82); color: #fff; font: inherit; cursor: pointer; }
.sf-clock { min-width: 13em; padding: .4em 1em .6em; border-radius: 16px; background: rgba(14,12,36,.86); border: 1px solid rgba(255,255,255,.14); text-align: center; }
.sf-clock .l { font-size: .8em; opacity: .8; }
.sf-clock .v { font-size: 2em; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sf-clock.hot { border-color: #ff5a5a; background: rgba(70,10,20,.9); animation: sf-hot 1s ease-in-out infinite; }
@keyframes sf-hot { 50% { box-shadow: 0 0 22px rgba(255,70,70,.8); } }
.sf-clock .car { position: relative; height: .36em; margin: .45em .6em 0; border-radius: 9px; background: rgba(255,255,255,.14); }
.sf-clock .car i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: linear-gradient(90deg, #ffd23f, #ff5a5a); }
.sf-clock .car b { position: absolute; top: 50%; font-size: 1.2em; font-weight: 400; transform: translate(-50%, -56%) scaleX(-1); transition: left .3s linear; }
.sf-left { padding: .35em 1em; border-radius: 16px; background: rgba(14,12,36,.86); border: 1px solid rgba(255,255,255,.14); text-align: center; }
.sf-left b { display: block; font-size: 1.8em; line-height: 1.05; color: #ffb4a8; font-variant-numeric: tabular-nums; }
.sf-left span { font-size: .8em; opacity: .8; }
.sf-room { padding: .4em .9em; border-radius: 999px; background: rgba(14,12,36,.78); }
.sf-room:empty { display: none; }
.sf-code { margin-left: auto; padding: .4em .9em; border-radius: 999px; background: rgba(14,12,36,.78); }
.sf-code:empty { display: none; }
.sf-mini { position: absolute; right: 14px; bottom: 14px; width: clamp(180px, 20vw, 300px); height: auto; border-radius: 14px; background: rgba(8,8,24,.82); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
.sf-toasts { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .35em; pointer-events: none; width: min(92%, 34em); }
.sf-t { padding: .4em 1em; border-radius: 12px; background: rgba(14,12,36,.9); border: 1px solid rgba(255,255,255,.2); text-align: center; animation: sf-t-in .22s ease-out; }
.sf-t.warn { border-color: #ffd23f; color: #ffe9a8; }
.sf-t.good { border-color: #7dff8a; color: #d4ffd9; }
.sf-t.bad { border-color: #ff6a6a; color: #ffd0d0; }
@keyframes sf-t-in { from { opacity: 0; transform: translateY(-.6em); } to { opacity: 1; transform: none; } }
.sf-hint { position: absolute; left: 50%; bottom: 3.6em; transform: translateX(-50%); padding: .45em 1.1em; border-radius: 999px; background: rgba(14,12,36,.92); border: 1px solid #ffd23f; font-weight: 600; opacity: 0; transition: opacity .12s; pointer-events: none; white-space: nowrap; }
.sf-hint.on { opacity: 1; }
.sf-holding { position: absolute; left: 50%; bottom: .9em; transform: translateX(-50%); padding: .3em 1em; border-radius: 999px; background: rgba(14,12,36,.82); opacity: 0; pointer-events: none; white-space: nowrap; }
.sf-holding.on { opacity: 1; }
#sturm-root kbd { display: inline-block; min-width: 1.5em; padding: 0 .3em; border-radius: 6px; background: #ffd23f; color: #2a1f00; font: inherit; font-weight: 700; text-align: center; }
.sf-big { position: absolute; top: 34%; left: 0; right: 0; text-align: center; font-size: clamp(34px, 7vw, 84px); font-weight: 700; text-shadow: 0 4px 22px rgba(0,0,0,.7); opacity: 0; pointer-events: none; }
.sf-big.on { animation: sf-pop 2.2s ease-out; }
@keyframes sf-pop { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.08); } 20% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.sf-intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4,4,14,.62); }
.sf-intro[hidden] { display: none; }
.sf-call { width: min(92%, 32em); padding: 1.6em 2em; border-radius: 26px; background: #15123a; border: 1px solid rgba(255,255,255,.2); text-align: center; animation: sf-t-in .3s ease-out; }
.sf-call .ic { font-size: 3em; animation: sf-ring .5s ease-in-out infinite alternate; }
@keyframes sf-ring { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.sf-call .who { font-size: 1.1em; opacity: .8; }
.sf-call .tx { font-size: 1.5em; font-weight: 700; margin: .4em 0; }
.sf-call .sub { line-height: 1.35; opacity: .9; }
.sf-call .keys { margin-top: .9em; padding: .4em .8em; border-radius: 10px; background: rgba(255,255,255,.08); font-size: .9em; }
.sf-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4,4,14,.7); padding: 16px; box-sizing: border-box; }
.sf-end[hidden] { display: none; }
.sf-paper { width: min(100%, 44em); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 1.5em 2em; border-radius: 10px; background: #f6f0df; color: #2a2433; box-shadow: 0 18px 60px rgba(0,0,0,.6); text-align: center; animation: sf-t-in .3s ease-out; }
.sf-paper .hd { font-size: .9em; letter-spacing: .08em; opacity: .65; }
.sf-paper .stars { font-size: 2.4em; color: #d99a1a; line-height: 1.1; }
.sf-paper h2 { margin: .1em 0; font-size: 2em; color: #a12a2a; }
.sf-paper p { margin: .2em 0 .5em; }
.sf-paper .score { font-weight: 700; }
.sf-paper .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4em; margin-top: .8em; text-align: left; }
.sf-paper h3 { margin: 0 0 .3em; font-size: 1em; }
.sf-paper ul { margin: 0; padding: 0; list-style: none; font-size: .92em; line-height: 1.5; }
.sf-paper small { display: block; opacity: .7; }
.sf-paper .note { margin-top: .4em; font-size: .9em; color: #2f7a4a; }
.sf-paper .foot { margin-top: .9em; font-weight: 700; }
.sf-act, .sf-drop { position: absolute; border-radius: 50%; border: 2px solid #fff; color: #fff; font: inherit; font-weight: 700; touch-action: none; }
.sf-act { right: 20px; bottom: 24%; width: 88px; height: 88px; background: rgba(220,150,30,.86); font-size: 26px; }
.sf-drop { right: 122px; bottom: calc(24% + 8px); width: 62px; height: 62px; background: rgba(40,40,70,.8); }
.sf-act[hidden], .sf-drop[hidden] { display: none; }
.sf-joy { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid rgba(255,255,255,.42); background: rgba(14,12,36,.24); pointer-events: none; }
.sf-joy[hidden] { display: none; }
.sf-joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.46); transform: translate(-50%, -50%); }
.sf-paper { touch-action: pan-y; }
@media (max-width: 640px) {
  .sf-paper .cols { grid-template-columns: minmax(0, 1fr); }
  .sf-room { display: none; }
  .sf-top { flex-wrap: wrap; gap: 8px; }
  .sf-clock { min-width: 0; flex: 1 1 8em; }
  .sf-code { position: absolute; top: 5.4em; right: 0; }
  .sf-hint { bottom: calc(24% + 100px); max-width: 92vw; white-space: normal; text-align: center; border-radius: 16px; box-sizing: border-box; }
  .sf-holding { left: 14px; bottom: 14px; transform: none; max-width: 44vw; white-space: normal; }
}
@media (max-height: 520px) { .sf-mini { width: 120px; top: 62px; bottom: auto; } }