:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: #f8fafc; background: #101827; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .45; background: radial-gradient(circle at 15% 10%, rgba(245,200,76,.18), transparent 32%), radial-gradient(circle at 85% 80%, rgba(96,165,250,.16), transparent 34%); }
button { font: inherit; }
.app { position: relative; min-height: 100vh; padding: 28px 18px; display: flex; flex-direction: column; }
.topbar, main, footer { width: min(1060px, 100%); margin-inline: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 34px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #f5c84c; color: #101827; font-size: 23px; box-shadow: 0 8px 24px rgba(245,200,76,.2); }
.eyebrow { margin: 0; color: #94a3b8; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.topbar .eyebrow { margin-top: 3px; }
.topbar strong { display: block; font-size: 1.04rem; }
.score { padding: 9px 13px; border: 1px solid #29364a; border-radius: 999px; color: #cbd5e1; background: rgba(22,34,53,.8); font-size: .9rem; }
.score b { color: #f5c84c; }
.reset-progress { min-height: 38px; padding: 0 14px; border: 1px solid #29364a; border-radius: 999px; color: #f5c84c; background: rgba(22,34,53,.8); font-size: .76rem; font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.reset-progress:hover, .reset-progress:focus-visible { transform: translateY(-1px); filter: brightness(1.15); outline: none; }
.language-control, .profile-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 11px; border: 1px solid #29364a; border-radius: 999px; color: #cbd5e1; background: rgba(22,34,53,.8); font-size: .78rem; font-weight: 800; }
.profile-button[hidden] { display: none !important; }
.language-control span { color: #71829a; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.language-control select { border: 0; color: #f5c84c; background: transparent; font: inherit; cursor: pointer; outline: none; }
.profile-button { color: #101827; border-color: #f5c84c; background: #f5c84c; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.profile-button:hover, .profile-button:focus-visible { transform: translateY(-2px); filter: brightness(1.06); outline: none; }
.install-app { min-height: 38px; padding: 0 12px; border: 1px solid #f5c84c; border-radius: 999px; color: #101827; background: #f5c84c; font-size: .76rem; font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.install-app:hover, .install-app:focus-visible { transform: translateY(-1px); filter: brightness(1.06); outline: none; }
.install-help { position: absolute; z-index: 3; top: 74px; right: 18px; width: min(320px, calc(100vw - 36px)); margin: 0; padding: 11px 13px; border: 1px solid rgba(245,200,76,.55); border-radius: 12px; color: #f8fafc; background: #18263b; box-shadow: 0 12px 28px rgba(0,0,0,.25); font-size: .78rem; line-height: 1.4; }
main { flex: 1; }
.game-card { display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; min-height: 560px; border: 1px solid #29364a; border-radius: 28px; background: rgba(22,34,53,.78); box-shadow: 0 26px 80px rgba(0,0,0,.26); backdrop-filter: blur(14px); }
.visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 42px 42px 35px; background: radial-gradient(circle at 50% 46%, rgba(96,165,250,.12), transparent 36%), linear-gradient(150deg, rgba(245,200,76,.10), rgba(96,165,250,.03) 55%, transparent); border-right: 1px solid #29364a; }
.visual-heading { position: absolute; inset: 30px 34px auto; display: flex; justify-content: space-between; color: #71829a; font-size: .67rem; font-weight: 800; letter-spacing: .16em; }
.visual-index { color: #f5c84c; }
.hangman-scene { position: relative; z-index: 1; width: min(100%, 355px); margin-top: 24px; }
.photo-stage { position: relative; width: 100%; height: 390px; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 62% 38%, rgba(156,108,74,.2), transparent 42%), #132138; }
.photo-stage img { position: absolute; display: block; pointer-events: none; user-select: none; }
.stage-piece { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity .28s ease; }
.photo-stage[data-errors="1"] .stage-base,
.photo-stage[data-errors="2"] .stage-base,
.photo-stage[data-errors="3"] .stage-base,
.photo-stage[data-errors="4"] .stage-base,
.photo-stage[data-errors="5"] .stage-base,
.photo-stage[data-errors="6"] .stage-base { opacity: .82; clip-path: inset(72% 0 0); }
.photo-stage[data-errors="2"] .stage-vertical,
.photo-stage[data-errors="3"] .stage-vertical,
.photo-stage[data-errors="4"] .stage-vertical,
.photo-stage[data-errors="5"] .stage-vertical,
.photo-stage[data-errors="6"] .stage-vertical { opacity: .82; clip-path: inset(27% 58% 28% 10%); }
.photo-stage[data-errors="3"] .stage-top,
.photo-stage[data-errors="4"] .stage-top,
.photo-stage[data-errors="5"] .stage-top,
.photo-stage[data-errors="6"] .stage-top { opacity: .82; clip-path: polygon(0 0, 70% 0, 70% 28%, 0 28%); }
.photo-stage[data-errors="4"] .stage-rope,
.photo-stage[data-errors="5"] .stage-rope,
.photo-stage[data-errors="6"] .stage-rope { top: 0; left: 0; width: 100%; height: 100%; opacity: .82; transform: none; clip-path: inset(0 0 63% 0); }
.photo-stage[data-errors="5"] .stage-loop,
.photo-stage[data-errors="6"] .stage-loop { opacity: .82; clip-path: polygon(45% 35%, 100% 35%, 100% 100%, 45% 100%); }
.real-character { top: 13%; left: 36%; width: 58%; height: 88%; object-fit: contain; object-position: center; visibility: hidden; opacity: 0; transform: scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; transform-origin: 52% 12%; filter: saturate(1) brightness(1); }
.real-character:not(.hidden) { opacity: .98; transform: rotate(calc(var(--error-level, 0) * .55deg)) scale(1); filter: saturate(calc(1 - var(--error-level, 0) * .025)) brightness(calc(1 - var(--error-level, 0) * .012)); }
.attempts { position: absolute; top: 50%; left: 0; z-index: 4; display: flex; width: 28px; flex-direction: column; align-items: center; gap: 11px; padding: 10px 0; border-radius: 999px; background: rgba(19,33,56,.94); transform: translateY(-50%); }
.attempt-marker { width: 12px; height: 12px; border: 2px solid rgba(245,200,76,.78); border-radius: 50%; background: rgba(245,200,76,.12); box-shadow: 0 0 0 2px rgba(8,14,27,.35); }
.attempt-marker.used { border-color: #f5c84c; background: #f5c84c; box-shadow: 0 0 12px rgba(245,200,76,.62), 0 0 0 2px rgba(8,14,27,.35); }
.part.hidden { opacity: 0; }
.game-over-shade { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(180deg, rgba(8,14,27,.08), rgba(8,14,27,.82)); opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.game-over-shade span { padding: 10px 14px; border: 1px solid rgba(225,187,136,.6); border-radius: 999px; color: #f1d2a8; background: rgba(13,25,42,.78); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.photo-stage.game-over .game-over-shade { opacity: 1; }
.photo-stage.game-over .real-character { visibility: visible; transform: rotate(3deg) scale(.98); opacity: .5; filter: saturate(.55) brightness(.62); }
.hidden { display: none !important; }
.game { display: flex; flex-direction: column; justify-content: center; padding: 46px clamp(28px, 4vw, 58px); }
h1 { max-width: 460px; margin: 8px 0 12px; font-size: clamp(2.25rem, 5vw, 4.15rem); line-height: .98; letter-spacing: -.065em; }
h1 span { color: #f5c84c; }
.intro { max-width: 420px; margin: 0 0 34px; color: #a9b6c8; font-size: 1.05rem; line-height: 1.55; }
.word { display: flex; flex-wrap: wrap; gap: 9px; min-height: 58px; margin-bottom: 27px; }
.letter { width: 27px; height: 40px; display: grid; place-items: center; border-bottom: 2px solid #61718a; color: #f8fafc; font-size: 1.28rem; font-weight: 800; text-transform: uppercase; }
.letter.revealed { color: #f5c84c; border-color: #f5c84c; }
.letter.space { border: 0; width: 18px; }
.level-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 14px; color: #f5c84c; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.level-row span:last-child { color: #8495ad; font-size: .68rem; letter-spacing: .04em; text-transform: none; }
.category-control { display: flex; align-items: center; gap: 8px; width: fit-content; margin: -4px 0 16px; color: #8495ad; font-size: .72rem; font-weight: 800; }
.category-control select { padding: 6px 28px 6px 9px; border: 1px solid #3a4960; border-radius: 8px; color: #f5c84c; background: #1c2a40; font: inherit; cursor: pointer; }
.status { min-height: 26px; margin: 0 0 19px; color: #94a3b8; font-weight: 700; }
.status.win { color: #79e2b3; } .status.lose { color: #ff8b96; }
.keyboard { display: grid; grid-template-columns: repeat(7, minmax(32px, 1fr)); gap: 8px; max-width: 480px; }
.key { min-height: 42px; border: 1px solid #3a4960; border-radius: 10px; color: #dce6f2; background: #1c2a40; font-weight: 800; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.key:hover:not(:disabled), .key:focus-visible:not(:disabled) { transform: translateY(-2px); border-color: #f5c84c; background: #263750; outline: none; }
.key:disabled { cursor: not-allowed; opacity: .36; } .key.correct { color: #101827; border-color: #79e2b3; background: #79e2b3; } .key.wrong { color: #ffc0c5; border-color: #7a3f4a; background: #3a2632; }
.game-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.new-game { align-self: flex-start; margin-top: 24px; padding: 12px 18px; border: 0; border-radius: 12px; color: #101827; background: #f5c84c; font-weight: 850; cursor: pointer; box-shadow: 0 10px 25px rgba(245,200,76,.16); transition: transform .16s ease, filter .16s ease; }
.game-actions > #new-game { min-height: 46px; margin-top: 0; padding: 10px 14px; white-space: nowrap; }
.game-actions > #new-game { order: 2; }
.new-game:hover, .new-game:focus-visible { transform: translateY(-2px); filter: brightness(1.06); outline: none; }
.hint-button { align-self: flex-start; min-height: 44px; margin-top: 0; padding: 10px 14px; border: 1px solid rgba(245,200,76,.42); border-radius: 10px; color: #f5c84c; background: rgba(245,200,76,.08); font-size: .82rem; font-weight: 800; cursor: pointer; }
.hint-button:hover:not(:disabled), .hint-button:focus-visible:not(:disabled) { color: #ffe08a; outline: none; text-decoration: underline; }
.hint-button:disabled { color: #71829a; cursor: default; }
.hint-copy { margin: 8px 0 0; color: #cbd5e1; font-size: .8rem; line-height: 1.45; }
.hint-copy a { color: #f5c84c; font-weight: 800; }
.live-stats { display: flex; gap: 16px; margin-top: 18px; color: #8fa0b7; font-size: .76rem; font-weight: 800; }
.live-stats span b { color: #f5c84c; margin-right: 4px; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 24px 2px 0; color: #708096; font-size: .83rem; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(5,10,20,.72); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display: none; }
.profile-modal { position: relative; width: min(430px, 100%); padding: 32px; border: 1px solid #3a4960; border-radius: 24px; background: #162235; box-shadow: 0 26px 80px rgba(0,0,0,.42); }
.profile-modal h2 { margin: 8px 0 10px; font-size: 2rem; letter-spacing: -.04em; }
.profile-copy { margin: 0 0 22px; color: #a9b6c8; line-height: 1.5; }
.modal-close { position: absolute; top: 14px; right: 17px; border: 0; color: #a9b6c8; background: transparent; font-size: 1.7rem; cursor: pointer; }
.profile-modal label { display: block; margin: 13px 0 7px; color: #cbd5e1; font-size: .8rem; font-weight: 800; }
.profile-modal label:first-of-type { margin-top: 0; }
.profile-modal input { width: 100%; padding: 13px 14px; border: 1px solid #3a4960; border-radius: 11px; color: #f8fafc; background: #101827; outline: none; font-size: 16px; }
.profile-modal input:focus { border-color: #f5c84c; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle { position: absolute; top: 50%; right: 9px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #a9b6c8; background: transparent; font-size: 1.05rem; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible { color: #f5c84c; background: rgba(245,200,76,.1); outline: none; }
.profile-modal .new-game { margin-top: 16px; }
.profile-error { min-height: 18px; margin: 10px 0 0; color: #ff9ca6; font-size: .82rem; font-weight: 700; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.profile-stat { padding: 12px 8px; border: 1px solid #29364a; border-radius: 12px; text-align: center; background: rgba(16,24,39,.55); }
.profile-stat b { display: block; color: #f5c84c; font-size: 1.35rem; }
.profile-stat span { color: #8fa0b7; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.profile-create, .profile-logout { margin-top: 16px; padding: 0; border: 0; color: #f5c84c; background: transparent; font-weight: 800; cursor: pointer; }
.profile-logout { color: #ff9ca6; }
.player-switch { margin-top: 20px; padding-top: 18px; border-top: 1px solid #29364a; }
.player-switch label, .player-form label { margin-top: 0; }
.player-switch select { width: 100%; padding: 12px 13px; border: 1px solid #3a4960; border-radius: 11px; color: #f8fafc; background: #101827; font-size: 16px; }
.player-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid #29364a; }
@media (max-width: 680px) {
  .app { min-height: calc(100svh - 84px); height: auto; overflow: visible; padding: 16px 16px 84px; }
  .topbar { margin-bottom: 9px; align-items: center; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; flex: 0 0 auto; }
  .topbar .eyebrow { font-size: .64rem; letter-spacing: .1em; }
  .topbar strong { font-size: .96rem; }
  .top-actions { gap: 5px; flex: 0 0 auto; }
  .language-control, .profile-button, .score { min-height: 34px; padding-inline: 9px; font-size: .72rem; }
  .language-control span { display: none; }
  .score { padding-inline: 8px; }
  .game-card { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; }
  .visual { min-height: 298px; padding: 15px 14px 12px; border-right: 0; border-bottom: 1px solid #29364a; }
  .visual-heading { inset: 12px 14px auto; font-size: .56rem; }
  .hangman-scene { width: min(100%, 250px); margin-top: 14px; }
  .photo-stage { height: 250px; border-radius: 14px; }
  .attempts { top: 50%; left: 0; width: 25px; gap: 7px; padding: 6px 0; }
  .attempt-marker { width: 9px; height: 9px; border-width: 2px; }
  .game { padding: 15px 14px 12px; }
  .level-row { margin: -3px 0 8px; font-size: .66rem; }
  .level-row span:last-child { font-size: .61rem; }
  .category-control { margin: -2px 0 8px; font-size: .64rem; }
  h1 { margin: 4px 0 7px; font-size: clamp(1.75rem, 9.5vw, 2.55rem); }
  .intro { margin-bottom: 10px; font-size: .8rem; line-height: 1.28; }
  .word { gap: 5px; min-height: 32px; margin-bottom: 8px; }
  .letter { width: 20px; height: 25px; font-size: .92rem; }
  .letter.space { width: 10px; }
  .status { min-height: 18px; margin-bottom: 8px; font-size: .78rem; }
  .keyboard { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: none; }
  .key { min-height: 32px; border-radius: 7px; font-size: .78rem; }
  .game-actions { margin-top: 8px; }
  .new-game { width: 100%; margin-top: 10px; padding-block: 9px; border-radius: 9px; }
  .game-actions > #new-game { min-height: 46px; margin-top: 0; padding: 10px 12px; font-size: .76rem; }
  .hint-button { min-height: 46px; margin-top: 0; padding: 10px 14px; font-size: .78rem; }
  .hint-copy { margin-top: 5px; font-size: .7rem; }
  .live-stats { justify-content: center; gap: 10px; margin-top: 8px; font-size: .62rem; }
  footer { display: none; }
  .profile-modal { padding: 26px 20px; border-radius: 20px; }
}
@media (max-width: 390px) {
  .app { min-height: calc(100svh - 76px); padding: 14px 14px 76px; }
  .topbar { align-items: flex-start; }
  .top-actions { max-width: 178px; justify-content: flex-end; }
  .score { order: 3; }
  .visual { min-height: 268px; padding-block: 13px 8px; }
  .hangman-scene { width: min(100%, 220px); }
  .photo-stage { height: 220px; }
  .game { padding: 12px 12px 10px; }
  h1 { font-size: clamp(1.62rem, 9vw, 2.2rem); }
  .intro { font-size: .76rem; }
  .keyboard { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .key { min-height: 29px; }
  .letter { width: 18px; }
}