{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","kubeniz","name","arthion-atlas","path","components/Layout.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/kubeniz/arthion-atlas/code/components/Layout.tsx","extension","id","9ace331a-f6f9-440e-96c3-567407cb834a","Layout.tsx","fileId","01a07e97-dc49-70c1-928f-d3329f8dc78f","parentId","01a07e97-dc49-70c1-928f-d93bc188b742","branchId","1c5a54fc-7258-41d1-a35b-94740edbafba","branchVersion",226,"latest",true,"createdAt",["D",1789504552498],"version",33,"fileType","script","content","/** @jsxImportSource npm:hono/jsx */\n\nexport default function Layout(\n { title, active, isAdmin, children }: {\n title: string;\n active?: \"guide\" | \"submit\" | \"leaderboard\" | \"upgrades\";\n isAdmin?: boolean;\n children?: unknown;\n },\n) {\n return (\n \n \n \n \n {title}\n \n \n \n \n \n \n

\n \n

{children}

\n \n \n \n );\n}\n\nconst CSS = `\n :root {\n --bg: #15100c;\n --bg-inset: #0f0b08;\n --surface: #201810;\n --surface-2: #2a2015;\n --border: #43331f;\n --border-soft: #33271a;\n --gold: #cda24c;\n --gold-bright: #e6c26e;\n --red: #a9392b;\n --red-bright: #c94a38;\n --jade: #4c8a76;\n --slate: #6a89a8;\n --moss: #7a9152;\n --text: #efe4d2;\n --text-muted: #a99878;\n --text-faint: #7d6f57;\n --shadow: 0 12px 28px rgba(0,0,0,0.45);\n --radius: 10px;\n --font-display: \"Cinzel\", \"Iowan Old Style\", Georgia, serif;\n --font-body: \"Work Sans\", -apple-system, \"Segoe UI\", sans-serif;\n --font-mono: \"JetBrains Mono\", ui-monospace, Menlo, monospace;\n }\n\n * { box-sizing: border-box; }\n\n html, body {\n margin: 0;\n background: var(--bg);\n color: var(--text);\n font-family: var(--font-body);\n font-size: 16px;\n line-height: 1.5;\n }\n\n body {\n background-image:\n radial-gradient(ellipse 900px 500px at 15% -10%, rgba(169,57,43,0.14), transparent 60%),\n radial-gradient(ellipse 700px 500px at 100% 0%, rgba(76,138,118,0.10), transparent 55%);\n position: relative;\n }\n\n .scanlines {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n background-image: repeating-linear-gradient(\n to bottom,\n rgba(0,0,0,0.05) 0,\n rgba(0,0,0,0.05) 1px,\n transparent 1px,\n transparent 3px\n );\n opacity: 0.25;\n }\n\n a { color: var(--gold-bright); text-decoration: none; }\n a:hover { text-decoration: underline; }\n a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {\n outline: 2px solid var(--gold-bright);\n outline-offset: 2px;\n }\n\n h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; text-wrap: balance; margin: 0; }\n\n .site-header {\n position: relative;\n z-index: 1;\n border-bottom: 1px solid var(--border);\n background: linear-gradient(to bottom, rgba(32,24,16,0.9), rgba(21,16,12,0.9));\n backdrop-filter: blur(6px);\n }\n .site-header-inner {\n max-width: 1280px;\n margin: 0 auto;\n padding: 16px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n flex-wrap: wrap;\n }\n .brand { display: flex; align-items: center; gap: 12px; color: var(--text); }\n .brand:hover { text-decoration: none; }\n .brand-glyph {\n font-size: 26px;\n color: var(--gold);\n border: 1px solid var(--border);\n background: var(--bg-inset);\n width: 44px; height: 44px;\n display: flex; align-items: center; justify-content: center;\n border-radius: 8px;\n box-shadow: inset 0 0 12px rgba(205,162,76,0.15);\n }\n .brand-text { display: flex; flex-direction: column; line-height: 1.15; }\n .brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold-bright); }\n .brand-sub { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }\n\n .site-nav { display: flex; gap: 4px; }\n .nav-link {\n padding: 8px 16px;\n border-radius: 7px;\n color: var(--text-muted);\n font-weight: 500;\n font-size: 14px;\n }\n .nav-link:hover { color: var(--text); text-decoration: none; background: rgba(255,255,255,0.04); }\n .nav-link.is-active { color: var(--bg); background: var(--gold); }\n .nav-link.is-active:hover { background: var(--gold-bright); }\n\n .page {\n position: relative;\n z-index: 1;\n max-width: 1280px;\n margin: 0 auto;\n padding: 32px 24px 80px;\n }\n\n .site-footer {\n position: relative;\n z-index: 1;\n text-align: center;\n padding: 24px;\n color: var(--text-faint);\n font-size: 13px;\n border-top: 1px solid var(--border-soft);\n }\n\n .lede { color: var(--text-muted); max-width: 70ch; margin: 6px 0 0; }\n\n /* Map picker pills */\n .map-picker {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin: 22px 0 26px;\n padding: 12px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n }\n .map-pill {\n padding: 7px 14px;\n border-radius: 999px;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-muted);\n border: 1px solid var(--border);\n background: var(--bg-inset);\n white-space: nowrap;\n }\n .map-pill:hover { color: var(--text); border-color: var(--text-faint); text-decoration: none; }\n .map-pill.is-active { color: var(--bg); background: var(--gold); border-color: var(--gold); font-weight: 600; }\n .map-pill.is-active:hover { background: var(--gold-bright); }\n .map-pill .pill-count {\n display: inline-block;\n margin-left: 6px;\n font-family: var(--font-mono);\n font-size: 11px;\n opacity: 0.75;\n }\n .map-pill-group-label {\n width: 100%;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--text-faint);\n padding: 4px 4px 0;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: var(--gold);\n color: #201408;\n border: none;\n border-radius: 7px;\n padding: 10px 18px;\n font-weight: 600;\n font-size: 14px;\n font-family: var(--font-body);\n cursor: pointer;\n }\n .btn:hover { background: var(--gold-bright); text-decoration: none; }\n .btn:disabled { opacity: 0.45; cursor: not-allowed; }\n .btn-ghost {\n background: transparent;\n color: var(--text-muted);\n border: 1px solid var(--border);\n }\n .btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.04); border-color: var(--text-faint); }\n .btn-danger {\n background: transparent;\n color: var(--red-bright);\n border: 1px solid var(--border-soft);\n padding: 5px 9px;\n font-size: 12px;\n border-radius: 6px;\n cursor: pointer;\n }\n .btn-danger:hover { background: rgba(169,57,43,0.14); border-color: var(--red); }\n\n .stat-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }\n .stat { display: flex; flex-direction: column; }\n .stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--gold-bright); }\n .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }\n\n /* Two-column map + legend / map + form layout */\n .split-layout {\n display: grid;\n grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);\n gap: 22px;\n align-items: start;\n }\n @media (max-width: 860px) {\n .split-layout { grid-template-columns: 1fr; }\n }\n\n .map-frame {\n position: relative;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n background: var(--bg-inset);\n box-shadow: var(--shadow);\n overflow: hidden;\n line-height: 0;\n }\n .map-frame img { display: block; width: 100%; height: auto; user-select: none; }\n .map-frame.clickable { cursor: crosshair; }\n\n .pin {\n position: absolute;\n width: 24px;\n height: 24px;\n margin-left: -12px;\n margin-top: -12px;\n border-radius: 50%;\n border: 2px solid rgba(0,0,0,0.6);\n box-shadow: 0 2px 6px rgba(0,0,0,0.55);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-mono);\n font-size: 11px;\n font-weight: 700;\n color: #1a1208;\n pointer-events: auto;\n cursor: default;\n transition: opacity 0.12s ease;\n }\n .pin-boss { background: var(--red-bright); }\n .pin-miniboss { background: #c97a3a; }\n .pin-npc { background: var(--slate); }\n .pin-resource { background: var(--moss); }\n .pin-metin { background: var(--jade); }\n .pin-other { background: var(--text-muted); }\n .pin.pin-pending {\n background: var(--gold-bright);\n border-color: #201408;\n animation: pulse 1.4s ease-in-out infinite;\n pointer-events: none;\n }\n .pin.is-filtered-out { display: none; }\n .pin.pin-existing { opacity: 0.7; }\n .pin.pin-existing:hover { opacity: 1; }\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n }\n\n .pin .cat-icon { color: #1a1208; }\n .pin-index {\n position: absolute;\n right: -5px;\n bottom: -5px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #1a1208;\n color: var(--text);\n font-family: var(--font-mono);\n font-size: 8.5px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid rgba(0,0,0,0.55);\n box-shadow: 0 1px 3px rgba(0,0,0,0.5);\n }\n\n .pin-tooltip {\n position: absolute;\n bottom: 130%;\n left: 50%;\n transform: translateX(-50%);\n background: var(--bg-inset);\n color: var(--text);\n border: 1px solid var(--border);\n padding: 4px 9px;\n border-radius: 6px;\n font-family: var(--font-body);\n font-size: 12.5px;\n font-weight: 600;\n white-space: nowrap;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.12s ease;\n z-index: 5;\n box-shadow: var(--shadow);\n }\n .pin:hover .pin-tooltip { opacity: 1; }\n\n /* Type filter */\n .type-filter {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n margin-bottom: 16px;\n }\n .type-filter-label {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--text-faint);\n margin-right: 2px;\n }\n .filter-chip {\n padding: 6px 13px;\n border-radius: 999px;\n font-size: 12.5px;\n font-weight: 500;\n color: var(--text);\n border: 1px solid var(--border);\n background: var(--surface);\n cursor: pointer;\n font-family: var(--font-body);\n }\n .filter-chip:hover { border-color: var(--text-faint); }\n .filter-chip.is-off { color: var(--text-faint); background: var(--bg-inset); opacity: 0.55; }\n .legend-item.is-filtered-out { display: none; }\n .legend-group-header.is-filtered-out { display: none; }\n\n .map-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-bottom: 16px;\n }\n .map-toolbar .type-filter { margin-bottom: 0; }\n .btn-quick-submit {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--gold);\n color: #201408;\n border: none;\n border-radius: 7px;\n padding: 8px 16px;\n font-weight: 600;\n font-size: 13px;\n font-family: var(--font-body);\n white-space: nowrap;\n margin-left: auto;\n }\n .btn-quick-submit:hover { background: var(--gold-bright); text-decoration: none; }\n\n .legend-panel {\n border: 1px solid var(--border);\n border-radius: var(--radius);\n background: var(--surface);\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n .existing-panel { margin-top: 22px; }\n .legend-head {\n padding: 14px 16px;\n background: linear-gradient(to right, var(--surface-2), var(--surface));\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 10px;\n }\n .legend-head h2 { font-size: 16px; }\n .legend-count { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }\n\n .map-breakdown {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--border);\n background: var(--bg-inset);\n }\n .breakdown-chip {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 9px;\n border-radius: 999px;\n font-size: 11.5px;\n font-weight: 500;\n color: var(--text-muted);\n background: var(--surface);\n border: 1px solid var(--border);\n }\n .breakdown-chip .cat-icon { color: var(--gold-bright); }\n\n .legend-list { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; }\n .legend-group-header {\n display: flex;\n align-items: center;\n gap: 7px;\n padding: 8px 16px;\n background: var(--surface-2);\n border-bottom: 1px solid var(--border-soft);\n color: var(--text-muted);\n }\n .legend-group-header .cat-icon { color: var(--gold-bright); }\n .legend-group-label {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n }\n .legend-group-count {\n margin-left: auto;\n font-family: var(--font-mono);\n font-size: 11px;\n color: var(--text-faint);\n }\n .legend-item {\n display: flex;\n gap: 10px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--border-soft);\n }\n .legend-item:last-child { border-bottom: none; }\n .legend-badge {\n flex: 0 0 auto;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-mono);\n font-size: 11px;\n font-weight: 700;\n color: #1a1208;\n border: 2px solid rgba(0,0,0,0.5);\n margin-top: 1px;\n }\n .legend-body { min-width: 0; flex: 1; }\n .legend-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }\n .legend-name { font-weight: 600; color: var(--text); font-size: 14.5px; }\n .legend-chip {\n display: inline-block;\n font-size: 10.5px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--text-faint);\n margin-top: 2px;\n }\n .legend-notes { color: var(--text-muted); font-size: 13px; margin-top: 4px; }\n .legend-meta { color: var(--text-faint); font-size: 11.5px; margin-top: 6px; }\n .legend-empty {\n padding: 40px 20px;\n text-align: center;\n color: var(--text-faint);\n font-size: 13.5px;\n }\n\n .form-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n .field { display: flex; flex-direction: column; gap: 6px; }\n .field label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }\n .field .hint { font-size: 12px; color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }\n .field input, .field select, .field textarea {\n background: var(--bg-inset);\n border: 1px solid var(--border);\n color: var(--text);\n border-radius: 7px;\n padding: 10px 12px;\n font-family: var(--font-body);\n font-size: 14.5px;\n width: 100%;\n }\n .field textarea { resize: vertical; min-height: 64px; }\n .pin-status {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n border-radius: 7px;\n font-size: 13px;\n border: 1px dashed var(--border);\n color: var(--text-faint);\n }\n .pin-status.is-set { border-style: solid; border-color: rgba(205,162,76,0.4); color: var(--gold-bright); background: rgba(205,162,76,0.08); }\n .form-actions { display: flex; align-items: center; gap: 12px; }\n\n .banner {\n display: flex;\n align-items: center;\n gap: 10px;\n background: rgba(76,138,118,0.14);\n border: 1px solid rgba(76,138,118,0.35);\n color: #bfe3d5;\n border-radius: var(--radius);\n padding: 12px 16px;\n margin-bottom: 22px;\n font-size: 14px;\n }\n .banner-error {\n background: rgba(169,57,43,0.14);\n border-color: rgba(169,57,43,0.35);\n color: #f3c9c2;\n }\n\n .empty-state {\n text-align: center;\n padding: 60px 20px;\n color: var(--text-muted);\n border: 1px dashed var(--border);\n border-radius: var(--radius);\n background: var(--surface);\n }\n .empty-state h2 { font-size: 18px; color: var(--text); margin-bottom: 8px; }\n\n .admin-link { color: var(--text-faint); font-size: 12px; }\n .admin-badge { color: var(--gold-bright); font-weight: 600; }\n\n /* Leaderboard */\n .leaderboard-list { list-style: none; margin: 0; padding: 0; max-width: 640px; }\n .leaderboard-row {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 14px 16px;\n border: 1px solid var(--border);\n border-radius: var(--radius);\n background: var(--surface);\n margin-bottom: 10px;\n }\n .leaderboard-rank {\n flex: 0 0 auto;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--bg-inset);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-mono);\n font-weight: 700;\n color: var(--text-muted);\n }\n .leaderboard-row.rank-1 .leaderboard-rank { background: var(--gold); color: #201408; border-color: var(--gold); }\n .leaderboard-row.rank-2 .leaderboard-rank { background: #b0b0b0; color: #201408; border-color: #b0b0b0; }\n .leaderboard-row.rank-3 .leaderboard-rank { background: #a9744f; color: #201408; border-color: #a9744f; }\n .leaderboard-body { flex: 1; min-width: 0; }\n .leaderboard-name { font-weight: 600; font-size: 15px; color: var(--text); }\n .leaderboard-breakdown { font-size: 12px; color: var(--text-faint); margin-top: 2px; }\n .leaderboard-total {\n flex: 0 0 auto;\n font-family: var(--font-mono);\n font-size: 20px;\n font-weight: 700;\n color: var(--gold-bright);\n text-align: right;\n }\n .leaderboard-total-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 500; }\n\n /* Owner/admin entry actions */\n .entry-actions { display: flex; gap: 6px; align-items: center; }\n .btn-edit {\n background: transparent;\n color: var(--slate);\n border: 1px solid var(--border-soft);\n padding: 5px 9px;\n font-size: 12px;\n border-radius: 6px;\n cursor: pointer;\n text-decoration: none;\n }\n .btn-edit:hover { background: rgba(106,137,168,0.14); border-color: var(--slate); text-decoration: none; }\n\n /* Admin login form */\n .admin-form { max-width: 360px; display: flex; flex-direction: column; gap: 14px; }\n\n /* Upgrade catalog */\n .upgrade-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n margin: 22px 0 20px;\n }\n .class-overview { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 8px; }\n .overview-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n gap: 14px;\n }\n .overview-card {\n position: relative;\n border: 1px solid var(--border);\n border-radius: 8px;\n background: var(--surface);\n padding: 18px 14px 16px;\n }\n .overview-card::before,\n .overview-card::after {\n content: \"\";\n position: absolute;\n width: 14px;\n height: 14px;\n pointer-events: none;\n }\n .overview-card::before { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }\n .overview-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }\n .overview-card-title {\n font-family: var(--font-display);\n font-size: 16px;\n font-weight: 700;\n color: var(--gold-bright);\n text-align: center;\n margin-bottom: 14px;\n }\n .overview-card-slots { display: flex; justify-content: space-around; align-items: flex-start; gap: 10px; }\n .overview-card-slots-wide { flex-wrap: wrap; justify-content: center; gap: 26px; }\n .overview-card-wide { padding: 18px 20px; }\n .overview-slot {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n color: var(--text-muted);\n font-size: 12px;\n font-weight: 500;\n }\n .overview-slot:hover { color: var(--gold-bright); text-decoration: none; }\n .overview-slot img {\n width: 46px;\n height: 46px;\n object-fit: contain;\n filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));\n }\n .upgrade-category { margin-bottom: 8px; }\n .upgrade-category-title {\n font-size: 20px;\n padding-bottom: 10px;\n margin-bottom: 18px;\n border-bottom: 1px solid var(--border);\n }\n .upgrade-category-title span { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--text-faint); }\n .upgrade-group { margin-bottom: 28px; }\n .upgrade-group-title {\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--text-faint);\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .upgrade-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));\n gap: 10px;\n }\n .upgrade-card {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px 14px;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n background: var(--surface);\n color: var(--text);\n }\n .upgrade-card:hover { border-color: var(--text-faint); text-decoration: none; }\n .upgrade-card:hover .upgrade-card-icon-wrap { background: radial-gradient(ellipse 70% 70% at center, rgba(205,162,76,0.16), transparent 72%); }\n .upgrade-card-icon-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 76px;\n border-radius: 6px;\n background: radial-gradient(ellipse 70% 70% at center, rgba(205,162,76,0.09), transparent 72%);\n }\n .upgrade-card-icon {\n max-width: 90%;\n max-height: 72px;\n width: auto;\n height: auto;\n object-fit: contain;\n filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));\n }\n .upgrade-card-name { font-weight: 600; font-size: 14px; text-align: center; }\n .upgrade-card-meta { font-size: 11.5px; color: var(--text-faint); display: flex; justify-content: space-between; align-items: center; }\n .status-pill {\n display: inline-block;\n padding: 2px 9px;\n border-radius: 999px;\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n .status-pill.confirmed { background: rgba(76,138,118,0.18); color: #9fd8c4; }\n .status-pill.undiscovered { background: rgba(169,57,43,0.14); color: var(--red-bright); }\n .status-pill.pending_review { background: rgba(205,162,76,0.16); color: var(--gold-bright); }\n .status-pill.rejected { background: rgba(255,255,255,0.06); color: var(--text-faint); }\n\n .back-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--text-muted);\n margin-bottom: 16px;\n }\n .back-link:hover { color: var(--gold-bright); text-decoration: none; }\n\n .item-credit { color: var(--text-faint); font-size: 12.5px; margin: 6px 0 0; }\n .item-credit strong { color: var(--text-muted); font-weight: 600; }\n\n .item-detail-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 14px;\n margin-bottom: 6px;\n }\n .item-detail-title { display: flex; align-items: center; gap: 18px; }\n .item-detail-icon-wrap {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 96px;\n height: 96px;\n border-radius: 10px;\n background: radial-gradient(ellipse 70% 70% at center, rgba(205,162,76,0.12), transparent 72%);\n }\n .item-detail-icon {\n max-width: 82%;\n max-height: 88px;\n width: auto;\n height: auto;\n object-fit: contain;\n filter: drop-shadow(0 4px 7px rgba(0,0,0,0.55));\n }\n .level-table { width: 100%; border-collapse: collapse; margin-top: 18px; }\n .level-table th, .level-table td {\n border: 1px solid var(--border);\n padding: 10px 12px;\n text-align: left;\n font-size: 13.5px;\n vertical-align: top;\n }\n .level-table th { background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }\n .level-table td { background: var(--surface); }\n\n .level-table-scroll { overflow-x: auto; margin-top: 18px; }\n .level-table-vertical { margin-top: 0; }\n .level-table-vertical th, .level-table-vertical td {\n text-align: center;\n vertical-align: middle;\n min-width: 96px;\n }\n .level-table-vertical .level-row-head {\n text-align: left;\n white-space: nowrap;\n min-width: auto;\n position: sticky;\n left: 0;\n z-index: 1;\n }\n .level-table-vertical .level-col-head {\n color: var(--gold-bright);\n font-family: var(--font-mono);\n font-size: 13px;\n }\n .level-icon-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 60px;\n border-radius: 6px;\n background: radial-gradient(ellipse 70% 70% at center, rgba(205,162,76,0.09), transparent 72%);\n }\n .level-icon { max-width: 85%; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }\n .material-list { display: flex; flex-wrap: wrap; gap: 12px; }\n .material-list-vertical { flex-direction: column; align-items: center; gap: 10px; }\n .material-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; }\n .material-icon-wrap {\n position: relative;\n width: 38px;\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--bg-inset);\n border: 1px solid var(--border-soft);\n border-radius: 6px;\n }\n .material-icon { max-width: 80%; max-height: 80%; object-fit: contain; }\n .material-qty {\n position: absolute;\n top: -5px;\n right: -5px;\n background: #1a1208;\n color: var(--text);\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n border-radius: 999px;\n padding: 3px 5px;\n border: 1px solid rgba(0,0,0,0.5);\n }\n .material-name { font-size: 10.5px; color: var(--text-muted); text-align: center; line-height: 1.25; }\n .level-table input {\n background: var(--bg-inset);\n border: 1px solid var(--border);\n color: var(--text);\n border-radius: 6px;\n padding: 6px 8px;\n font-size: 13px;\n width: 100%;\n }\n .screenshot-preview { max-width: 420px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }\n .material-rows { display: flex; flex-direction: column; gap: 6px; }\n .material-row { display: flex; gap: 6px; align-items: center; }\n .material-row input[type=\"text\"] { flex: 1 1 auto; min-width: 0; }\n .material-row input[type=\"number\"] { width: 70px; flex: 0 0 auto; }\n .material-row .remove-material-btn { flex: 0 0 auto; }\n .add-material-btn { margin-top: 2px; padding: 4px 10px; font-size: 12px; }\n .ai-note {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border-radius: var(--radius);\n background: rgba(106,137,168,0.12);\n border: 1px solid rgba(106,137,168,0.3);\n color: #bcd3e6;\n font-size: 13px;\n margin: 16px 0;\n }\n`;\n","deleted",false,"label",[47,24],"components","599c3621-9315-4d74-9cc5-4cfca3f7fd3c",["D",1788830276477],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Metin2 Arthion guild boss & drop location guide","imageUrl","userId","b71e33f8-d99a-4cff-b095-38f58c0a5236","pinnedFileId","01a07e97-dc4a-73bc-8d45-7ce11e31c01a","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019fd3a0-5b29-72d9-8429-c2783b92627c","tursoName","599c362193154d749cc54cfca3f7fd3c","tursoHostname","599c362193154d749cc54cfca3f7fd3c-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789526460011],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_58":59,"_106":107,"_108":44},"branch",{"_37":92,"_11":93,"_22":30,"_94":48,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned",240,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Valentino Rodrigues","avatar","https://lh3.googleusercontent.com/a/ACg8ocLUTO6MzdqeXpcs4pmDUIuBGqLrhsGH0xN-uIFC_LP0kPooCA=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":66,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]