:root{
  --paper:#F7F7F7; --ink:#474747; --soft:#B5B5B5; --line:#DDDDDD; --panel:#EEEEEE;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#202124; --ink:#E6E6E6; --soft:#64676C; --line:#3A3B3F; --panel:#292A2E; color-scheme:dark; }
}
:root[data-theme="dark"]{ --paper:#202124; --ink:#E6E6E6; --soft:#64676C; --line:#3A3B3F; --panel:#292A2E; color-scheme:dark; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); background:var(--paper); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Pixelify Sans", ui-monospace, Menlo, Consolas, monospace; font-size:17px; line-height:1.4; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 16px 40px; }

/* pixel frame: square borders with notched corners */
.btn, .xpbar, .card, .toast, .sheet, .adder input, .field input, .field select{
  box-shadow:0 -2px 0 var(--ink),0 2px 0 var(--ink),-2px 0 0 var(--ink),2px 0 0 var(--ink);
}
.btn{ font:inherit; font-size:15px; line-height:1.2; color:var(--ink); background:var(--paper); border:0; padding:7px 12px; margin:3px; cursor:pointer; touch-action:manipulation; }
.btn:hover{ background:var(--panel); }
.btn:active{ transform:translateY(2px); }
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn:disabled{ color:var(--soft); background:var(--paper); cursor:default; transform:none;
  box-shadow:0 -2px 0 var(--soft),0 2px 0 var(--soft),-2px 0 0 var(--soft),2px 0 0 var(--soft); }
.btn.big{ font-size:22px; padding:10px 28px; min-width:9.5em; }
.link{ background:none; border:0; font:inherit; font-size:15px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 4px; align-self:flex-start; }
:focus-visible{ outline:2px dashed var(--ink); outline-offset:5px; }

.top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0 6px; flex-wrap:wrap; }
.brand{ font-family:"Silkscreen", ui-monospace, monospace; font-size:21px; }
.top nav{ display:flex; flex-wrap:wrap; }

.rank{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 0 4px; }
.crestbtn{ background:none; border:0; padding:0; cursor:pointer; display:block; }
.rank canvas{ display:block; }
.rankinfo{ position:relative; min-width:0; }
.rankline{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.lvl{ font-size:23px; font-weight:700; }
.rtitle{ opacity:.75; }
.xpbar{ position:relative; height:14px; margin:9px 2px 7px; background:var(--paper); overflow:hidden; }
.xpfill{ height:100%; width:0; background:var(--ink); transition:width .6s steps(12); }
.xpbar::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), var(--paper) calc(5% - 2px) 5%); }
.xpnums{ display:flex; justify-content:space-between; gap:10px; font-size:14px; opacity:.8; flex-wrap:wrap; }
#btnPrestige{ margin-top:10px; }
.float{ position:absolute; right:4px; top:-4px; font-weight:700; pointer-events:none; animation:rise 1.4s steps(8) forwards; }
@keyframes rise{ to{ transform:translateY(-26px); opacity:0; } }

