/* Level Up English — app styles (self-hosted fonts, no external requests) */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Figtree;src:url(../fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(../fonts/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url(../fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(../fonts/figtree-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#151937; --ink-2:#2B3163; --ink-3:#3A4072; --paper:#F4F5FB; --card:#FFFFFF; --line:#E2E5F0; --line-2:#CDD1E4;
  --muted:#555B7A; --text-2:#393F60; --on-dark:#D4D7EE; --on-dark-2:#B9BEDD;
  --primary:#3F4BE0; --primary-d:#2A33A8; --primary-t:#E3E6FF; --amber:#E0A100; --amber-d:#A87800; --amber-t:#FFF6DB;
  --danger:#B42318; --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --body:Figtree,ui-sans-serif,system-ui,sans-serif;
  --r:14px; --r-lg:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
body>main,.admin,.auth{flex:1 0 auto}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;line-height:1.1;margin:0}
h1{font-weight:800;font-size:clamp(32px,4.4vw,52px);letter-spacing:-.02em}
h2{font-weight:700;font-size:clamp(20px,2.2vw,26px)}
h3{font-weight:700;font-size:19px}
p{margin:0}
a{color:var(--primary)}a:hover{color:var(--primary-d)}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)} .small{font-size:14px} .strong{font-weight:700}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.eyebrow-amber{color:var(--amber)}
:focus-visible{outline:3px solid #A9B0FF;outline-offset:2px}
.ico{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:40px;height:40px;stroke:#8E94C2}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;border:0;font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-d)}
.btn-primary:hover{color:#fff;background:#3540cc}
.btn-amber{background:var(--amber);color:var(--ink);box-shadow:0 5px 0 var(--amber-d)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{background:#fff;color:var(--danger);border:1.5px solid #F1B4AE}
.btn-danger:hover{background:#FEF3F2;color:var(--danger)}
.btn-lg{min-height:56px;font-size:17px;border-radius:14px}
.btn-sm{min-height:40px;padding:0 14px;font-size:14px}
.btn-xs{min-height:36px;padding:0 10px;font-size:13px;border-radius:9px}
.link-btn{background:none;border:0;padding:8px 4px;font:inherit;color:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Chips & level colours */
.chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-weight:700;font-size:14px;line-height:1.2}
.chip-lg{padding:8px 14px;border-radius:12px;font-family:var(--display);font-weight:800;font-size:22px}
.chip-muted{background:var(--line);color:var(--muted)}
.lv-A1{background:#0B7F72;color:#fff}.lv-A2{background:#2E7D3A;color:#fff}.lv-B1{background:#E0A100;color:#151937}
.lv-B2{background:#C2511A;color:#fff}.lv-C1{background:#B8304D;color:#fff}.lv-C2{background:#6A32C9;color:#fff}
.lv-text-A1{color:#0B7F72}.lv-text-A2{color:#2E7D3A}.lv-text-B1{color:#151937}.lv-text-B2{color:#C2511A}.lv-text-C1{color:#B8304D}.lv-text-C2{color:#6A32C9}
.lv-tint-A1{background:#DCEFEC;color:#0B5F55}.lv-tint-A2{background:#DFEFE1;color:#245F2D}.lv-tint-B1{background:#FCE8A6;color:#5C4600}
.lv-tint-B2{background:#F8E1D5;color:#8F3A12}.lv-tint-C1{background:#F5DCE2;color:#8E2239}.lv-tint-C2{background:#E8DEF8;color:#4E2399}
.lv-border-A1{border-color:#0B7F72!important}.lv-border-A2{border-color:#2E7D3A!important}.lv-border-B1{border-color:#E0A100!important}
.lv-border-B2{border-color:#C2511A!important}.lv-border-C1{border-color:#B8304D!important}.lv-border-C2{border-color:#6A32C9!important}
.lv-bg-A1{background:#0B7F72;color:#fff}.lv-bg-A2{background:#2E7D3A;color:#fff}.lv-bg-B1{background:#E0A100;color:#151937}
.lv-bg-B2{background:#C2511A;color:#fff}.lv-bg-C1{background:#B8304D;color:#fff}.lv-bg-C2{background:#6A32C9;color:#fff}
.sk-tint-vocabulary{background:#E3E6FF;color:#2A33A8}.sk-tint-grammar{background:#DDF3EE;color:#0B5F55}.sk-tint-listening{background:#FDE7DC;color:#8F3A12}
.sk-tint-reading{background:#EDE3FC;color:#4E2399}.sk-tint-writing{background:#F6D0D9;color:#8E2239}.sk-tint-speaking{background:#FCE8A6;color:#5C4600}
.sk-text-vocabulary{color:#2A33A8}.sk-text-grammar{color:#0B5F55}.sk-text-listening{color:#8F3A12}.sk-text-reading{color:#4E2399}.sk-text-writing{color:#8E2239}.sk-text-speaking{color:#5C4600}

/* Avatars */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex:none;border:3px solid var(--amber);font-family:var(--display);font-weight:800;color:var(--ink)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-xs{width:32px;height:32px;border-width:2px;font-size:14px}.avatar-sm{width:44px;height:44px;font-size:18px}
.avatar-md{width:64px;height:64px;font-size:26px}.avatar-xl{width:220px;height:220px;border-width:6px;font-size:84px}
.bg-FCE8A6{background:#FCE8A6}.bg-CDEFE8{background:#CDEFE8}.bg-D6DCFF{background:#D6DCFF}.bg-FBD9C8{background:#FBD9C8}.bg-F6D0D9{background:#F6D0D9}.bg-E2D5FA{background:#E2D5FA}

/* Brand */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-family:var(--display);font-weight:800;font-size:20px}
.brand:hover{color:inherit}
.brand-stack{display:flex;flex-direction:column;line-height:1.15}
.brand-stack small{font-family:var(--body);font-weight:500;font-size:13px;color:var(--on-dark-2)}
.brand-lg{font-size:22px}
.logo-mark{width:42px;height:42px;border-radius:12px;background:var(--amber);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:18px;flex:none}
.logo-img{background:none;object-fit:contain}

/* Flash */
.flash{padding:14px 16px;border-radius:12px;font-weight:600;font-size:15px;margin-bottom:16px;border:1.5px solid}
.flash-ok{background:#E7F6F1;border-color:#9ED6C6;color:#0B5F55}
.flash-err{background:#FEF3F2;border-color:#F1B4AE;color:#8A1C12}
.flash-info{background:var(--amber-t);border-color:#F0D58A;color:#5C4600;word-break:break-word}

/* Forms */
.form{display:flex;flex-direction:column;gap:18px}
.form-head{display:flex;flex-direction:column;gap:6px}
.form-head h2{font-size:clamp(28px,3vw,36px);font-weight:800}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label,.pick legend{font-weight:600;font-size:14px}
.field-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;min-height:50px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
textarea{padding:12px 14px;min-height:72px;resize:vertical}
input[type=file]{font:inherit;font-size:14px;padding:10px 0}
input:focus,select:focus,textarea:focus{outline:3px solid #A9B0FF;outline-offset:1px;border-color:var(--primary)}
.hint{font-size:13px;color:var(--muted)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2);line-height:1.45}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--primary);flex:none}
.code-input{font-family:var(--display)!important;font-weight:800!important;font-size:28px!important;letter-spacing:.3em;text-transform:uppercase;text-align:center;min-height:64px!important;border:2px solid var(--primary)!important;max-width:360px}
.note-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;padding:16px;border-radius:14px;background:#fff;border:1.5px solid var(--line);color:var(--text-2);font-size:15px}
.note-warn{background:var(--amber-t);border-color:#F0D58A;color:#5C4600}

/* Auth */
.auth{display:flex;flex-wrap:wrap;min-height:100vh}
.auth-hero{flex:1 1 560px;min-width:0;background:var(--ink);color:#fff;padding:48px 56px;display:flex;flex-direction:column;gap:36px}
.auth-copy{display:flex;flex-direction:column;gap:16px;max-width:540px}
.auth-copy h1{font-size:clamp(36px,4.6vw,56px);line-height:1.02}
.auth-copy p{font-size:18px;color:var(--on-dark)}
.hero-ph{flex:1;min-height:240px;border-radius:24px;border:2px dashed var(--ink-3);display:flex;align-items:center;justify-content:center;text-align:center;color:#8E94C2;font-size:14px;padding:24px}
.hero-ph-img{flex:1;min-height:240px;width:100%;object-fit:contain;object-position:center}
.lv-row{display:flex;gap:8px;flex-wrap:wrap}
.auth-main{flex:1 1 480px;min-width:0;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth-box{width:100%;max-width:440px}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;background:#E6E8F4;border-radius:14px}
.seg a{min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--muted);font-weight:600;text-decoration:none}
.seg a.is-on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(21,25,55,.15)}
.steps{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px}
.step b{width:28px;height:28px;border-radius:50%;background:#E6E8F4;display:inline-flex;align-items:center;justify-content:center}
.step.is-on b{background:var(--primary);color:#fff}.step.is-done b{background:#0B7F72;color:#fff}
.step-line{flex:1;min-width:16px;height:2px;background:var(--line)}
.class-found{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px}
.class-found div{display:flex;flex-direction:column}

/* Top bar (student) */
.topbar{background:var(--ink);color:#fff}
.topbar-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.topnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.topnav a{padding:11px 16px;border-radius:10px;color:var(--on-dark);font-weight:600;text-decoration:none}
.topnav a:hover{color:#fff;background:var(--ink-2)}
.topnav a.is-active{background:var(--ink-2);color:#fff;font-weight:700}
.me{display:flex;align-items:center;gap:12px}
.me form{margin:0}.me .link-btn{color:var(--on-dark);font-size:14px}
.me-name{font-weight:600}

/* Hero band */
.hero-band{background:var(--ink);color:#fff;padding:32px 0 120px}
.hero-in{display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.hero-copy{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.hero-copy p{font-size:18px;color:var(--on-dark);max-width:580px}
.hero-copy strong{color:#fff}
.hero-side-ph{flex:1 1 280px;min-width:0;height:200px;border-radius:24px;border:2px dashed var(--ink-3);display:flex;align-items:center;justify-content:center;color:#8E94C2;font-size:14px;text-align:center;padding:16px}
.hero-side-ph-img{flex:1 1 280px;min-width:0;height:220px;object-fit:contain}
.lift{margin-top:-88px;padding-bottom:64px;display:flex;flex-direction:column;gap:40px;width:100%}
.page-pad{padding-top:32px;padding-bottom:64px;display:flex;flex-direction:column;gap:28px;width:100%}

/* Cards */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg)}
.card-pad{padding:28px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.block{display:flex;flex-direction:column;gap:0}
.map{box-shadow:0 14px 40px rgba(21,25,55,.10);border:0}
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.island{border-radius:20px;padding:16px;background:var(--paper);border:2px solid var(--line);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.island.is-locked{opacity:.7}
.island.is-open:hover{border-color:var(--primary);color:var(--ink)}
.island.is-current{background:var(--amber-t);border:3px solid var(--amber);box-shadow:0 8px 0 var(--amber);transform:translateY(-6px)}
.island.is-current:hover{color:var(--ink)}
.island-ph{height:84px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:12px;text-align:center;padding:6px}
.island-ph-img{height:96px;width:100%;object-fit:contain}
.island-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.island-lv{font-family:var(--display);font-weight:800;font-size:24px}
.island-sub{color:var(--muted)}
.is-current .island-sub{color:#5C4600;font-weight:600}
.badge-dark{white-space:nowrap;padding:4px 8px;font-size:11px!important;border-radius:99px;background:var(--ink);color:#fff;font-size:12px;font-weight:700}

.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.game-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1.5px solid var(--line);display:flex;flex-direction:column}
.game-cover{height:160px;position:relative;display:flex;align-items:center;justify-content:center}
.cover-ph{font-size:13px}.cover-ph-img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:99px;background:var(--ink);color:#fff;font-size:12px;font-weight:700}
.tag-played{background:#0B7F72}
.game-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.game-body .btn{margin-top:auto}
.kicker{font-size:12px;font-weight:700;letter-spacing:.05em}
.empty-card{border-radius:var(--r-lg);border:1.5px dashed #C3C8E0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:10px;min-height:280px;background:rgba(255,255,255,.5)}
.empty-ph{width:140px;height:100px;border-radius:16px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
.empty-ph-img{width:180px;height:130px;object-fit:contain}
.skills-card{display:flex;flex-direction:column;gap:12px}
.skill-list{list-style:none;margin:0;padding:0}
.skill-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #EEF0F8}
.skill-list li:last-child{border-bottom:0}
.skill-list a{color:var(--ink);text-decoration:none;font-weight:600}

/* Level page */
.level-band{padding:40px 0}
.level-in{display:flex;gap:32px;flex-wrap:wrap;align-items:center}
.level-badge{width:120px;height:120px;border-radius:28px;background:var(--ink);color:var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:52px;flex:none}
.level-copy{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:8px}
.level-copy .eyebrow{color:inherit;opacity:.85}
.level-copy p{font-size:17px;opacity:.9}
.level-ph{flex:1 1 260px;height:150px;border-radius:22px;border:2px dashed currentColor;opacity:.7;display:flex;align-items:center;justify-content:center;font-size:13px;text-align:center;padding:12px}
.level-ph-img{flex:1 1 260px;height:170px;object-fit:contain;min-width:0}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{min-height:44px;padding:0 18px;border-radius:99px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;text-decoration:none}
.pill:hover{border-color:var(--primary);color:var(--primary)}
.pill.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}

/* Avatar studio */
.studio{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.studio-preview{flex:1 1 340px;min-width:0;background:var(--ink);border-radius:28px;padding:32px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.studio-who{display:flex;flex-direction:column;gap:2px}
.studio-who strong{font-family:var(--display);font-size:26px}
.studio-who span{color:var(--on-dark)}
.field-dark{align-self:stretch;text-align:left}
.field-dark label{color:var(--on-dark)}
.field-dark input{background:#222852!important;border-color:var(--ink-3)!important;color:#fff!important}
.studio-preview .btn{align-self:stretch}
.studio-pick{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:28px}
.pick{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.pick legend{font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:14px}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px}
.av-opt input,.bg-opt input{position:absolute;opacity:0;width:1px;height:1px}
.av-face{height:104px;border-radius:20px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;overflow:hidden}
.av-face img{width:100%;height:100%;object-fit:cover}
.av-opt input:checked+.av-face{border:3px solid var(--primary);background:var(--primary-t);color:var(--primary-d);box-shadow:0 5px 0 var(--primary)}
.av-opt input:focus-visible+.av-face,.bg-opt input:focus-visible+.bg-dot{outline:3px solid #A9B0FF;outline-offset:2px}
.bg-row{display:flex;gap:12px;flex-wrap:wrap}
.bg-dot{display:block;width:52px;height:52px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line-2);cursor:pointer}
.bg-opt input:checked+.bg-dot{box-shadow:0 0 0 3px var(--ink)}
.account{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.danger-zone{border-top:1.5px solid var(--line);padding-top:18px;margin-top:6px;display:flex;flex-direction:column;gap:12px}

/* Admin */
.admin{display:flex;flex-wrap:wrap;min-height:100vh}
.admin-side{flex:1 1 240px;max-width:100%;background:var(--ink);color:#fff;padding:24px 16px;display:flex;flex-direction:column;gap:24px}
.admin-side .brand{font-size:17px;padding:0 8px}
.admin-side .logo-mark{width:38px;height:38px;border-radius:10px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav a,.side-link{padding:12px 14px;border-radius:10px;color:var(--on-dark);font-weight:600;text-decoration:none;background:none;border:0;font:inherit;text-align:left;width:100%;cursor:pointer}
.side-nav a:hover,.side-link:hover{background:var(--ink-2);color:#fff}
.side-nav a.is-active{background:var(--ink-2);color:#fff;font-weight:700}
.side-nav form{margin:0}
.side-me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:0 8px;color:var(--on-dark);font-size:14px}
.admin-main{flex:999 1 560px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:28px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.page-head h1{font-size:clamp(28px,3vw,36px)}
.page-head p{margin-top:4px}
.block h2{margin-bottom:14px}
.code-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.code-card{display:flex;flex-direction:column;gap:10px;padding:18px}
.code-card.is-off{opacity:.6}
.code-card form{margin-top:auto}
.new-code{padding:18px;gap:12px;grid-row:span 2}
.code-big{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:.12em}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:8px}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar h2{flex:1;margin:0;min-width:160px}
.toolbar input{width:280px!important;max-width:100%;min-height:44px!important}
.toolbar select{width:auto!important;min-height:44px!important}
.table-wrap{overflow-x:auto}
.table{width:100%;min-width:860px;border-collapse:collapse;font-size:15px}
.table th{text-align:left;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1.5px solid var(--line)}
.table td{padding:12px;border-bottom:1px solid #EEF0F8;vertical-align:middle}
.who{display:flex;align-items:center;gap:10px}
.inline{display:flex;gap:6px;align-items:center;margin:0}
.inline select{width:auto!important;min-height:38px!important;padding:0 8px!important}
.status{padding:4px 10px;border-radius:99px;font-size:13px;font-weight:700;white-space:nowrap}
.status-active{background:#DDF3EE;color:#0B5F55}.status-disabled,.status-draft{background:#EEF0F8;color:var(--text-2)}.status-pending{background:#FFF1C7;color:#5C4600}
.actions{position:relative}
.actions summary{list-style:none}.actions summary::-webkit-details-marker{display:none}
.actions-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:5;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 12px 30px rgba(21,25,55,.15);display:flex;flex-direction:column;gap:4px;width:250px}
.actions-pop form{margin:0}
.del-form{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px!important}
.del-form input{min-height:38px!important}
.plain-list{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.more summary{cursor:pointer;color:var(--primary);padding:8px 0}
.form-inline{flex-direction:row;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.form-inline .field{flex:1 1 200px}
.level-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.level-tab{min-height:64px;border-radius:14px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:var(--ink)}
.level-tab.is-on{border-width:3px}
.level-tab .island-lv{font-size:20px}
.split{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.split-main{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:12px}
.split-side{flex:1 1 320px;min-width:0;padding:22px}
.split-side h2{margin-bottom:14px}
.game-row{padding:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.game-row form{margin:0}
.row-thumb{width:96px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.thumb-ph{font-size:11px}.thumb-ph-img{width:100%;height:100%;object-fit:cover}
.row-main{flex:1 1 200px;display:flex;flex-direction:column;gap:2px;min-width:0;word-break:break-word}
.row-edit{flex-basis:100%}
.row-edit summary{cursor:pointer;color:var(--primary);padding:6px 0}
.row-edit .form{margin-top:12px}
.del-inline{margin-top:12px!important}
.warn-text{color:var(--danger)}

/* Play */
.play-page{background:var(--ink)}
.play-bar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--ink);color:#fff;flex-wrap:wrap}
.play-bar .back{color:var(--on-dark);font-weight:600;text-decoration:none;padding:10px 0}
.play-bar strong{font-family:var(--display);font-size:18px;flex:1}
.play-frame{flex:1;width:100%;min-height:calc(100vh - 64px);border:0;background:#fff}
.play-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#0B7F72;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;z-index:10}

/* Prose (privacy) */
.prose{max-width:820px}
.prose h1{font-size:clamp(30px,4vw,42px)}
.prose h2{font-size:22px;margin-top:12px}
.prose p,.prose li{color:var(--text-2);line-height:1.65}
.prose ul{margin:0;padding-left:22px}

/* Footer */
.site-foot{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:22px 24px;font-size:13px;color:var(--muted)}
.admin-page .site-foot,.auth-page .site-foot{background:var(--paper)}

@media (max-width:640px){
  .auth-hero{padding:32px 20px;gap:24px}
  .hero-ph{min-height:160px}
  .card-pad{padding:20px}
  .admin-main{padding:20px 16px}
  .field-pair{grid-template-columns:1fr}
  .me-name{display:none}
  .avatar-xl{width:160px;height:160px;font-size:60px}
  .topbar-in{gap:10px}
  .topnav{order:3;flex-basis:100%}
  .topnav a{padding:10px 12px}
  .me{margin-left:auto}
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .island{padding:12px}
  .island-ph{height:64px}
  .hero-side-ph{display:none}
  .hero-band{padding-bottom:104px}
}
.hero-ph-img{border-radius:24px}
.island.is-locked .island-ph-img{filter:grayscale(.7);opacity:.75}