:root{--bg:#001219;--surface:#01242e;--high:#02313e;--line:#006074;--muted:#b1ab8c;--blue:#ee9b00;--green:#94d2bd;--red:#bb3e03;--gold:#ee9b00;--primary:#0a9396;--red-fill:#ae2012}*{box-sizing:border-box}html{color-scheme:dark;background:var(--bg);--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.6}.app{width:min(100%,760px);margin:auto;padding:0 14px calc(60px + env(safe-area-inset-bottom))}.lead{padding:24px 3px 20px}.kicker{color:var(--blue);font-size:.66rem;letter-spacing:.17em;font-weight:950}.lead h1{margin:5px 0;font-size:clamp(2rem,8vw,3.1rem);line-height:1.05;letter-spacing:-.06em}.lead p{margin:0;color:var(--muted);font-size:.87rem}.map-card,.grid-card,.result{border:1px solid var(--line);background:var(--surface);border-radius:19px;padding:16px;margin-bottom:16px;box-shadow:0 14px 36px #0004;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.67rem;font-weight:950;letter-spacing:.1em}.section-head strong{color:var(--blue)}.section-head span{color:var(--muted)}.map{position:relative;width:100%;aspect-ratio:1.16;max-height:570px;min-height:300px;margin:8px auto 0}.map:before{content:"";position:absolute;inset:13%;border:1px solid var(--line);border-radius:50%;opacity:.8}.map-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26%;aspect-ratio:1;border:2px solid var(--green);border-radius:50%;display:grid;place-items:center;background:#1b8a6b;box-shadow:0 0 24px #94d2bd36;font-size:clamp(42px,14vw,75px);color:var(--green);font-weight:900;overflow:hidden;z-index:1;--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill)}.map-center img{width:100%;height:100%;object-fit:cover}.map-node{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translate(-50%,-50%);width:clamp(48px,17%,90px);height:clamp(48px,14%,78px);border:1px solid var(--line-strong);border-radius:12px;background:var(--high);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:4px;z-index:2;transition:background .25s,border-color .25s,transform .25s;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.map-node:hover{transform:translate(-50%,-50%) scale(1.06)}.map-node.known{border-color:var(--green);background:#1b8a6b;--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill);color:var(--text)}.map-node.partial{border-color:var(--green)}.map-node small{font-size:.46rem;line-height:1.1;color:var(--text);font-weight:900;text-transform:uppercase;letter-spacing:.04em}.map-node b{font-size:.68rem;line-height:1.05;overflow-wrap:anywhere;max-height:2.2em;overflow:hidden}.map-node.unknown b{color:var(--text);font-size:1.25rem}.map-node em{color:var(--blue);font-style:normal;font-size:.48rem;font-weight:900}.map-line{position:absolute;left:50%;top:50%;width:36%;height:1px;background:var(--line);transform-origin:left center;transform:rotate(var(--a));opacity:.75;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.grid-note{font-size:.76rem;color:var(--muted);margin:8px 0 14px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.trait{height:96px;perspective:800px;background:transparent;border:0;padding:0;-webkit-tap-highlight-color:transparent}.trait-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .58s cubic-bezier(.2,.7,.2,1)}.trait.flipped .trait-inner{transform:rotateY(180deg)}.trait-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line-strong);border-radius:13px;background:var(--high);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.trait-front:hover{border-color:var(--blue);background:var(--raise);--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.trait-face small{color:var(--blue);font-size:.52rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.trait-face b{font-size:.78rem;line-height:1.1;overflow-wrap:anywhere}.trait-back{transform:rotateY(180deg)}.trait.correct .trait-back{background:#1b8a6b;border-color:var(--green);--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill);color:var(--text)}.trait.wrong .trait-back{background:#9b2226;border-color:var(--red);--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill);color:var(--text)}.trait-back small{color:var(--text)}.trait-mark{font-size:1.25rem;font-weight:900;line-height:1}.browse{width:100%;display:flex;align-items:center;gap:14px;border:1px solid var(--green);background:#1b8a6b;border-radius:16px;text-align:left;padding:13px;margin-top:4px;--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill);color:var(--text)}.browse-icon{width:42px;height:42px;border:1px solid var(--mint);border-radius:12px;display:grid;place-items:center;font-size:31px}.browse b{font-size:.85rem;letter-spacing:.06em}.browse small{display:block;font-size:.67rem;color:var(--text)}.browse .chevron{margin-left:auto;font-size:1.6rem}.result{border-color:var(--green);display:flex;gap:13px;align-items:center}.result.lost{border-color:var(--red)}.result img{width:72px;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--text);border-radius:8px}.result h2{font-size:1rem;margin:3px 0}.result p{font-size:.72rem;color:var(--muted);margin:0}.result strong{font-size:.62rem;color:var(--green);letter-spacing:.1em}.result.lost strong{color:var(--red)}dialog{width:min(94vw,620px);max-height:88vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;color:var(--text);padding:0;box-shadow:0 20px 60px #000b;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 18px;border-bottom:1px solid var(--raise);position:sticky;top:0;background:var(--surface);z-index:1;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.modal-head b{font-size:1.1rem}.modal-head small{display:block;color:var(--muted);font-size:.7rem}.close{border:1px solid var(--line);background:var(--high);border-radius:10px;width:36px;height:36px;font-size:1.4rem;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.modal-note{font-size:.77rem;color:var(--muted);margin:13px 18px}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px 18px}.library-game{min-width:0;border:1px solid var(--line);background:var(--high);border-radius:12px;padding:7px;text-align:center;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.library-game img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:7px;background:var(--raise);--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.library-game b{display:block;font-size:.65rem;line-height:1.15;margin-top:5px;overflow-wrap:anywhere}.load-more{display:block;width:calc(100% - 36px);margin:0 18px 18px;padding:12px;border:1px solid var(--line);background:var(--high);border-radius:10px;font-weight:800;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}#librarySearch{display:block;width:calc(100% - 36px);margin:0 18px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);outline:0;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}#librarySearch:focus{border-color:var(--blue)}.confirm-body{padding:22px;text-align:center}.confirm-body>img{display:block;width:110px;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--text-soft);border-radius:10px;margin:14px auto}.confirm-body h2{margin:10px 0 4px;font-size:1.45rem}.confirm-body p{color:var(--text);font-size:.87rem}.modal-actions{display:flex;gap:9px;margin-top:18px}.modal-actions button,.instructions button{flex:1;min-height:46px;padding:9px;border:1px solid var(--line);background:var(--high);border-radius:11px;font-size:.8rem;font-weight:900;--text:var(--page-text);--text-soft:var(--page-soft);--muted:var(--page-muted)}.modal-actions .primary,.instructions .primary{background:var(--primary);border-color:var(--green);color:var(--text);--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill)}.outcome-badge{display:inline-block;border-radius:99px;background:var(--primary);padding:6px 13px;font-size:.67rem;letter-spacing:.1em;font-weight:900;color:var(--text);--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill)}.outcome-badge.lost{background:var(--red-fill);--text:var(--on-fill);--text-soft:var(--on-fill);--muted:var(--on-fill);color:var(--text)}#trailer video{width:100%;border-radius:12px;margin-top:7px}#trailer p{font-size:.72rem;color:var(--muted)}.instructions{text-align:left}.instructions h2{margin:5px 0}.instructions ol{padding-left:20px;color:var(--text);font-size:.82rem;line-height:1.55}.instructions li{margin-bottom:10px}.full{width:100%}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--text);color:var(--surface);padding:9px 14px;border-radius:9px;font-weight:900;transition:.2s;z-index:10;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:560px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}.map{aspect-ratio:1.35}.map-node{width:90px;height:72px}.map-node small{font-size:.54rem}.map-node b{font-size:.78rem}}@media(max-width:360px){.app{padding-left:9px;padding-right:9px}.map-node{width:46px}.map-node small{font-size:.42rem}.map-node b{font-size:.55rem}.trait{height:88px}.trait-face b{font-size:.7rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}