:root{--bg: #0c0a12;--bg-2: #14111d;--ink: #efe6d0;--muted: #8c84a3;--gold: #e0b25a;--violet: #9b7fd4;--line: rgba(224, 178, 90, .18)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{background:radial-gradient(120% 90% at 50% 0%,#1a1530 0%,var(--bg) 55%) fixed;color:var(--ink);font-family:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}#root{min-height:100%}.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom)}.hud--top{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 8px}.brand{display:flex;align-items:center;gap:10px}.brand__mark{font-size:30px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(224,178,90,.5))}.brand__title{margin:0;font-size:24px;letter-spacing:6px;font-weight:600;color:var(--ink)}.brand__sub{margin:0;font-size:11px;letter-spacing:2px;text-transform:lowercase;color:var(--muted)}.stats{display:flex;gap:8px}.stat{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:5px 8px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px}.stat__label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.stat__value{font-size:18px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}.canvas-wrap{position:relative;flex:1;min-height:320px;border-radius:18px;overflow:hidden;touch-action:none}.canvas-wrap canvas{display:block}.unison{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;gap:6px;background:radial-gradient(60% 60% at 50% 50%,rgba(224,178,90,.16),transparent 70%);animation:fade .32s ease;pointer-events:none}.unison__word{font-size:40px;letter-spacing:14px;color:var(--gold);text-shadow:0 0 24px rgba(224,178,90,.7);animation:pulse 1.5s ease}.unison__sub{font-size:13px;letter-spacing:3px;color:var(--ink)}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:24px;background:#0a0810d1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .24s ease}.intro__card{max-width:360px;text-align:center;padding:28px 26px;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px #0000008c}.intro__mark{font-size:38px;color:var(--gold);filter:drop-shadow(0 0 14px rgba(224,178,90,.55))}.intro__title{margin:6px 0 2px;font-size:26px;letter-spacing:8px}.intro__lede{margin:0 0 16px;color:var(--gold);font-size:15px;letter-spacing:1px}.intro__steps{margin:0 0 16px;padding:0;list-style:none;text-align:left;display:grid;gap:8px;font-size:14px;line-height:1.4;color:var(--ink)}.intro__steps b{color:var(--gold)}.intro__hint{margin:0 0 18px;font-size:12px;color:var(--muted)}.btn-primary{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:13px 0;border:none;border-radius:12px;font-size:15px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--bg);background:radial-gradient(circle at 50% 30%,#f3d489,var(--gold));box-shadow:0 4px #9c7322;cursor:pointer}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px #9c7322}.codex{display:flex;align-items:center;gap:10px;padding:8px 4px 2px}.codex__title,.codex__meta{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap}.codex__row{display:flex;gap:6px;flex:1;overflow-x:auto}.codex__cell{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:var(--bg-2);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 22%,transparent)}.codex__cell canvas{width:32px;height:32px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:8px 0 6px}.rune{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:60px;height:60px;border-radius:50%;font-size:28px;color:var(--bg);background:radial-gradient(circle at 50% 35%,#f3d489,var(--gold));border:none;box-shadow:0 4px #9c7322,0 0 18px #e0b25a66;cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}.rune:active{transform:translateY(3px);box-shadow:0 1px #9c7322}.ghost{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:12px 18px;border-radius:12px;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:transparent;border:1px solid var(--line);cursor:pointer;font-family:inherit}.ghost:active{transform:translateY(1px);background:#e0b25a0f}.tip{margin:2px 6px 6px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted)}.lifetime{margin:0 6px 12px;text-align:center;font-size:11px;letter-spacing:1px;color:var(--gold);opacity:.75}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{transform:scale(.7);opacity:0}40%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}