.timer{ text-align:center; padding:20px 0 4px; }
.modes{ display:inline-flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.mode[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
.mode[aria-selected="true"]:disabled{ background:var(--soft); color:var(--paper); }
.clock{ font-family:"Silkscreen", ui-monospace, monospace; font-size:clamp(70px, 20vw, 140px); line-height:1; margin:20px 0 10px; font-variant-numeric:tabular-nums; }
.quest{ min-height:1.4em; margin:0 auto 16px; max-width:34ch; overflow-wrap:anywhere; }
.controls{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
.pips{ display:flex; gap:7px; justify-content:center; margin-top:16px; }
.pip{ width:10px; height:10px; box-shadow:inset 0 0 0 2px var(--ink); }
.pip.on{ background:var(--ink); }

.scene{ margin:20px -16px 0; overflow:hidden; }
.scene canvas{ display:block; margin:0 auto; }
.caption{ text-align:center; font-size:14px; opacity:.8; margin:6px 0 0; min-height:1.4em; }
@media (min-width:720px){ .scene{ margin:24px 0 0; } }

.board-head{ display:flex; justify-content:space-between; align-items:baseline; margin:30px 0 8px; gap:12px; }
.board-head h2{ font-size:21px; margin:0; font-weight:700; }
.board-head p{ margin:0; font-size:14px; opacity:.75; }
.board{ display:grid; grid-auto-flow:column; grid-auto-columns:min(300px, 84vw); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:6px 16px 16px; scroll-padding:0 16px; }
.col{ scroll-snap-align:start; background:var(--panel); padding:12px 10px 10px; min-height:150px; display:flex; flex-direction:column; }
.col.over{ outline:2px dashed var(--ink); outline-offset:-6px; }
.col h3{ margin:0 4px 8px; font-size:17px; display:flex; justify-content:space-between; }
.count{ opacity:.7; font-weight:400; }
.cards{ display:flex; flex-direction:column; gap:12px; padding:4px 3px; }
.card{ background:var(--paper); }
.card.dragging{ opacity:.4; }
.card-main{ all:unset; display:block; width:100%; box-sizing:border-box; padding:10px 12px; cursor:pointer; overflow-wrap:anywhere; }
.card-main:focus-visible{ outline:2px dashed var(--ink); outline-offset:4px; }
.card.active{ background:var(--ink); color:var(--paper); }
.card.done .ttl{ text-decoration:line-through; text-decoration-thickness:2px; }
.cpips{ display:flex; gap:4px; margin-top:7px; align-items:center; font-size:12px; }
.cpip{ width:7px; height:7px; background:currentColor; }
.card-actions{ display:flex; flex-wrap:wrap; gap:4px; padding:0 8px 10px; }
.card-actions .btn{ font-size:13px; padding:5px 8px; }
.card.active .card-actions .btn{ background:var(--ink); color:var(--paper);
  box-shadow:0 -2px 0 var(--paper),0 2px 0 var(--paper),-2px 0 0 var(--paper),2px 0 0 var(--paper); }
.card-edit{ padding:8px; }
.card-edit input, .adder input{ width:100%; font:inherit; color:var(--ink); background:var(--paper); border:0; padding:8px 10px; }
.card-edit input{ box-shadow:none; }
.empty{ font-size:14px; opacity:.75; margin:2px 4px 8px; }
.adder{ margin-top:12px; padding:0 3px; }
.adder input{ margin:3px 0 10px; }
.adder-row{ display:flex; gap:6px; }
@media (min-width:900px){
  .board{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding:6px 0 16px; }
}

.foot{ margin-top:26px; font-size:14px; opacity:.8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

.toasts{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:12px; align-items:center; z-index:30; pointer-events:none; width:min(92vw,420px); }
.toast{ background:var(--paper); padding:10px 14px; display:flex; align-items:center; gap:12px; animation:pop .25s steps(3); }
@keyframes pop{ from{ transform:translateY(8px); opacity:0; } }

.modal{ position:fixed; inset:0; background:color-mix(in srgb, var(--paper) 90%, transparent); display:flex; align-items:flex-start; justify-content:center; padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px)); overflow:auto; z-index:40; }
.modal[hidden]{ display:none; }
.sheet{ background:var(--paper); width:min(660px,100%); padding:20px; }
.sheet-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.sheet h2{ margin:0; font-size:23px; }
.sheet h3{ font-size:18px; margin:22px 0 10px; }
.sheet p{ margin:0 0 10px; max-width:60ch; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:16px 12px; }
.rankitem{ display:flex; flex-direction:column; align-items:center; text-align:center; font-size:14px; gap:4px; }
.rankitem.locked{ opacity:.85; }
.rankitem span{ opacity:.75; }
.field{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:2px solid var(--line); }
.field input[type=number], .field select{ font:inherit; color:var(--ink); background:var(--paper); border:0; padding:4px 8px; margin:2px; }
.field input[type=number]{ width:74px; }
.field input[type=checkbox]{ width:20px; height:20px; accent-color:var(--ink); }
#btnWipe{ margin-top:16px; }

@media (max-width:480px){
  .btn.big{ min-width:7.5em; padding:10px 22px; }
  .rank{ grid-template-columns:auto 1fr; }
  .banner{ grid-column:1 / -1; display:none; }
  .banner.show{ display:flex; gap:10px; align-items:center; }
}
.banner-label{ font-size:14px; }
@media (min-width:481px){ .banner-label{ display:none; } }
@media (prefers-reduced-motion: reduce){ .toast,.float{ animation:none; } .float{ display:none; } .xpfill{ transition:none; } }