:root{color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";--bg0: #eff6ff;--bg1: #ecfdf5;--card: rgba(255, 255, 255, .92);--card2: rgba(255, 255, 255, .8);--border: rgba(17, 24, 39, .1);--text: #111827;--muted: rgba(17, 24, 39, .68);--accent: #3b82f6;--warn: #f59e0b;--danger: #ef4444}html,body{height:100%;margin:0;background:linear-gradient(135deg,var(--bg0),var(--bg1));color:var(--text)}#app{min-height:100%}.app-shell{min-height:100%;display:flex;flex-direction:column}.container{width:min(1100px,100%);margin:0 auto;padding:18px 18px 28px;box-sizing:border-box}.container[data-route=smoke-free-quest],.container[data-route=invapetion],.container[data-route=fresh-air-sprint-3d]{width:min(1400px,100%)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:6px}.brand{display:flex;align-items:center;gap:12px}.brand-title{font-size:18px;font-weight:700;letter-spacing:.2px}.brand-subtitle{font-size:12px;color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:#ffffffd9;border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.points-number{font-weight:800;letter-spacing:.3px}.nav{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}.nav a{text-decoration:none;color:var(--text);padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#ffffffb3}.nav a[aria-current=page]{border-color:#3b82f673;box-shadow:0 0 0 3px #3b82f629}.main{margin-top:18px;display:grid;gap:14px}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 12px 40px #0f172a1f,0 2px 10px #0f172a0f}.card-game{padding:10px}.card h2{margin:0 0 6px;font-size:18px}.card p{margin:0;color:var(--muted);line-height:1.45}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}.quiz-progress{display:grid;gap:8px;margin-bottom:12px}.quiz-progress-row{font-size:12px;color:#11182799}.quiz-progress-track{height:8px;border-radius:999px;border:1px solid var(--border);background:#0f172a0f;overflow:hidden}.quiz-progress-fill{height:100%;width:0%;background:#3b82f6bf}.quiz-options{display:grid;gap:10px;margin-top:12px}.quiz-option{width:100%;text-align:left;border:1px solid var(--border);background:#ffffffc7;color:var(--text);padding:12px;border-radius:14px;cursor:pointer;font-weight:600}.quiz-option:hover{border-color:#3b82f659}.quiz-option.is-selected{border-color:#3b82f68c;box-shadow:0 0 0 3px #3b82f624}.quiz-option.is-correct{border-color:#22c55e8c;background:#22c55e1a}.quiz-option.is-wrong{border-color:#ef444499;background:#ef44441a}.quiz-callout{margin-top:12px;border-radius:14px;border:1px solid var(--border);background:#ffffffdb;padding:12px}.quiz-callout-title{font-size:12px;font-weight:800;letter-spacing:.2px;color:#111827e6;margin-bottom:6px}.quiz-callout-body{font-size:13px;color:#111827b8;line-height:1.5}.quiz-callout-warn{border-color:#f59e0b47;background:#f59e0b14}.quiz-callout-ok{border-color:#22c55e47;background:#22c55e14}.quiz-result{margin-top:12px;border-radius:14px;border:1px solid var(--border);padding:12px}.quiz-result-title{font-weight:800}.quiz-result-ok{border-color:#22c55e52;background:#22c55e14}.quiz-result-bad{border-color:#ef444452;background:#ef444414}.tf-statement{border-radius:16px;border:1px solid var(--border);background:radial-gradient(900px 420px at 20% 10%,#a855f724,#fffc);padding:18px 14px;margin-top:12px}.tf-statement-text{font-weight:800;font-size:18px;line-height:1.3;text-align:center}.tf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.tf-btn{border-radius:16px;padding:16px 12px;font-weight:900;letter-spacing:.6px;border:1px solid var(--border)}.tf-true{background:#22c55e24;border-color:#22c55e47}.tf-false{background:#ef44441f;border-color:#ef444447}.match-grid{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.match-col{display:grid;gap:10px}.match-title{font-size:12px;color:#11182799;font-weight:800}.match-item{width:100%;text-align:left;border:1px solid var(--border);background:#ffffffc7;color:var(--text);padding:12px;border-radius:14px;cursor:pointer;font-weight:650}.match-item:hover{border-color:#3b82f659}.match-item.is-selected{border-color:#3b82f68c;box-shadow:0 0 0 3px #3b82f624}.match-item.is-matched{border-color:#22c55e52;background:#22c55e14;opacity:.65;cursor:not-allowed}.story-grid .story-card{display:grid;gap:10px}.story-media{height:168px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#0f172a0f}.story-media-large{height:260px}.story-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}.story-media-fallback{height:100%;display:grid;place-items:center;color:#11182799;font-size:12px;letter-spacing:.2px}.story-snippet{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.story-warning{border-color:#f59e0b3d;background:#f59e0b12}.story-detail{display:grid;gap:12px}.story-box{border-radius:14px;border:1px solid var(--border);background:#ffffffdb;padding:12px}.story-box-warn{border-color:#ef44443d;background:#ef444412}.story-text{color:#111827db;line-height:1.55}.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.btn{border:1px solid var(--border);background:#ffffffc7;color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600}.btn:hover{border-color:#3b82f659}.btn-primary{background:#3b82f61f;border-color:#3b82f652}.btn-danger{background:#ef44441a;border-color:#ef444447}.field{display:grid;gap:6px;margin-top:12px}.field label{font-size:12px;color:var(--muted)}.field input,.field select{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#ffffffe6;color:var(--text);outline:none}.field input:focus,.field select:focus{border-color:#3b82f68c;box-shadow:0 0 0 3px #3b82f629}.hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}.footer{margin-top:auto;padding:18px 0 6px;color:#11182799;font-size:12px}.avatar-chip{width:32px;height:32px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#ffffffa6}.game-shell{width:100%;max-width:1280px;height:min(72vh,720px);height:min(72dvh,720px);min-height:320px;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 14px 50px #0f172a1f,0 4px 16px #0f172a14;touch-action:none;overscroll-behavior:contain;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.game-shell canvas{width:100%;height:100%;display:block;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media (max-width: 720px){.container{padding:14px 14px 18px}.topbar{flex-direction:column;align-items:stretch;gap:10px}.badge{width:100%;justify-content:space-between}.nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.nav a{white-space:nowrap}.btn{padding:12px 14px}.card{border-radius:16px;padding:14px}.card-game{padding:8px}.game-shell{border-radius:14px;height:min(70vh,720px);height:min(70dvh,720px);min-height:360px}.container[data-route=smoke-free-quest] .nav,.container[data-route=invapetion] .nav,.container[data-route=fresh-air-sprint-3d] .nav,.container[data-route=smoke-free-quest] .footer,.container[data-route=invapetion] .footer,.container[data-route=fresh-air-sprint-3d] .footer{display:none}.container[data-route=smoke-free-quest] .main,.container[data-route=invapetion] .main,.container[data-route=fresh-air-sprint-3d] .main{margin-top:12px}.match-grid{grid-template-columns:1fr}}@media (max-width: 720px) and (orientation: portrait){.game-shell{height:auto;aspect-ratio:1 / 1;min-height:min(320px,100vw);max-width:100%}}