:root {
  font-family: "Nunito", "Avenir Next", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #28223c;
  background: #f9f7ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --purple: #7355c6;
  --shadow: 0 24px 70px rgba(49,31,88,.22);
}

* { box-sizing: border-box; }
html, body, #app { min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(circle at 15% 14%,rgba(255,255,255,.75) 0 5%,transparent 5.5%), radial-gradient(circle at 86% 8%,rgba(255,231,118,.72) 0 7%,transparent 7.5%), linear-gradient(160deg,#bcecff,#d5f4df 48%,#fff3bd);
}
body[data-view="play"] { overflow: hidden; background: #f9f7ff; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid #1268df; outline-offset: 3px; }
h1, h2, p { margin-top: 0; }

.setup-stage { min-height: 100svh; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); display: grid; place-items: center; }
.setup-shell { width: min(100%,430px); border: 1px solid rgba(255,255,255,.82); border-radius: 32px; background: radial-gradient(circle at 94% 18%,rgba(189,225,80,.18),transparent 28%),linear-gradient(180deg,#fffefe,#fbf9ff); box-shadow: var(--shadow); padding: 16px 18px 20px; }
.setup-shell.minimal { padding-bottom: 24px; }
.topbar,.play-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-logo { width: 112px; height: 44px; object-fit: contain; object-position: left center; }
.language-switch { display: flex; flex: 0 0 auto; padding: 4px; border-radius: 999px; background: #efeafd; }
.language-button { min-width: 44px; min-height: 40px; border: 0; border-radius: 999px; color: #6d6288; background: transparent; font-weight: 900; cursor: pointer; }
.language-button.active { color: #fff; background: var(--purple); box-shadow: 0 4px 10px rgba(81,57,144,.24); }
.intro { margin-top: 6px; }
.eyebrow,.board-kicker { margin: 0 0 3px; color: #7659bd; font-size: .76rem; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.intro h1 { max-width: 350px; margin-bottom: 5px; font-size: clamp(1.85rem,8vw,2.42rem); line-height: .98; letter-spacing: -.04em; }
.promise { margin-bottom: 9px; color: #6c647d; font-size: 1rem; line-height: 1.3; }
.campaign-highlights { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.campaign-highlights span { padding: 5px 8px; border: 1px solid #ddd4f1; border-radius: 999px; color: #604b9b; background: #f5f1ff; font-size: .68rem; font-weight: 950; line-height: 1; }
.player-picker { margin-bottom: 10px; }
.player-picker h2 { margin-bottom: 6px; font-size: .86rem; }
.player-options { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 5px; }
.player-chip { flex: 0 0 auto; min-height: 36px; padding: 0 11px; border: 2px solid #ddd4f1; border-radius: 999px; color: #51436f; background: #fff; font-size: .76rem; font-weight: 900; cursor: pointer; }
.player-chip.selected { border-color: var(--purple); color: #fff; background: var(--purple); }
.player-chip.add { border-style: dashed; color: #604ca0; background: #f7f3ff; }
.character-picker h2 { margin-bottom: 9px; font-size: 1rem; line-height: 1.2; }
.character-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.character-card { position: relative; min-width: 0; min-height: 145px; padding: 6px 8px 10px; border: 3px solid transparent; border-radius: 22px; background: #f4f2f9; color: #28223c; cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.character-card:hover { transform: translateY(-2px); }
.character-card.selected { border-color: var(--purple); box-shadow: 0 8px 22px rgba(81,57,144,.15); }
.character-kumka { background: linear-gradient(155deg,#f5fbd8,#eef5c9); }
.character-dumka { background: linear-gradient(155deg,#fff3cf,#f8dfc0); }
.portrait { display: grid; place-items: center; height: 88px; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(61,45,48,.17)); }
.character-dumka .portrait img { transform: scale(1.1); }
.character-copy { display: flex; flex-direction: column; text-align: left; }
.character-copy strong { font-size: 1.03rem; }
.character-copy small { color: #6e6576; font-size: .76rem; line-height: 1.2; }
.check { position: absolute; top: 8px; right: 8px; display: none; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); font-weight: 1000; }
.selected .check { display: grid; }
.path-actions { display: grid; gap: 7px; margin-top: 13px; }
.primary-action,.secondary-action { min-height: 50px; border-radius: 16px; font-weight: 950; cursor: pointer; }
.primary-action { border: 0; color: #fff; background: linear-gradient(180deg,#8064cf,#6546b3); box-shadow: 0 7px 0 #4f358f,0 12px 24px rgba(81,57,144,.22); }
.primary-action:active { transform: translateY(3px); box-shadow: 0 4px 0 #4f358f; }
.secondary-action { min-height: 44px; border: 0; color: #604ca0; background: transparent; }

.play-stage { width: 100%; min-height: 100svh; height: 100svh; display: grid; grid-template-rows: auto minmax(0,1fr); padding: max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background: radial-gradient(circle at 88% 8%,rgba(185,221,67,.18),transparent 24%),linear-gradient(180deg,#fff,#f8f5ff); overflow: hidden; }
.play-topbar { min-height: 48px; width: min(100%,620px); margin: 0 auto; }
.back-button { width: 46px; height: 46px; border: 0; border-radius: 15px; color: #5c459f; background: #eee8fc; font-size: 1.5rem; font-weight: 900; cursor: pointer; }
.level-title { flex: 1 1 auto; min-width: 0; }
.level-title .board-kicker { font-size: .68rem; }
.level-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.level-title h1 { margin: 0; font-size: clamp(.76rem,2.75vw,.98rem); line-height: 1.2; font-weight: 850; }
.solution-badge { flex: 0 0 auto; padding: 4px 7px; border: 1px solid #ddd4f1; border-radius: 999px; color: #65598b; background: #f4f0fc; font-size: .62rem; font-weight: 950; line-height: 1; }
.solution-badge.multiple { border-color: #9ac447; color: #355415; background: #eaf8ce; }
.play-content { width: min(100%,620px); min-height: 0; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.play-prompt { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 64px; padding: 6px 2px; }
.reaction-portrait { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border: 3px solid #d9d0ef; border-radius: 18px; background: #fff9dc; box-shadow: 0 5px 13px rgba(48,35,68,.14); transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.reaction-portrait img { width: 100%; height: 100%; object-fit: cover; }
.reaction-portrait.joy { border-color: #8abd36; transform: rotate(-2deg) scale(1.04); box-shadow: 0 6px 17px rgba(88,132,24,.26); }
.reaction-portrait.wrong { border-color: #de6f72; transform: rotate(2deg); box-shadow: 0 6px 17px rgba(169,50,55,.23); }
.instruction { margin: 0; color: #554d63; font-size: clamp(.88rem,3.5vw,1rem); line-height: 1.3; font-weight: 720; }
.board-wrap { min-height: 0; display: grid; place-items: center; }
.board { width: min(100%,calc(100svh - 232px),560px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--size),minmax(0,1fr)); grid-template-rows: repeat(var(--size),minmax(0,1fr)); gap: clamp(2px,.8vw,4px); padding: 5px; border: 4px solid #403954; border-radius: 22px; background: #403954; overflow: hidden; }
.cell { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: clamp(6px,2.4vw,11px); display: grid; place-items: center; cursor: pointer; background: var(--region-color,#dce9ff); transition: filter .16s ease,transform .16s ease,box-shadow .16s ease; }
.cell.fixed { cursor: default; }
.cell.wrong { background: #fff0c8; animation: shake .28s ease-in-out 1; }
.cell.too-close { z-index: 1; box-shadow: 0 0 0 4px #d84e5a,0 0 0 8px rgba(216,78,90,.25); animation: neighbourPulse 1s ease both; }
.cell.rejecting { z-index: 2; background: #ffe5e7; box-shadow: 0 0 0 4px #d84e5a,0 0 0 8px rgba(216,78,90,.24); animation: stepBack 1s ease both; }
.region-0 { background: #dce9ff; }
.region-1 { background: #e8dcff; }
.region-2 { background: #dff4cf; }
.region-3 { background: #ffe5b4; }
.region-4 { background: #ffdce8; }
.region-5 { background: #d8f2ef; }
.region-6 { background: #f3dcff; }
.region-7 { background: #e8f2b9; }
.region-8 { background: #ffd9c2; }
.region-9 { background: #cceaf4; }
.target-ring { width: 42%; aspect-ratio: 1; border: 4px dashed rgba(81,57,144,.62); border-radius: 50%; animation: breathe 1.5s ease-in-out infinite; }
.token { width: 84%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.92); border-radius: 33%; background: rgba(255,255,255,.88); box-shadow: 0 4px 9px rgba(46,35,62,.17); overflow: hidden; }
.rejecting .token { border-color: #d84e5a; }
.token img { width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 2px 2px rgba(49,39,49,.13)); }
.occupied.target .token { animation: pop .3s ease-out both; }
.play-footer { min-height: 72px; display: grid; align-items: center; }
.help-card { display: grid; gap: 9px; padding: 11px 13px; border: 2px solid #dbcdf9; border-radius: 17px; color: #4e4264; background: #faf6ff; font-size: .84rem; text-align: center; }
.help-card div { display: flex; justify-content: center; gap: 8px; }
.help-card button,.map-actions button { min-height: 36px; padding: 0 11px; border: 0; border-radius: 999px; color: #fff; background: #6c4db8; font-weight: 900; cursor: pointer; }
.help-card button[data-keep-trying],.map-actions button { color: #604ca0; background: #eee8fb; }
.map-stage { min-height: 100svh; display: grid; place-items: center; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
.map-shell { width: min(100%,520px); padding: 16px 18px 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 32px; background: radial-gradient(circle at 90% 18%,rgba(189,225,80,.2),transparent 30%),linear-gradient(180deg,#fff,#fbf8ff); box-shadow: var(--shadow); }
.map-hero { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 12px; margin: 14px 0 10px; }
.map-hero > img { width: 82px; height: 82px; border: 3px solid #d9d0ef; border-radius: 24px; object-fit: cover; background: #fff9dc; }
.map-hero h1 { margin: 1px 0 4px; font-size: clamp(1.65rem,7vw,2.3rem); line-height: .98; letter-spacing: -.04em; }
.map-hero p:last-child { margin: 0; color: #6c647d; font-size: .91rem; line-height: 1.3; }
.journey-map { display: flex; align-items: center; justify-content: center; margin: 22px 0 16px; }
.room { display: grid; width: 43px; height: 43px; place-items: center; border: 2px solid #d8ccef; border-radius: 15px; color: #8b7ca1; background: #f2edf9; font-size: 1.05rem; }
.room.open { border-color: #89bb34; color: #fff; background: linear-gradient(145deg,#a4d14d,#6d9f27); box-shadow: 0 5px 13px rgba(88,132,24,.22); }
.path-line { width: min(12vw,54px); height: 4px; background: linear-gradient(90deg,#9acb43,#ded4ef); }
.session-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.session-dots span { width: 10px; height: 10px; border-radius: 50%; background: #ddd4ef; }
.session-dots span.on { background: #785bc4; box-shadow: 0 2px 5px rgba(84,57,150,.25); }
.map-shell .primary-action { width: 100%; }
.map-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 13px; color: #655b78; font-size: .8rem; font-weight: 900; }
.profile-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.rule-note { display: flex; align-items: center; gap: 9px; margin: 8px 2px 0; color: #655d70; font-size: .84rem; line-height: 1.3; }
.rule-note span { display: grid; flex: 0 0 31px; height: 31px; place-items: center; border-radius: 9px; color: #fff; background: #6e55b7; font-weight: 1000; }
.success-panel { position: relative; display: grid; gap: 6px; overflow: hidden; padding: 11px 14px 13px; border-radius: 17px; color: #355415; background: #eaf8ce; font-size: .88rem; text-align: center; }
.countdown { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; background: #79a82e; transform-origin: left center; animation: countdown 3s linear both; }
.again-button { min-height: 44px; padding: 0 15px; border: 0; border-radius: 13px; color: #fff; background: #6546b3; font-weight: 900; cursor: pointer; }
.again-button.wide { width: 100%; }

body.host-paused #app { filter: saturate(.65) brightness(.72); pointer-events: none; }
body.host-paused::after { content: "PAUZA"; position: fixed; z-index: 20; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 18px 28px; border-radius: 20px; color: #fff; background: rgba(52,39,82,.9); box-shadow: var(--shadow); font-size: 1.35rem; font-weight: 1000; letter-spacing: .08em; }

@keyframes breathe { 50% { transform: scale(1.12); opacity: .62; } }
@keyframes pop { from { transform: scale(.72); opacity: .25; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes neighbourPulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.08); } }
@keyframes stepBack { 0% { transform: scale(.5); opacity: 0; } 32% { transform: scale(1.08); opacity: 1; } 72% { transform: translateY(-9px) scale(.88); opacity: .82; } 100% { transform: translateY(-16px) scale(.6); opacity: 0; } }
@keyframes countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-height: 680px) {
  .setup-shell { padding-top: 10px; padding-bottom: 12px; }
  .brand-logo { height: 38px; }
  .intro h1 { font-size: 1.75rem; }
  .promise { margin-bottom: 9px; }
  .character-card { min-height: 126px; }
  .portrait { height: 72px; }
  .path-actions { margin-top: 9px; gap: 4px; }
  .primary-action { min-height: 46px; }
  .secondary-action { min-height: 38px; }
  .play-prompt { min-height: 58px; }
  .play-footer { min-height: 58px; }
  .board { width: min(100%,calc(100svh - 196px),560px); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}