:root {
  --color-navy: #f1ebdb; --color-cyan: #2ba0e0; --color-cyan-bright: #1f8fce; --color-ice: #bfe6f5;
  --color-orange: #6cbf3c; --color-text: #34302a; --color-muted: #6c6350; --color-faint: #8a7d63;
  --color-border: rgba(150,125,90,0.3); --color-border-2: rgba(150,125,90,0.4); --color-border-strong: rgba(108,191,60,0.5); --color-danger: #e5484d;
  --shadow-card: 0 20px 46px rgba(60,78,112,0.13); --radius-md: 16px; --radius-xl: 26px; --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pal-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html {
  scrollbar-gutter: stable; min-height: 100%; background: var(--color-navy); color-scheme: light; }
body { min-height: 100vh; margin: 0; color: var(--color-text); font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  background: radial-gradient(1200px 620px at 50% -8%, rgba(108,191,60,0.13), transparent 62%), radial-gradient(900px 520px at 88% 4%, rgba(108,191,60,0.09), transparent 60%), linear-gradient(180deg, #fbf5ea 0%, #f1ebdb 46%, #f1ebdb 100%); background-attachment: fixed; }
button, input { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.wrap { position: relative; z-index: 1; width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 64px; }

.hero { max-width: 800px; margin-bottom: 22px; animation: rise 0.5s var(--ease) both; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 10px; border: 1px solid var(--color-border-2); border-radius: 999px; color: var(--color-cyan-bright); background: rgba(108,191,60,0.08); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 10px rgba(108,191,60,0.8); }
.hero h1 { font-family: "Baloo 2", "Manrope", system-ui, sans-serif;  margin: 0; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.14; letter-spacing: -0.012em; font-weight: 800; }
.hero h1 .grad { color: transparent; background: linear-gradient(120deg, #2494d6, #5aa62e); -webkit-background-clip: text; background-clip: text; font-weight: 700; }
.tagline { max-width: 640px; margin: 14px 0 0; color: var(--color-muted); font-size: clamp(0.95rem, 2vw, 1.04rem); }

.panel { padding: clamp(14px, 2vw, 18px); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: linear-gradient(150deg, rgba(255,254,249,0.98), rgba(247,240,225,0.98)); box-shadow: var(--shadow-card); }
.toolbar-panel { margin-bottom: 20px; animation: rise 0.55s var(--ease) 0.05s both; }
.field { position: relative; }
.field input { width: 100%; min-height: 50px; padding: 12px 16px 12px 46px; border: 1px solid var(--color-border-2); border-radius: 13px; outline: none; color: var(--color-text); background: rgba(255,255,255,0.72); }
.field input::placeholder { color: rgba(125,115,96,0.6); }
.field input:focus { border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(108,191,60,0.14); }
.field .ico { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; color: var(--color-muted); transform: translateY(-50%); pointer-events: none; }

/* icons */
.ic { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 12px; border: 1px solid rgba(150,125,90,0.14); background: radial-gradient(circle at 50% 34%, #fefdf7 0%, #fbf5ea 60%, #f5efe2 100%); flex: 0 0 auto; }
.ic img { width: 84%; height: 84%; object-fit: contain; }
.ic.failed::before { content: ""; width: 46%; height: 46%; background: var(--color-faint); opacity: 0.5; -webkit-mask: var(--pal-glyph) center / contain no-repeat; mask: var(--pal-glyph) center / contain no-repeat; }
.ic.sm { width: 32px; height: 32px; border-radius: 9px; }
.ic.md { width: 46px; height: 46px; }
.ic.big { width: 82px; height: 82px; border-radius: 16px; }
.ic.lg { width: 84px; height: 84px; border-radius: 18px; }

/* board */
.tech-board { display: grid; gap: 14px; }
.lvl-row { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start; animation: rise 0.4s var(--ease) both; }
.lvl-content { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: start; }
.lvl-techs { grid-column: 1 / 6; }
.lvl-ancient { grid-column: 6; position: relative; display: grid; gap: 14px; align-content: start; }
.lvl-ancient:not(:empty)::before { content: ""; position: absolute; left: -8px; top: 2px; bottom: 2px; border-left: 2px dashed rgba(224, 90, 160, 0.45); }
.lvl-tag { position: sticky; top: 82px; display: grid; place-content: center; gap: 2px; padding: 14px 0; border: 1px solid var(--color-border-strong); border-radius: 16px; background: rgba(108,191,60,0.1); color: var(--color-cyan-bright); font-size: 1.9rem; font-weight: 800; text-align: center; }
.lvl-tag small { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.lvl-techs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-content: start; }

.tech-card { position: relative; min-height: 168px; padding: 18px 14px 16px; display: grid; justify-items: center; align-content: start; gap: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(0,0,0,0.035), transparent 60%), rgba(255,255,255,0.55); color: var(--color-text); }
.tech-card.boss { border-color: rgba(224, 90, 160, 0.3); }
.tc-name { max-width: 100%; font-size: 0.95rem; font-weight: 750; line-height: 1.25; text-align: center; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cost-badge { position: absolute; top: 10px; right: 10px; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: rgba(108,191,60,0.16); border: 1px solid var(--color-border-strong); color: var(--color-cyan-bright); font-size: 0.8rem; font-weight: 800; }
.boss-dot { position: absolute; top: 12px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: #e05aa0; box-shadow: 0 0 8px rgba(224, 90, 160, 0.6); }

.status { min-height: 1.4em; margin-top: 18px; color: var(--color-muted); font-size: 0.86rem; text-align: center; }
.status .err { color: var(--color-danger); }
.loading { display: inline-flex; } .spinner { width: 14px; height: 14px; border: 2px solid rgba(108,191,60,0.16); border-top-color: var(--color-cyan); border-radius: 50%; animation: spin 0.65s linear infinite; }
.foot { margin: 26px 0 0; color: rgba(125,115,96,0.5); font-size: 0.72rem; text-align: center; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(60,78,112,0.14); backdrop-filter: blur(6px); }
.modal-card { position: relative; width: min(620px, 100%); max-height: 88vh; overflow: auto; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: linear-gradient(160deg, #fbf6ec, #f7f1e4); box-shadow: 0 40px 90px rgba(60,78,112,0.15); animation: pop 0.22s var(--ease); }
.modal-close { position: sticky; float: right; top: 0; width: 36px; height: 36px; margin: -6px -6px 0 0; border: 1px solid var(--color-border-2); border-radius: 10px; color: var(--color-muted); background: rgba(255,255,255,0.7); cursor: pointer; }
.modal-head { display: flex; align-items: center; gap: 16px; }
.mh-info { min-width: 0; display: grid; gap: 9px; }
.mh-info h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 800; letter-spacing: -0.03em; }
.mh-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lv-badge { padding: 2px 9px; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-cyan-bright); background: rgba(108,191,60,0.12); font-size: 0.7rem; font-weight: 750; }
.lore { margin: 18px 0 4px; color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; }
.block { margin-top: 22px; } .block h3 { margin: 0 0 12px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-cyan); }
.ul-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ul-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(255,255,255,0.4); font-size: 0.82rem; }
.ul-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: rgba(108,191,60,0.4) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: rgba(150,125,90,0.28); }
@media (max-width: 640px) {
  .lvl-row { grid-template-columns: 46px 1fr; }
  .lvl-tag { font-size: 1.1rem; top: 70px; }
  .lvl-content { grid-template-columns: 1fr; }
  .lvl-techs { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lvl-ancient { grid-column: 1; }
  .lvl-ancient:not(:empty) { border-left: 0; border-top: 2px dashed rgba(224, 90, 160, 0.45); padding-left: 0; padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }