:root{
  --ink:#eaf2ff; --dim:#8fa3bd; --line:#22304a;
  --panel:#0d1626e6; --accent:#4fd0ff; --accent2:#7a5cff;
  --warn:#ff5d6c; --good:#5fe3a1;
  --ui: ui-sans-serif,system-ui,"Segoe UI",Inter,Roboto,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#05080f;color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.screen{position:fixed;inset:0;z-index:10}
.screen.pass{pointer-events:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #0b1220,0 2px 8px #000a}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #0b1220}

.logo{font-size:34px;font-weight:800;letter-spacing:.32em;
  background:linear-gradient(100deg,#fff,var(--accent) 55%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo.sm{font-size:19px;letter-spacing:.3em}

/* ---------- boot ---------- */
#boot{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0%,#12203a,#05080f 70%)}
.boot-inner{text-align:center;width:min(78vw,320px)}
.bar{height:2px;background:#1b2942;border-radius:2px;overflow:hidden;margin:22px 0 12px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .3s}
#boot-msg{font-size:12px;color:var(--dim);letter-spacing:.06em}

/* ---------- creator ---------- */
#creator{display:grid;grid-template-columns:1fr min(31vw,392px);pointer-events:none}
.cr-head{position:absolute;top:0;left:0;padding:22px 28px;display:flex;align-items:baseline;gap:14px;pointer-events:none}
.cr-title{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.cr-stage-hint{position:absolute;left:28px;bottom:22px;font-size:11px;color:#5d7092;letter-spacing:.08em;pointer-events:none}

.cr-panel{grid-column:2;pointer-events:auto;background:var(--panel);backdrop-filter:blur(22px);
  border-left:1px solid var(--line);display:flex;flex-direction:column;height:100%;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line);flex:0 0 auto}
.tab{flex:1;padding:16px 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border-bottom:2px solid transparent;transition:.16s}
.tab:hover{color:var(--ink)}
.tab.is-on{color:var(--ink);border-bottom-color:var(--accent)}
.pane{display:none;padding:20px;overflow-y:auto;flex:1 1 auto;scrollbar-width:thin;scrollbar-color:#26364f transparent}
.pane.is-on{display:block}
.pane::-webkit-scrollbar{width:8px}
.pane::-webkit-scrollbar-thumb{background:#26364f;border-radius:8px}
.hint{font-size:11.5px;line-height:1.55;color:var(--dim);margin-bottom:14px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid.hair{grid-template-columns:repeat(3,1fr)}
.grid.wide{grid-template-columns:repeat(2,1fr)}
.card{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#111c2e;
  border:1px solid var(--line);transition:.16s;display:block}
.grid.wide .card{aspect-ratio:4/3}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card span{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;font-size:9.5px;text-align:center;
  letter-spacing:.06em;background:linear-gradient(transparent,#000c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card:hover{border-color:#3d5a86;transform:translateY(-2px)}
.card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 6px 20px #0008}
.card.b{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
.card i.tag{position:absolute;top:5px;left:5px;font-size:8px;font-style:normal;letter-spacing:.1em;
  padding:2px 5px;border-radius:4px;background:#000a;color:var(--accent)}
.card.b i.tag{color:var(--accent2)}

.row{display:block;margin:16px 0}
.row>span{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.row>span b{color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0}
.row.big>span{font-size:12px}
.ends{display:flex;justify-content:space-between;font-size:10px;color:#5d7092;margin-top:2px}
.ends i{font-style:normal}
.mix{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0a1220}
.mini{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:4px 0}
.mini:hover{color:var(--ink)}
.sliders{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.sliders .row{margin:11px 0}
/* Preset names double as the "take just this one" button, so they have to look clickable and
   show which faces are actually in the mix. */
#blend-panel{margin-top:0;border-top:0}
#blend-panel .row>span i{font-style:normal;cursor:pointer;transition:.14s}
#blend-panel .row>span i:hover{color:var(--ink)}
#blend-panel .row>span i.on{color:var(--accent)}
.grp{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#5d7092;margin:18px 0 6px}
input[type=color]{width:40px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.swatches{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;transition:.14s}
.sw:hover{transform:scale(1.12)}
.sw.on{border-color:#fff}

.go{flex:0 0 auto;margin:0;padding:19px;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--accent2),var(--accent));color:#04121c;transition:.18s}
.go:hover{filter:brightness(1.12)}

/* ---------- hud ---------- */
.hud-top{position:absolute;top:0;left:0;right:0;padding:22px 28px;display:flex;justify-content:space-between;align-items:flex-start}
.score{display:flex;flex-direction:column;line-height:1}
.score b{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 2px 18px #000a}
.score span{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-top:5px}
.run{text-align:right;font-size:12px;letter-spacing:.12em;color:var(--dim);text-shadow:0 2px 10px #000}
.run #speed{font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.run i{display:block;font-style:normal;font-size:11px;color:var(--accent);margin-top:4px;min-height:14px}

.feed{position:absolute;right:28px;top:104px;width:250px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.feed div{font-size:14px;font-weight:700;letter-spacing:.04em;text-shadow:0 2px 12px #000;
  animation:pop .34s cubic-bezier(.2,1.5,.4,1) both}
.feed div small{font-size:11px;color:var(--accent);margin-left:7px;font-weight:600}
.feed div.fade{opacity:0;transform:translateX(18px);transition:.5s}
@keyframes pop{from{opacity:0;transform:translateX(26px) scale(.9)}to{opacity:1;transform:none}}

.combo{position:absolute;left:50%;top:16%;transform:translateX(-50%);text-align:center;text-shadow:0 3px 20px #000}
.combo b{display:block;font-size:26px;font-weight:800;letter-spacing:.05em}
.combo i{font-style:normal;font-size:15px;color:var(--accent);font-weight:700}

.yeti{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);text-align:center;
  animation:thump .5s infinite alternate ease-in-out}
.yeti b{display:block;font-size:19px;font-weight:800;letter-spacing:.4em;color:var(--warn);text-shadow:0 0 24px #ff5d6c88}
.yeti span{font-size:11px;color:var(--dim);letter-spacing:.16em}
@keyframes thump{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.07)}}

.wipeout{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#05080fb0;backdrop-filter:blur(3px)}
.wipeout b{display:block;font-size:40px;font-weight:800;letter-spacing:.2em;color:var(--warn)}
.wipeout span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}

.hud-help{position:absolute;left:28px;bottom:22px;font-size:11px;line-height:1.7;color:#5d7092;letter-spacing:.05em}
.hud-help b{color:var(--ink);font-weight:600}

@media (max-width:900px){
  #creator{grid-template-columns:1fr}
  .cr-panel{grid-column:1;position:absolute;left:0;right:0;bottom:0;height:56%;border-left:0;border-top:1px solid var(--line)}
  .cr-stage-hint{display:none}
  .score b{font-size:32px}
}

/* Required attribution — see CREATEGAMECHARACTERS.md. Removing it breaks the licence. */
.attrib{position:absolute;right:calc(min(31vw,392px) + 22px);bottom:22px;font-size:10px;letter-spacing:.1em;
  color:#5d7092;text-decoration:none;pointer-events:auto;transition:.15s}
.attrib:hover{color:var(--accent)}
@media (max-width:900px){ .attrib{right:auto;left:22px;bottom:calc(56% + 12px)} }