/* Morfall — secondary pages (same cartoon style as the game: outlines, chunky buttons, landscape behind) */
:root{
  --ink:#1B1340; --inkDeep:#0F0A26; --bg:#2D2370; --panel:#2D2370; --panel2:#3B2F8F;
  --text:#FFFFFF; --muted:#C9C3F2; --danger:#FF5E57; --success:#3DDC84; --gold:#FFD23F; --accent:#3DA9FC;
  --display:'Lilita One',Impact,'Arial Black',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{color:var(--text);font-family:Nunito,system-ui,sans-serif;font-weight:700;min-height:100%;-webkit-tap-highlight-color:transparent}
body{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'><path d='M0 120 L40 80 70 105 110 50 150 95 190 60 230 100 270 45 310 90 350 65 400 100 V300 H0Z' fill='%2386B3D9'/><path d='M0 160 Q50 120 100 150 T200 140 T300 150 T400 135 V300 H0Z' fill='%236FAE7A'/><path d='M0 200 Q60 170 130 195 T260 185 T400 190 V300 H0Z' fill='%234F9A5A'/><path d='M0 240 Q80 215 170 238 T400 230 V300 H0Z' fill='%232F7A45'/></svg>") bottom/100% 45vh no-repeat fixed,linear-gradient(180deg,#5FB8F0,#BDE8FF 60%) fixed}
a{color:var(--gold)}

.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 12px}
.topbar h1{flex:1;text-align:center;font:26px var(--display);letter-spacing:.02em;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);text-transform:uppercase}
.back,.spacer{width:46px;height:46px;flex:none}
.back{display:flex;align-items:center;justify-content:center;border-radius:14px;color:var(--ink);background:#fff;border:3px solid var(--ink);
  box-shadow:inset 0 -5px 0 #C9CCE6,0 4px 0 var(--ink);transition:transform .08s}
.back:active{transform:translateY(3px);box-shadow:inset 0 -3px 0 #C9CCE6,0 1px 0 var(--ink)}
.back svg{width:24px;height:24px}

.page{max-width:560px;margin:0 auto;padding:10px 16px calc(env(safe-area-inset-bottom) + 40px)}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:4px solid var(--ink);border-radius:22px;padding:18px;margin-bottom:18px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 6px 0 var(--ink)}
.card h2{font:22px var(--display);letter-spacing:.01em;margin-bottom:10px;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.card p,.card li{color:var(--muted);font-size:14.5px;line-height:1.55}
.card p b,.card li b{color:#fff}
.card p + p{margin-top:8px}
.card ul{padding-left:18px}
.muted{color:var(--muted);font-size:13px}

.btn{position:relative;display:block;width:100%;border:3px solid var(--ink);border-radius:16px;padding:12px;font:21px var(--display);letter-spacing:.02em;cursor:pointer;
  color:#fff;-webkit-text-stroke:4.5px var(--ink);paint-order:stroke fill;background:var(--gold);margin-top:12px;text-align:center;text-decoration:none;
  box-shadow:inset 0 -6px 0 #E0A200,inset 0 3px 0 rgba(255,255,255,.5),0 5px 0 var(--ink);transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:inset 0 -3px 0 #E0A200,inset 0 3px 0 rgba(255,255,255,.5),0 1px 0 var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);-webkit-text-stroke:0;font:900 15px Nunito,sans-serif;box-shadow:inset 0 -5px 0 #C9CCE6,0 5px 0 var(--ink)}
.btn.danger{background:var(--danger);color:#fff;-webkit-text-stroke:4px var(--ink);box-shadow:inset 0 -6px 0 #C7302B,0 5px 0 var(--ink)}
.btn:disabled{opacity:.5}
.field{width:100%;border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:14px;padding:11px 14px;font:900 15px Nunito,sans-serif;margin-top:8px;outline:none}
.field::placeholder{color:#9A97B8}
.field:focus{box-shadow:0 0 0 3px rgba(61,169,252,.45)}
label.lbl{display:block;font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:12px;text-transform:uppercase;font-weight:900}
.msg{font-size:13.5px;font-weight:900;min-height:18px;margin-top:8px}
.msg.err{color:#FF8A84} .msg.ok{color:var(--success)}

/* stats grid */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{background:rgba(27,19,64,.45);border:3px solid var(--ink);border-radius:14px;padding:10px 12px;min-width:0}
.stat span{overflow-wrap:anywhere}
.stats.adm{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}                 /* admin: as many tiles per row as fit */
.stats.adm .stat{padding:10px}
.stats.adm .stat b{font-size:20px}
.stats.adm .stat span{font-size:10px;letter-spacing:.06em;line-height:1.25;display:block;margin-top:2px}
.stat b{display:block;font:24px var(--display)}
.stat span{font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

/* ranking */
.rank{width:100%;border-collapse:collapse;font-size:14px}
.rank th{font-size:11px;letter-spacing:.1em;color:var(--muted);text-align:left;padding:0 6px 8px;font-weight:600}
.rank td{padding:10px 6px;border-top:1px solid rgba(255,255,255,.06)}
.rank td.n,.rank th.n{text-align:right;font-family:var(--display)}
.rank tr.me td{background:rgba(255,210,63,.18)}
.rank .pos{width:38px;font-family:var(--display);font-weight:400}
.rank .pos svg{width:20px;height:20px;vertical-align:middle}
.rank .who{font-weight:600;word-break:break-all}
.board .who{word-break:normal;overflow-wrap:anywhere}          /* ranking: names stay on one line, only very long ones wrap */
.board td.n,.board th.n{white-space:nowrap;width:1%}                 /* numbers take only the room they need */
.board .pos{width:30px}
@media (max-width:420px){.board{font-size:13px}.board td{padding:9px 4px}.board th{padding:0 4px 8px}}
.gst{}   /* guests look like everyone else in the ranking (friendly generated names) */
.rank tr.me .gst{color:var(--text)}

/* toggles */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.row + .row{border-top:1px solid rgba(255,255,255,.06)}
.switch{position:relative;width:52px;height:30px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;border-radius:20px;background:rgba(27,19,64,.6);border:3px solid var(--ink);transition:.2s;cursor:pointer}
.switch i::after{content:'';position:absolute;left:1px;top:1px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-sizing:border-box;transition:.2s}
.switch input:checked + i{background:var(--success)}
.switch input:checked + i::after{transform:translateX(22px)}
input[type=range]{width:100%;accent-color:var(--accent)}

/* faq */
details{border-top:1px solid rgba(255,255,255,.06);padding:12px 0}
details:first-of-type{border-top:0}
summary{cursor:pointer;font-weight:900;font-size:15.5px;list-style:none}
summary::after{content:'+';float:right;color:var(--gold);font:20px/1 var(--display)}
details[open] summary::after{content:'–'}
details p{margin-top:8px}

/* admin */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:8px 6px;border-top:1px solid rgba(255,255,255,.06);text-align:left;vertical-align:middle}
.tbl th{color:var(--muted);font-size:11px;letter-spacing:.08em;border-top:0}
.tbl form{display:inline}
.mini{border:0;border-radius:8px;padding:6px 8px;font:600 11px Nunito,sans-serif;cursor:pointer;background:rgba(255,255,255,.1);color:var(--text)}
.mini.red{background:rgba(255,107,94,.2);color:var(--danger)}
.scroll{overflow-x:auto}
.pill{display:inline-block;font-size:10px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.1);color:var(--muted)}
.pill.on{background:rgba(107,255,184,.15);color:var(--success)}
.pill.ban{background:rgba(255,107,94,.18);color:var(--danger)}

/* confirmation modal */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(27,19,64,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal.show{display:flex}
.modal .card{width:100%;max-width:340px;text-align:center;margin:0}
.btn.danger.solid{background:var(--danger);color:#fff;border:0}

/* admin pagination + device */
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--muted)}
.pager a{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);color:var(--text);text-decoration:none}
.pager a.off{opacity:.3;pointer-events:none}
.dev{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.dev svg{width:13px;height:13px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.toolbar input.field{flex:1 1 100%}
.toolbar select.field{flex:1 1 0}
.toolbar .field{margin-top:0}
select.field{appearance:none;-webkit-appearance:none;max-width:44%}

.keyBox{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.06em;text-align:center;color:var(--ink);
  background:#fff;border:3px dashed var(--ink);border-radius:12px;padding:14px 8px;margin-top:10px;user-select:all;-webkit-user-select:all}

/* stage groups + stage names (profile) */
.swipe{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;align-items:flex-start}
.swipe::-webkit-scrollbar{display:none}
.swPage{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.pagerNav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.pgBtn{width:40px;height:40px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);
  color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pgBtn svg{width:22px;height:22px}
.pgBtn:disabled{opacity:.25;cursor:default}
.pgMid{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.pgLbl{font:14px var(--display);letter-spacing:.06em;color:var(--muted);white-space:pre}
.pgDots{display:flex;gap:6px}
.pgDots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer;transition:.2s}
.pgDots button.on{width:18px;border-radius:4px;background:var(--accent)}
.rank.totalRow{margin-top:10px}
.rank.totalRow td{border-top:1px solid rgba(255,255,255,.14)}
.stName{display:flex;align-items:center;gap:10px}
.stName b{font-family:var(--display)}
.stName small{display:block;font-size:11.5px;color:var(--muted)}
.stIco{width:30px;height:30px;flex:none;border-radius:9px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.stIco svg{width:15px;height:15px}
.stIco.k-run{color:#3DA9FC} .stIco.k-moving{color:#B388FF} .stIco.k-meteor{color:#FF9F5A} .stIco.k-twin{color:#6BFFB8} .stIco.k-tap{color:#FF8FAB} .stIco.k-orbit{color:#FFD166}
.swPage .rank,.rank.totalRow{table-layout:fixed}
.swPage .rank th:nth-child(2),.rank.totalRow td:nth-child(2){width:30%}
.swPage .rank th:nth-child(3),.rank.totalRow td:nth-child(3){width:22%}

/* admin: players' journey */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.chips a{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--muted);text-decoration:none;font-size:12px;font-weight:600}
.chips a.on{background:var(--gold);color:var(--ink)}
.stat b small{font-size:12px;color:var(--muted);font-weight:600}
h3.sub{font:15px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
.bar{height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--success)}
.funnel td{white-space:nowrap}

/* ranking: Adventure / Endless tabs */
.rankTabs{display:flex;gap:6px;margin:0 0 12px;background:rgba(27,19,64,.55);border:3px solid var(--ink);padding:4px;border-radius:999px}
.rankTabs a{flex:1;text-align:center;padding:7px 0 8px;border-radius:999px;text-decoration:none;color:var(--muted);font:15px var(--display);letter-spacing:.06em}
.rankTabs a.on{background:var(--gold);color:var(--ink)}
.rank.myRow{margin-top:10px;border-top:2px dashed rgba(255,255,255,.18)}
.rank.myRow td{border-top:0}
.swPage .rank.board{table-layout:auto}
.swPage .rank.board th{width:auto!important}