:root { color-scheme: dark; --bg:#0b0910; --panel:#1a1421; --fg:#f7f3ff; --muted:#afa4be; --purple:#7a2cff; --pink:#ff2abf; --cyan:#9ffcff; --accent:#b18aff; --border:#ba8fdc33; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-tap-highlight-color:transparent; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body { color:var(--fg); background:radial-gradient(ellipse at 20% 0%,#44254d33,transparent 52%),radial-gradient(ellipse at 90% 96%,#341f422b,transparent 40%),var(--bg); }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; }
button,a { -webkit-touch-callout:none; }
button:disabled { opacity:.42; cursor:default; }
button,a,input { outline-offset:4px; }
:focus-visible { outline:2px solid var(--cyan); }
a { color:inherit; text-decoration:none; }
button { -webkit-user-select:none; user-select:none; }
svg { display:block; width:20px; height:20px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.game-shell { width:min(1180px,100%); height:100vh; height:100svh; height:100dvh; margin:auto; padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:8px; position:relative; }
.game-header { display:grid; grid-template-columns:85px minmax(0,1fr) 85px; min-height:54px; align-items:center; padding-bottom:8px; border-bottom:1px solid var(--border); }
.back-link { display:inline-flex; align-items:center; gap:4px; width:fit-content; min-height:44px; border-radius:10px; font-size:11px; font-weight:700; color:#c3b2d1; padding-right:6px; }
.back-link svg { width:18px; height:18px; }
.game-brand { text-align:center; }
.brand-kicker { display:block; font-size:7px; font-weight:850; letter-spacing:.18em; color:#a98ab8; margin-bottom:5px; }
.game-brand h1 { margin:0; font-size:24px; line-height:1; font-weight:900; letter-spacing:-.04em; }
.game-brand h1 span { color:#d8a7e4; }
.icon-button { display:inline-grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--border); border-radius:11px; background:#21172bc9; color:#d0b7df; padding:0; touch-action:manipulation; }
#settings-button { justify-self:end; }
.profile-strip { display:flex; align-items:center; gap:16px; min-height:25px; padding:0 2px; min-width:0; }
.profile-wallet { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.currency-icon { color:#e4c491; font-size:19px; line-height:1; }
.profile-wallet strong { color:#f2d49e; font-size:14px; font-variant-numeric:tabular-nums; }
.profile-label { color:#927ca4; font-size:7px; letter-spacing:.10em; font-weight:800; }
.profile-stars { display:inline-flex; gap:5px; align-items:center; color:#dbbfe9; font-size:10px; white-space:nowrap; }
.profile-stars>span { color:#ba94d7; font-size:12px; }
.profile-stars strong { font-weight:700; }
.profile-kit { margin-left:auto; font-size:9px; color:#ac95bb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.game-stage { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; min-width:0; min-height:0; border:1px solid #9873ae33; border-radius:20px; background:radial-gradient(ellipse at 50% 38%,#3b304142,#15111bc2 68%); overflow:hidden; padding:11px; }
.hud { display:grid; grid-template-columns:minmax(85px,1.5fr) minmax(35px,.75fr) minmax(42px,.8fr) minmax(45px,.8fr) auto; gap:12px; align-items:center; padding:0 1px 9px; min-width:0; border-bottom:1px solid #a078bb27; }
.mode-block,.hud-stat { min-width:0; }
.hud-label { display:block; color:#a08cae; font-size:7px; letter-spacing:.09em; font-weight:850; margin-bottom:4px; line-height:1.2; }
.mode-block>strong { display:block; color:#d3bfdc; font-size:11px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.puzzle-progress { display:block; font-size:8px; color:#a288b2; margin-top:3px; }
.hud-stat>strong { font-size:19px; line-height:1; font-weight:850; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:#eedbfc; white-space:nowrap; }
#score { color:#f0c9ed; }
#mistakes { color:#e4c99e; }
.hud-actions { display:flex; gap:6px; }
.hud-actions .icon-button { background:#261a2e; }
.mechanism-workspace { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; min-height:0; gap:8px; }
.mechanism-display { min-width:0; min-height:0; display:grid; place-items:center; container-type:size; overflow:hidden; position:relative; }
.mechanism-frame { position:relative; width:min(100cqw,100cqh,560px); height:min(100cqw,100cqh,560px); aspect-ratio:1; max-width:100%; max-height:100%; border-radius:18px; touch-action:none; -webkit-user-select:none; user-select:none; }
#game-canvas { display:block; width:100%; height:100%; touch-action:none; outline-offset:-5px; border-radius:inherit; }
.puzzle-console { display:flex; flex-direction:column; justify-content:center; gap:9px; min-width:0; min-height:0; }
.puzzle-guidance { text-align:center; min-width:0; }
#puzzle-instruction { margin:0; color:#e1d0eb; font-size:12px; line-height:1.4; font-weight:750; }
#feedback-text { margin:4px 0 0; color:#b59dc6; font-size:10px; line-height:1.4; min-height:14px; }
#feedback-text.is-aligned { color:#bbece5; font-weight:750; }
.assist-badge { display:inline-block; color:#c4e4e8; background:#23404677; border:1px solid #699fa13d; border-radius:5px; font-size:8px; padding:3px 6px; margin-top:5px; }
.mechanism-controls { display:grid; gap:8px; min-width:0; }
.mechanism-controls:empty { display:none; }
.fine-controls { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:8px; touch-action:none; }
.fine-button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1px; min-width:44px; min-height:48px; padding:3px; border:1px solid #a376c23d; border-radius:11px; background:linear-gradient(145deg,#302336,#1d1526); color:#d6bae9; font-size:9px; font-weight:800; touch-action:none; }
.fine-button svg { width:18px; height:18px; }
.primary-button,.secondary-button,.tertiary-button,.danger-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:11px 16px; border:1px solid #b067df70; border-radius:12px; font-size:12px; font-weight:800; line-height:1.4; touch-action:manipulation; }
.primary-button { color:#fff; background:linear-gradient(115deg,#7a2cff,#ba2ba5); border-color:#b65feb; box-shadow:0 6px 24px #812bc026,inset 0 1px #ffffff18; }
.secondary-button { background:linear-gradient(120deg,#2b1d36,#21162b); color:#ddc8ea; border-color:#b275d43b; }
.tertiary-button { background:#211628; color:#bfaacb; border-color:#9876b32a; }
.danger-button { background:#49233566; color:#f1b9c9; border-color:#c775894d; }
.mechanism-action { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; touch-action:none; }
.mechanism-action:has(.fine-button) { grid-template-columns:48px minmax(0,1fr) 48px; }
.secure-button { min-height:48px; font-size:12px; touch-action:none; }
.fine-button:active,.fine-button.is-pressed,.fine-button.is-held,.secure-button:active,.secure-button.is-pressed,.secure-button.is-held { border-color:#e8b5ff; filter:brightness(1.18); }
.mechanism-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.ring-tab { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:1; min-height:44px; min-width:44px; padding:8px 7px; border:1px solid #956dad4a; background:#281b33; color:#bfa7d0; border-radius:10px; font-size:10px; font-weight:750; touch-action:manipulation; }
.ring-tab.is-selected,.ring-tab[aria-pressed="true"] { color:#f5e4ff; background:#533173; border-color:#ca95eb; box-shadow:inset 0 0 0 1px #dca9f02b; }
.symbol-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:min(270px,100%); margin:0 auto; }
.symbol-button { min-width:44px; min-height:44px; border:1px solid #876c9e66; border-radius:10px; color:#cbb9d9; background:linear-gradient(145deg,#322737,#211a27); font-size:19px; font-weight:800; touch-action:manipulation; position:relative; }
.symbol-button small { font-size:8px; margin-left:7px; font-weight:700; color:#a18aad; }
.symbol-button.is-lit { color:#172a31; background:linear-gradient(120deg,#9ffcff,#b1e2ff); border-color:#c3fcff; box-shadow:0 0 12px #9ffcff25; }
.symbol-button.is-entered { color:#f1d2ff; background:#653479; border-color:#c587e0; }
.symbol-button:active { transform:scale(.97); filter:brightness(1.15); }
.pattern-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:54px; height:54px; margin:7px auto; padding:5px; border:1px solid #b295c54a; border-radius:8px; background:#1a1423; }
.pattern-cell { display:grid; place-items:center; border-radius:2px; background:#584168; color:#9177a7; font-size:9px; line-height:1; }
.pattern-cell.is-on { background:#acf8f3; color:#25434a; }
.mechanism-controls:has(.pattern-preview) { grid-template-columns:54px minmax(0,1fr); align-items:center; gap:8px; }
.mechanism-controls:has(.pattern-preview) .pattern-preview { grid-column:1; grid-row:1; margin:0; }
.mechanism-controls:has(.pattern-preview) .symbol-grid { grid-column:2; grid-row:1; }
.mechanism-controls:has(.pattern-preview) .mechanism-action { grid-column:1/-1; grid-row:2; }
.game-overlay { position:absolute; inset:0; z-index:5; display:flex; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:26px; background:radial-gradient(ellipse at 50% 15%,#372136d9,#120d1cee 62%); touch-action:pan-y; }
.overlay-panel { flex-shrink:0; width:min(540px,100%); margin:auto; text-align:center; }
.overlay-kicker { display:block; color:#dbabc9; font-size:8px; font-weight:850; letter-spacing:.16em; line-height:1.6; margin-bottom:13px; }
.overlay-title { font-size:clamp(35px,6vw,64px); line-height:1; letter-spacing:-.055em; font-weight:900; margin:0; }
.overlay-title span { color:transparent; background:linear-gradient(110deg,#bea0ef,#eca7d6); background-clip:text; -webkit-background-clip:text; }
.overlay-copy { color:#bba8c8; font-size:12px; line-height:1.75; margin:14px 0 19px; }
.overlay-copy strong { color:#edd7f8; }
.menu-primary { width:100%; min-height:59px; display:flex; flex-direction:column; gap:3px; margin:18px 0 10px; }
.menu-primary strong { font-size:14px; }
.menu-primary>span { color:#e3c6ef; font-size:10px; font-weight:650; }
.menu-primary small,.menu-modes small { font-size:9px; font-weight:550; line-height:1.4; color:#e2c9ed; }
.menu-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0; }
.menu-modes button { flex-direction:column; min-height:68px; padding:10px 8px; gap:4px; }
.menu-modes strong { font-size:11px; }
.menu-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:10px 0 0; }
.menu-actions button,.menu-actions a { min-width:0; min-height:44px; font-size:10px; padding:9px 7px; }
.menu-actions .wide-button { grid-column:1/-1; }
.overlay-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0 0; }
.overlay-actions>* { min-width:100px; }
.overlay-stats,.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:17px 0; }
.stat-cell { min-width:0; border:1px solid #a277bb2c; border-radius:11px; background:#301f3d65; padding:13px 11px; }
.stat-cell>span,.stat-cell>small { display:block; color:#a992bc; font-size:8px; font-weight:750; line-height:1.5; letter-spacing:.04em; margin-bottom:6px; }
.stat-cell>strong { display:block; color:#eedbfb; font-size:23px; line-height:1.15; letter-spacing:-.03em; font-weight:850; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.stars-row { display:flex; align-items:center; justify-content:center; gap:8px; font-size:32px; color:#e9c68b; line-height:1.3; margin:14px 0; }
.stars-row .is-empty { color:#604f6a; }
.stars-row span:not(.is-earned) { color:#604f6a; }
.results-rewards { margin:13px 0; padding:11px; border:1px solid #b096573d; border-radius:10px; background:#63532224; color:#e5c799; font-size:11px; line-height:1.7; }
.new-record { display:inline-block; color:#bdeaf0; background:#243b4144; border:1px solid #79b7c044; padding:6px 9px; border-radius:7px; font-size:9px; font-weight:800; }
.score-explanation { color:#bba3ca; font-size:10px; line-height:1.8; text-align:left; margin:12px 0; border:1px solid #a179bb2e; border-radius:10px; padding:0 12px; background:#2d1d3655; }
.score-explanation summary { cursor:pointer; min-height:44px; padding:12px 0; font-size:10px; color:#d4b6e5; font-weight:750; }
.score-explanation p { margin:0 0 12px; }
.game-shell.is-menu .game-stage { grid-template-rows:minmax(0,1fr); }
.game-shell.is-menu .hud,.game-shell.is-menu .puzzle-console { display:none; }
.game-shell.is-menu .mechanism-workspace { grid-template-rows:minmax(0,1fr); opacity:.3; }
.toast { position:fixed; z-index:40; top:max(83px,calc(env(safe-area-inset-top) + 74px)); left:50%; transform:translateX(-50%); width:max-content; max-width:min(420px,calc(100% - 26px)); padding:11px 16px; color:#f4dcff; background:#30203eec; border:1px solid #cc94e55e; border-radius:13px; font-size:11px; font-weight:750; line-height:1.65; text-align:center; box-shadow:0 8px 28px #0008; pointer-events:none; }
.toast:not([hidden]) { animation:toast-enter .22s ease-out; }
@keyframes toast-enter { from { opacity:0; transform:translate(-50%,-6px); } to { opacity:1; transform:translate(-50%,0); } }
.save-note { position:absolute; z-index:30; margin:0; left:15px; right:15px; bottom:max(10px,env(safe-area-inset-bottom)); color:#f3d09e; font-size:10px; line-height:1.6; padding:8px 11px; background:#36281eed; border:1px solid #c1965c4a; border-radius:9px; text-align:center; pointer-events:none; }
.game-dialog { width:min(600px,calc(100vw - 24px)); max-height:min(830px,calc(100svh - 26px)); max-height:min(830px,calc(100dvh - 26px)); margin:auto; padding:0; color:var(--fg); background:linear-gradient(145deg,#281a32,#16111e 65%); border:1px solid #a97dcf65; border-radius:19px; overflow:auto; overscroll-behavior:contain; box-shadow:0 20px 65px #000a; }
.game-dialog::backdrop { background:#030208c9; backdrop-filter:blur(4px); }
.levels-dialog,.equipment-dialog { width:min(720px,calc(100vw - 24px)); }
.dialog-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 21px 15px; border-bottom:1px solid #ad8ac42b; background:#281b32fa; }
.dialog-kicker { display:block; color:#d7a1ca; font-size:8px; letter-spacing:.13em; font-weight:850; line-height:1.5; }
.dialog-header h2 { margin:5px 0 0; font-size:23px; line-height:1.2; letter-spacing:-.035em; }
.dialog-body { padding:20px 21px 23px; }
.dialog-intro { color:#b7a4c4; font-size:12px; line-height:1.75; margin:0 0 16px; }
.chapter-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.chapter-tabs button { flex:1; min-width:90px; min-height:44px; border:1px solid #ab80c245; border-radius:10px; padding:8px; color:#bba1ce; background:#2a1c35; font-size:10px; font-weight:750; }
.chapter-tabs .is-selected { color:#f2dcff; background:#573174; border-color:#c491e2; }
.chapter-card { border:1px solid #9f789936; border-radius:14px; background:linear-gradient(120deg,#35263a66,#21172788); padding:16px; margin:0 0 14px; }
.chapter-card h3 { font-size:19px; letter-spacing:-.025em; margin:0 0 6px; }
.chapter-card p { color:#b69fc4; font-size:11px; line-height:1.65; margin:5px 0; }
.chapter-card>small { color:#d6b49b; font-size:9px; }
.level-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:13px; }
.level-tile { position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:4px; min-height:78px; min-width:0; padding:9px 4px; border:1px solid #9060b845; border-radius:11px; color:#c9aedd; background:#291b37; font-size:10px; touch-action:manipulation; }
.level-number { font-size:23px; line-height:1; color:#dfc3ec; font-weight:850; font-variant-numeric:tabular-nums; }
.level-tile strong { font-size:10px; line-height:1.35; color:#e6d0f4; font-variant-numeric:tabular-nums; }
.level-stars { display:flex; gap:2px; color:#63536a; }
.level-stars i { font-style:normal; font-size:11px; }
.level-stars i.is-earned { color:#e7c485; }
.level-tile small { font-size:8px; color:#a78bba; }
.level-tile .stars-row { gap:1px; font-size:11px; margin:0; }
.level-tile.is-complete { background:#343028; border-color:#b08e5642; }
.level-tile.is-complete strong { color:#f1d39d; }
.level-tile.is-current { background:#593677; border-color:#c491eb; }
.level-tile.is-locked { color:#766680; background:#1d1525; border-color:#76618b27; }
.level-tile.is-locked strong { color:#8a7995; }
.equipment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.equipment-card { min-width:0; display:flex; flex-direction:column; gap:9px; padding:15px; border:1px solid #ab7dc044; border-radius:14px; background:#211729; position:relative; }
.equipment-card.is-selected { background:linear-gradient(120deg,#452b53,#281831); border-color:#d4a2e67d; box-shadow:inset 0 0 0 1px #ce9ae32b; }
.equipment-card h3 { margin:0; color:#efdafa; font-size:14px; letter-spacing:-.02em; }
.equipment-card p,.equipment-card small { margin:0; color:#ad97bf; font-size:10px; line-height:1.65; }
.equipment-card>strong,.equipment-price { color:#ebca94; font-size:10px; font-weight:800; }
.equipment-card .primary-button,.equipment-card .secondary-button { min-height:44px; font-size:10px; padding:10px 7px; margin-top:auto; width:100%; }
.equipment-preview { display:block; width:100%; height:105px; border:1px solid #9e74b830; border-radius:11px; background:radial-gradient(ellipse,#53365344,#191121 80%); }
.equipment-preview svg { width:100%; height:100%; }
.palette-dot { display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid #ffffff55; background:var(--accent,#b086da); vertical-align:middle; margin-right:5px; }
.achievement-card { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; padding:15px 13px; border:1px solid #aa83c135; border-radius:13px; background:#211529; }
.achievement-card.is-unlocked { background:linear-gradient(120deg,#35243d,#25152f); border-color:#c098d168; }
.achievement-icon { display:grid; place-items:center; width:37px; height:37px; flex-shrink:0; font-size:19px; color:#b58acc; border:1px solid #bca2d022; border-radius:11px; background:#56315d40; }
.achievement-card.is-unlocked .achievement-icon { color:#f7d397; background:#77602630; }
.achievement-body { flex:1; min-width:0; }
.achievement-body h3,.achievement-body>strong { display:block; margin:0 0 4px; font-size:12px; }
.achievement-body p { margin:0 0 7px; color:#ae96bf; font-size:10px; line-height:1.65; }
.achievement-body>small { display:block; margin:6px 0 0; color:#c4a7d8; font-size:9px; }
.progress-track { height:5px; background:#59456655; border-radius:5px; overflow:hidden; }
.progress-fill { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9b63d7,#d392ce); width:0; }
.setting-row,.volume-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; min-height:72px; border-bottom:1px solid #a983bd26; position:relative; }
.setting-row { cursor:pointer; }
.setting-row>span:first-child,.volume-row>span { min-width:0; }
.setting-row strong,.volume-row strong { display:block; margin-bottom:5px; color:#e7d5f0; font-size:13px; font-weight:750; }
.setting-row small,.volume-row small { display:block; color:#ac94bd; font-size:11px; line-height:1.65; }
.setting-row input { position:absolute; right:0; width:48px; height:44px; opacity:0; cursor:pointer; }
.switch { display:inline-block; position:relative; width:43px; height:26px; flex-shrink:0; border:1px solid #8c6ca570; border-radius:20px; background:#3b2a48; pointer-events:none; }
.switch::after { content:""; display:block; position:absolute; top:4px; left:4px; width:16px; height:16px; background:#bfa5d0; border-radius:50%; transition:transform .18s,background .18s; }
.setting-row input:checked+.switch { background:#8042ae; border-color:#b882d8; }
.setting-row input:checked+.switch::after { transform:translateX(17px); background:#f5e6ff; }
.setting-row input:focus-visible+.switch { outline:2px solid var(--cyan); outline-offset:4px; }
.volume-row input { width:120px; min-width:100px; height:44px; flex-shrink:0; accent-color:#b878e3; }
.settings-status { color:#bc9fd0; font-size:10px; line-height:1.6; margin:12px 0 0; }
.settings-status:empty { display:none; }
.how-to-panel { padding:18px 16px; margin-top:22px; border:1px solid #a778c43b; border-radius:13px; background:#3a254232; }
.how-to-panel h3 { margin:7px 0 10px; font-size:17px; letter-spacing:-.02em; }
.how-to-panel p { color:#b69ec5; font-size:11px; line-height:1.8; margin:10px 0 0; }
.how-to-panel .keyboard-help { color:#d5b7e8; }
.local-save-info { margin:18px 0; padding-top:16px; border-top:1px solid #9975ad28; font-size:10px; line-height:1.75; color:#a28aae; }
.release-info { display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px; color:#866b98; font-size:8px; letter-spacing:.05em; font-weight:750; margin-top:20px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:16px; }
.notice { color:#f0c798; border:1px solid #c3985950; border-radius:9px; background:#634b242e; padding:11px 13px; font-size:11px; line-height:1.7; }
.tutorial-card { padding:15px 0 0; }
.tutorial-card h3 { font-size:22px; line-height:1.25; letter-spacing:-.025em; margin:6px 0 12px; }
.tutorial-card p { color:#bda4cd; font-size:12px; line-height:1.85; margin:10px 0; }
.tutorial-card ul,.tutorial-card ol { padding-left:21px; color:#bda4cd; font-size:12px; line-height:1.85; }
.tutorial-card .primary-button { width:100%; margin-top:16px; }
.tutorial-steps { display:flex; justify-content:center; gap:7px; margin:0 0 18px; }
.tutorial-steps span,.tutorial-steps i { display:block; width:22px; height:4px; background:#5c426b; border-radius:6px; }
.tutorial-steps .is-current,.tutorial-steps .is-active { background:#cf94e5; }
.noscript-note { position:fixed; inset:0; z-index:100; display:grid; place-content:center; gap:18px; padding:30px; text-align:center; background:#120c1a; color:#e0c9ee; line-height:1.7; }
.noscript-note a { color:var(--cyan); }
@supports not (width:100cqw) { .mechanism-frame { width:min(100%,58vh,560px); height:auto; } }
@media (min-width:900px) and (min-height:600px) { .mechanism-workspace { grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:minmax(0,1fr); gap:28px; padding:0 25px 16px; } .puzzle-console { gap:18px; } .puzzle-guidance { text-align:left; } #puzzle-instruction { font-size:17px; } #feedback-text { font-size:12px; margin-top:8px; } .symbol-grid { gap:9px; width:100%; } .symbol-button { min-height:66px; font-size:25px; } .game-stage { padding:17px; } .hud { gap:23px; padding-bottom:13px; } .hud-stat>strong { font-size:25px; } .mode-block>strong { font-size:14px; } }
@media (max-width:600px) { .game-shell { padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); } .game-header { grid-template-columns:66px minmax(0,1fr) 50px; } .game-brand h1 { font-size:20px; } .profile-strip { gap:11px; } .profile-kit { font-size:8px; } .hud { gap:7px; grid-template-columns:minmax(68px,1.4fr) minmax(28px,.7fr) minmax(33px,.8fr) minmax(33px,.6fr) auto; } .hud-label { font-size:6px; } .mode-block>strong { font-size:9px; } .puzzle-progress { font-size:7px; } .hud-stat>strong { font-size:16px; } .hud-actions { gap:4px; } .hud-actions .icon-button { width:44px; height:44px; } .mistakes-stat .hud-label { letter-spacing:0; } .game-stage { padding:9px; border-radius:16px; } .game-overlay { padding:20px 17px; } .overlay-title { font-size:43px; } .overlay-copy { font-size:11px; } .menu-modes { gap:6px; } .menu-actions { gap:6px; } .menu-modes strong { font-size:10px; } .menu-modes small { font-size:8px; } .menu-actions button,.menu-actions a { font-size:9px; } .equipment-card { padding:11px; gap:8px; } .equipment-card h3 { font-size:12px; } .equipment-preview { height:88px; } .dialog-header { padding:17px 17px 13px; } .dialog-body { padding:17px 17px 20px; } }
@media (max-width:359px) { .game-shell { padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); gap:5px; } .game-header { min-height:49px; padding-bottom:4px; grid-template-columns:54px minmax(0,1fr) 44px; } .back-link { font-size:9px; gap:1px; } .back-link svg { width:16px; height:16px; } .game-brand h1 { font-size:17px; } .brand-kicker { font-size:6px; letter-spacing:.13em; } .profile-strip { gap:9px; min-height:23px; } .profile-label { display:none; } .profile-wallet strong { font-size:12px; } .profile-stars { font-size:9px; } .game-stage { padding:7px; gap:6px; } .hud { gap:5px; grid-template-columns:minmax(55px,1fr) 31px 34px 31px 92px; padding-bottom:6px; } .hud-stat>strong { font-size:14px; } .hud-label { font-size:5px; } .mode-block>strong { font-size:8px; } .puzzle-progress { font-size:6px; } .mechanism-workspace,.puzzle-console { gap:6px; } #puzzle-instruction { font-size:10px; } #feedback-text { font-size:9px; margin-top:3px; } .fine-controls { grid-template-columns:44px minmax(0,1fr) 44px; gap:6px; } .fine-button,.mechanism-action { min-height:44px; } .mechanism-action { font-size:10px; padding:8px 6px; } .overlay-title { font-size:35px; } .overlay-kicker { font-size:7px; margin-bottom:10px; } .overlay-copy { margin:11px 0 13px; } .menu-primary { min-height:53px; margin:13px 0 8px; } .menu-modes button { min-height:60px; padding:8px 5px; } .menu-actions button,.menu-actions a { font-size:8px; padding:8px 4px; } .dialog-header h2 { font-size:19px; } .equipment-grid { gap:8px; } .equipment-card { padding:9px; } .equipment-card h3 { font-size:11px; } .equipment-preview { height:75px; } .level-grid { gap:6px; } .level-tile { min-height:71px; } .volume-row input { width:95px; min-width:95px; } }
@media (max-height:500px) and (min-width:480px) { .game-shell { padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); grid-template-rows:auto auto minmax(0,1fr); gap:4px; } .game-header { min-height:44px; padding-bottom:0; border:0; grid-template-columns:85px minmax(0,1fr) 85px; } .game-brand h1 { font-size:19px; } .brand-kicker { font-size:6px; margin-bottom:3px; } .profile-strip { min-height:20px; } .profile-wallet strong { font-size:11px; } .currency-icon { font-size:15px; } .profile-label { font-size:6px; } .game-stage { padding:7px; gap:4px; border-radius:13px; } .hud { grid-template-columns:minmax(100px,1.5fr) minmax(35px,.8fr) minmax(35px,.8fr) minmax(40px,.7fr) auto; padding:0 0 4px; gap:10px; } .hud-label { font-size:6px; margin-bottom:2px; } .mode-block>strong { font-size:10px; } .puzzle-progress { font-size:7px; margin-top:1px; } .hud-stat>strong { font-size:16px; } .hud-actions .icon-button { width:44px; height:44px; } .mechanism-workspace { grid-template-columns:minmax(0,1fr) minmax(170px,42%); grid-template-rows:minmax(0,1fr); gap:12px; } .puzzle-console { gap:5px; } .puzzle-guidance { text-align:left; } #puzzle-instruction { font-size:10px; } #feedback-text { font-size:9px; margin-top:2px; } .fine-controls { grid-template-columns:44px minmax(0,1fr) 44px; gap:5px; } .fine-button,.mechanism-action { min-height:44px; } .mechanism-action { font-size:10px; padding:7px; } .ring-tab { font-size:9px; padding:7px 4px; } .mechanism-tabs { gap:4px; } .symbol-grid { gap:4px; width:100%; } .symbol-button { min-height:44px; font-size:17px; border-radius:7px; } .pattern-preview { width:38px; height:38px; margin:3px auto; gap:2px; padding:4px; } .pattern-cell.is-on::after { font-size:7px; line-height:8px; } .assist-badge { font-size:7px; padding:2px 4px; margin-top:3px; } .game-overlay { padding:17px; } .overlay-panel { width:min(690px,100%); } .overlay-kicker { font-size:7px; margin-bottom:8px; } .overlay-title { font-size:31px; } .overlay-copy { font-size:10px; margin:9px 0 12px; } .menu-primary { min-height:48px; margin:11px 0 8px; } .menu-modes { margin:8px 0; } .menu-modes button { min-height:49px; } .menu-actions { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:8px; } .menu-actions button,.menu-actions a { font-size:9px; } .overlay-stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin:12px 0; } .stat-cell { padding:9px 8px; } .stat-cell>strong { font-size:18px; } .stat-cell>span { font-size:7px; } .stars-row { font-size:24px; margin:8px 0; } .results-rewards { margin:9px 0; padding:8px; font-size:10px; } .overlay-actions { margin-top:11px; } .dialog-header { padding:12px 16px 10px; } .dialog-header h2 { font-size:20px; } .dialog-body { padding:14px 16px 18px; } .game-shell.is-menu .mechanism-workspace { grid-template-columns:minmax(0,1fr); } }
@media (max-height:500px) and (min-width:480px) {
  .game-stage { grid-template-columns:minmax(0,1fr) minmax(232px,42%); grid-template-rows:auto minmax(0,1fr); gap:4px 12px; }
  .hud { grid-column:1; grid-row:1; grid-template-columns:minmax(40px,1fr) 30px 34px 43px auto; gap:4px; }
  .mode-block>strong { font-size:8px; }
  .hud-label { font-size:5px; }
  .hud-stat>strong { font-size:13px; }
  .hud-actions { gap:4px; }
  .mechanism-workspace { display:contents; }
  .mechanism-display { grid-column:1; grid-row:2; }
  .puzzle-console { grid-column:2; grid-row:1/3; }
  .mechanism-controls { gap:5px; }
  .mechanism-action { min-height:0; gap:5px; }
  .mechanism-action:has(.fine-button) { grid-template-columns:44px minmax(0,1fr) 44px; }
  .secure-button { min-height:44px; font-size:10px; padding:7px 5px; }
  .fine-button { min-height:44px; }
  .mechanism-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
  .mechanism-tabs:has(.ring-tab:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mechanism-tabs:has(.ring-tab:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mechanism-tabs:has(.ring-tab:nth-child(4):last-child) { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ring-tab { min-width:44px; font-size:8px; padding:7px 1px; }
  .mechanism-controls:has(.pattern-preview) { grid-template-columns:38px minmax(0,1fr); gap:5px; align-items:center; }
  .mechanism-controls:has(.pattern-preview) .pattern-preview { grid-column:1; grid-row:1; margin:0; }
  .mechanism-controls:has(.pattern-preview) .symbol-grid { grid-column:2; grid-row:1; }
  .mechanism-controls:has(.pattern-preview) .mechanism-action { grid-column:1/-1; grid-row:2; }
  .game-shell.is-menu .game-stage { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .game-shell.is-menu .mechanism-display { grid-column:1; grid-row:1; }
}
@media (max-height:359px) and (min-width:480px) {
  #puzzle-instruction,.assist-badge { display:none; }
  #feedback-text { margin:0; font-size:9px; }
  .puzzle-console { gap:5px; }
}
@media (max-width:359px) {
  .puzzle-console:has(.pattern-preview) #puzzle-instruction { display:none; }
}
@media (prefers-contrast:more) {
  :root { --border:#c7a5e77a; }
  .hud-label,.puzzle-progress,.profile-kit,#feedback-text,.overlay-copy,.dialog-intro { color:#d2bbdf; }
  .secondary-button,.tertiary-button,.symbol-button,.ring-tab { border-color:#c3a1d58c; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .symbol-button:active { transform:none; } }