:root{--bg:#101823;--bg-soft:#17202d;--line:#27344a;--ink:#e8eef7;--ink-dim:#9aa9bf;--accent:#f2b544;--accent-ink:#241a05;--ok:#58c184;--warn:#f0a63c;--bad:#ef6f6f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);overscroll-behavior:none;-webkit-text-size-adjust:100%;font-family:Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,system-ui,sans-serif;font-size:16px;line-height:1.5}#app{min-height:100%}.screen{min-height:100dvh;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex}.boot{color:var(--ink-dim);text-align:center;padding:40px 16px}.card{background:var(--bg-soft);border:1px solid var(--line);border-radius:18px;width:100%;max-width:420px;padding:28px 22px}.card__title{letter-spacing:.08em;color:var(--accent);text-align:center;margin:0;font-size:30px}.card__lead{text-align:center;margin:18px 0 4px;font-size:19px;font-weight:700}.card__sub{color:var(--ink-dim);text-align:center;margin:0 0 22px;font-size:15px}.form{flex-direction:column;gap:16px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field__label{color:var(--ink-dim);font-size:15px;font-weight:700}.field__input{font:inherit;min-height:52px;color:var(--ink);border:1px solid var(--line);background:#0d141d;border-radius:12px;padding:12px 14px;font-size:17px}.field__input:focus{outline:2px solid var(--accent);outline-offset:1px}.field__hint{color:var(--ink-dim);font-size:13px}.btn{width:100%;min-height:54px;font:inherit;color:var(--accent-ink);background:var(--accent);cursor:pointer;touch-action:manipulation;border:none;border-radius:12px;padding:14px 18px;font-size:17px;font-weight:700;display:block}.btn:disabled{opacity:.6;cursor:default}.btn--ghost{color:var(--ink);border:1px solid var(--line);background:0 0}.card>.btn{margin-top:18px}.error{min-height:1.2em;color:var(--bad);margin:0;font-size:15px}.error:empty{min-height:0}.note{color:var(--ink-dim);text-align:center;margin:18px 0 0;font-size:14px}.note--warn{color:var(--warn)}.game{grid-template-rows:auto 1fr;height:100dvh;display:grid;overflow:hidden}.hud{z-index:10;padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));background:var(--bg-soft);border-bottom:1px solid var(--line);align-items:center;gap:10px;display:flex;position:relative}.hud__name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:700;overflow:hidden}.hud__save{color:var(--ink-dim);background:#0d141d;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;display:inline-flex}.hud__dot{background:var(--ink-dim);border-radius:50%;width:9px;height:9px}.hud__save--saved .hud__dot{background:var(--ok)}.hud__save--saving .hud__dot,.hud__save--pending .hud__dot{background:var(--warn)}.hud__save--failed{color:var(--bad)}.hud__save--failed .hud__dot{background:var(--bad)}.hud__btn{min-width:64px;min-height:44px;font:inherit;color:var(--ink);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:10px;padding:8px 14px;font-size:15px}.stage{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.stage canvas{display:block}.stick{z-index:5;touch-action:none;position:absolute;inset:0}.stick__base{opacity:0;pointer-events:none;background:#10182347;border:2px solid #e8eef759;border-radius:50%;width:132px;height:132px;margin:-66px 0 0 -66px;transition:opacity .12s ease-out;position:absolute}.stick__base--on{opacity:1}.stick__knob{background:#f2b544d9;border-radius:50%;width:60px;height:60px;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.toast-stack{left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:100;pointer-events:none;flex-direction:column;gap:8px;width:min(92vw,420px);display:flex;position:fixed;transform:translate(-50%)}.toast{border:1px solid var(--line);background:#1e2a3c;border-radius:12px;padding:12px 16px;font-size:15px;transition:opacity .2s ease-out;box-shadow:0 8px 24px #00000059}.toast--error{border-color:var(--bad);color:#ffd9d9}.toast--out{opacity:0}.fatal{z-index:20;text-align:center;background:#101823f0;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.fatal__text{margin:0;font-size:17px}.village{z-index:6;pointer-events:none;position:absolute;inset:0}.village [hidden]{display:none}.res-bar{top:calc(8px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));flex-wrap:wrap;gap:6px;display:flex;position:absolute}.res{border:1px solid var(--line);background:#0d141dd1;border-radius:999px;align-items:center;gap:5px;padding:7px 12px;font-size:16px;display:inline-flex}.res__icon{font-size:17px;line-height:1}.res__label{color:var(--ink-dim);font-size:13px}.res__value{font-variant-numeric:tabular-nums;font-weight:700}.village-btn{right:calc(14px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));min-width:104px;min-height:56px;font:inherit;color:var(--accent-ink);background:var(--accent);cursor:pointer;touch-action:manipulation;pointer-events:auto;border:none;border-radius:14px;padding:12px 18px;font-size:17px;font-weight:700;position:absolute;box-shadow:0 6px 18px #00000059}.sheet{padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);pointer-events:auto;background:#17202df5;border-radius:18px 18px 0 0;flex-direction:column;gap:12px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -8px 28px #0006}.sheet__title{text-align:center;margin:0;font-size:17px;font-weight:700}.sheet__hint{min-height:1.4em;color:var(--ink-dim);text-align:center;margin:0;font-size:15px}.sheet__cards{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.card-build{min-height:92px;font:inherit;color:var(--ink);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;background:#0d141d;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px 8px;display:flex}.card-build__name{font-size:17px;font-weight:700}.card-build__size{color:var(--ink-dim);font-size:12px}.card-build__cost{color:var(--accent);font-size:14px}.card-build--poor{opacity:.55}.modal{z-index:200;background:#060a10a8;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal__sheet{background:var(--bg-soft);border:1px solid var(--line);border-radius:20px 20px 0 0;flex-direction:column;width:100%;max-width:560px;max-height:88dvh;display:flex;box-shadow:0 -10px 40px #00000073}@media (min-width:700px){.modal{align-items:center}.modal__sheet{border-radius:20px;max-height:84dvh}}.modal__head{border-bottom:1px solid var(--line);align-items:flex-start;gap:10px;padding:16px 16px 12px;display:flex}.modal__titles{flex:1;min-width:0}.modal__title{margin:0;font-size:19px}.modal__subtitle{color:var(--ink-dim);margin:2px 0 0;font-size:14px}.modal__close{min-width:44px;min-height:44px;font:inherit;color:var(--ink);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:12px;flex:none;font-size:18px}.modal__body{-webkit-overflow-scrolling:touch;flex:1;padding:14px 16px;overflow-y:auto}.modal__actions{padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-direction:column;gap:10px;display:flex}.history__body{margin:0;font-size:17px;line-height:1.75}.history__effect{border:1px solid var(--line);color:var(--accent);background:#0d141d;border-radius:12px;margin:14px 0 0;padding:10px 12px;font-size:15px}.history__note{color:var(--ink-dim);margin:6px 0 0;font-size:13px}.history__codex{color:var(--ok);margin:14px 0 0;font-size:15px;font-weight:700}.kingdom{z-index:6;pointer-events:none;position:absolute;inset:0}.kingdom [hidden]{display:none}.kingdom-btn{right:calc(14px + env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));min-width:104px;min-height:52px;font:inherit;color:var(--ink);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;pointer-events:auto;background:#17202df0;border-radius:14px;padding:10px 16px;font-size:17px;font-weight:700;position:absolute;box-shadow:0 6px 18px #00000059}.kingdom-cards{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.kingdom-card{min-height:84px;font:inherit;color:var(--ink);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;background:#0d141d;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:10px 6px;display:flex}.kingdom-card__icon{font-size:24px;line-height:1}.kingdom-card__label{font-size:15px;font-weight:700}.card--wide{max-width:640px}.nation-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.nation-card{min-height:132px;font:inherit;color:var(--ink);border:1px solid var(--line);cursor:pointer;text-align:center;touch-action:manipulation;background:#0d141d;border-radius:16px;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;display:flex}.nation-card__emoji{font-size:30px;line-height:1.1}.nation-card__name{font-size:18px;font-weight:700}.nation-card__era{color:var(--ink-dim);font-size:13px}.nation-card__traits{color:var(--accent);margin-top:4px;font-size:13px;line-height:1.4}.nation__reason{color:var(--ink-dim);margin:0 0 6px;font-size:16px}.nation__h{color:var(--ink-dim);margin:18px 0 8px;font-size:15px}.trait{border:1px solid var(--line);background:#0d141d;border-radius:12px;margin-bottom:10px;padding:12px 14px}.trait__name{margin:0;font-size:17px;font-weight:700}.trait__effect{color:var(--accent);margin:4px 0 0;font-size:15px}.trait__basis{color:var(--ink-dim);margin:8px 0 0;font-size:15px;line-height:1.65}.trait__ask,.tech__ask{color:var(--warn);margin:8px 0 0;font-size:13px;line-height:1.5}.view__msg{color:var(--ink-dim);margin:10px 0 0;font-size:14px;line-height:1.6}.view__count{margin:0 0 12px;font-size:16px;font-weight:700}.btn--small{flex:none;width:auto;min-width:96px;min-height:44px;padding:10px 14px;font-size:15px}.tech-list,.recipe-list,.quiz-list{flex-direction:column;gap:10px;display:flex}.tech,.recipe{border:1px solid var(--line);background:#0d141d;border-radius:14px;align-items:center;gap:12px;padding:12px 14px;display:flex}.tech__text,.recipe__text{flex:1;min-width:0}.tech--locked,.tech--done{opacity:.62}.tech--ready{border-color:var(--ok)}.tech__head,.recipe__head{align-items:center;gap:8px;display:flex}.tech__icon,.recipe__icon{font-size:20px;line-height:1}.tech__label,.recipe__label{font-size:17px;font-weight:700}.tech__status{color:var(--ink-dim);font-size:13px}.tech__meta,.recipe__need{color:var(--ink-dim);margin:4px 0 0;font-size:14px}.tech__effect{color:var(--accent);margin:6px 0 0;font-size:14px}.tech__need,.recipe__lock,.recipe__hint{color:var(--ink-dim);margin:6px 0 0;font-size:13px;line-height:1.5}.codex-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}@media (min-width:560px){.codex-grid{grid-template-columns:repeat(3,1fr)}}.codex-card{min-height:104px;font:inherit;color:var(--ink);border:1px solid var(--line);text-align:center;cursor:pointer;touch-action:manipulation;background:#0d141d;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px 8px;display:flex}.codex-card--locked{opacity:.5;cursor:default}.codex-card__icon{font-size:24px;line-height:1}.codex-card__title{font-size:15px;font-weight:700}.codex-card__sub{color:var(--ink-dim);font-size:12px}.quiz{border:1px solid var(--line);background:#0d141d;border-radius:14px;padding:14px}.quiz__head{justify-content:space-between;align-items:center;gap:8px;display:flex}.quiz__level{color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}.quiz__level--hard{background:var(--warn)}.quiz__reward{color:var(--ink-dim);font-size:13px}.quiz__q{margin:10px 0 12px;font-size:17px;line-height:1.6}.quiz__choices{flex-direction:column;gap:8px;display:flex}.quiz__choice{min-height:48px;font:inherit;text-align:left;color:var(--ink);background:var(--bg-soft);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;border-radius:12px;padding:12px 14px;font-size:16px}.quiz__choice:disabled{cursor:default;opacity:.7}.quiz__choice--right{border-color:var(--ok);color:var(--ok);opacity:1}.quiz__verdict{margin:12px 0 0;font-size:16px;font-weight:700}.quiz__verdict--right{color:var(--ok)}.quiz__verdict--wrong{color:var(--bad)}.quiz__explain{color:var(--ink-dim);margin:6px 0 0;font-size:15px;line-height:1.65}.invite{flex-direction:column;gap:18px;display:flex}.picks{flex-wrap:wrap;gap:8px;display:flex}.pick{border:1px solid var(--line);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;background:#0d141d;border-radius:999px;padding:10px 16px;font-size:15px}.pick:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.pick--on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}.pick:disabled{opacity:.45;cursor:default}.pick--danger{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 50%, transparent)}.btn--danger{background:var(--bad);border-color:var(--bad);color:#2a0b0b}.invite__slot:empty{display:none}.invite__result{border:1px solid var(--accent);background:#0d141d;border-radius:14px;flex-direction:column;gap:12px;padding:16px;display:flex}.invite__ready{margin:0;font-weight:700}.invite__url{border:1px dashed var(--line);word-break:break-all;-webkit-user-select:all;user-select:all;background:#060a10;border-radius:10px;margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5}.invite__actions{flex-wrap:wrap;gap:10px;display:flex}.invite__actions .btn{flex:140px;width:auto;min-height:50px}.invite__history{flex-direction:column;gap:10px;display:flex}.invite__subhead{color:var(--ink-dim);margin:0;font-size:15px;font-weight:700}.invite__list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.invite__item{border:1px solid var(--line);background:#0d141d;border-radius:10px;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;font-size:14px;display:flex}.invite__item-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.invite__item-state{color:var(--ink-dim);flex:none;font-size:13px}.account__row{flex-direction:column;align-items:stretch;gap:10px}.account__who{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.offscreen{opacity:0;position:fixed;top:0;left:-9999px}