@font-face{font-family:mc;src:url(mc.ttf) format("truetype");font-display:block}
:root{
  --u:2px;--fs:24px;
  --white:#fff;--gray:#aaa;--dgray:#555;--yellow:#ff5;--gold:#fa0;--green:#5f5;--aqua:#5ff;--red:#f55;--pink:#f5f;--purple:#a0a;
  --dia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230b3b3f' d='M2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM1 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM1 4h1v1h-1zM7 4h1v1h-1zM2 5h1v1h-1zM6 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM4 7h1v1h-1z'/%3E%3Cpath fill='%234aedd9' d='M2 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1z'/%3E%3Cpath fill='%23d6fffb' d='M3 1h1v1h-1zM4 1h1v1h-1zM2 2h1v1h-1z'/%3E%3Cpath fill='%231a9e9a' d='M7 2h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM6 4h1v1h-1zM5 5h1v1h-1zM4 6h1v1h-1z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{background:#1b161e url(bg.png) 0 0/64px 64px;image-rendering:pixelated}
body{margin:0;min-height:100vh;color:var(--white);font:var(--fs)/calc(var(--fs) + 2px) mc,ui-monospace,monospace;-webkit-font-smoothing:none;font-smooth:never;
  text-shadow:.08333em .08333em 0 #3f3f3f;
  background:linear-gradient(180deg,rgba(9,6,16,.72),rgba(9,6,16,.35) 420px,rgba(9,6,16,.55))}
h1,h2,p,ol{margin:0;padding:0;font-weight:normal}
ol{list-style:none}
a{color:inherit}
[hidden]{display:none!important}

/* colour codes, each with its own quarter-brightness shadow like the game */
.gray{color:var(--gray);text-shadow:.08333em .08333em 0 #2a2a2a}
.dgray{color:var(--dgray);text-shadow:.08333em .08333em 0 #151515}
.yellow{color:var(--yellow);text-shadow:.08333em .08333em 0 #3f3f15}
.gold{color:var(--gold);text-shadow:.08333em .08333em 0 #2a2a00}
.green{color:var(--green);text-shadow:.08333em .08333em 0 #153f15}
.aqua{color:var(--aqua);text-shadow:.08333em .08333em 0 #153f3f}
.red{color:var(--red);text-shadow:.08333em .08333em 0 #3f1515}
.pink{color:var(--pink);text-shadow:.08333em .08333em 0 #3f153f}

.dia{display:inline-block;width:18px;height:16px;background:var(--dia) center/contain no-repeat;vertical-align:-2px;margin-left:4px}
.dia.big{width:36px;height:32px;margin:0}

/* ---------- boss bar countdown ---------- */
.bossbar{width:min(546px,calc(100% - 32px));margin:0 auto;padding-top:14px;text-align:center}
.bb-text{margin-bottom:6px;display:flex;justify-content:center;gap:12px;white-space:nowrap}
#cd-clock{min-width:5ch;text-align:left}
.bb{position:relative;height:15px;background:#3b1047;box-shadow:inset 0 3px 0 #561a66,inset 0 -3px 0 #2a0833}
.bb i{position:absolute;inset:0 auto 0 0;width:100%;background:#c63ae6;box-shadow:inset 0 3px 0 #ea8cf8,inset 0 -3px 0 #8a1aa5;transition:width 1s linear}
.bb::after{content:"";position:absolute;inset:3px 0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),rgba(30,0,40,.75) calc(10% - 3px) 10%)}
.bossbar.done .bb i{background:#5c5c5c;box-shadow:inset 0 3px 0 #8a8a8a,inset 0 -3px 0 #3a3a3a}

/* ---------- masthead: a world-select entry on the left, the pool tooltip on the right ---------- */
.mast{max-width:1240px;margin:0 auto;padding:36px 24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.world{display:flex;align-items:center;gap:18px;min-width:0}
.icon{width:72px;height:72px;flex:none;box-shadow:0 0 0 2px #000;
  background:#1b1420 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23c25e0c' d='M2 3h8v7H2z'/%3E%3Cpath fill='%23ff8a1f' d='M3 3h6v7H3z'/%3E%3Cpath fill='%23ffb14e' d='M3 4h1v4H3z'/%3E%3Cpath fill='%234f8a2b' d='M5 1h2v2H5z'/%3E%3Cpath fill='%23ffe26b' d='M4 5h1v1H4zm3 0h1v1H7zM4 7h4v1H4z'/%3E%3C/svg%3E") center/100% no-repeat}
h1{font-size:48px;line-height:52px;color:#fff;text-shadow:.08333em .08333em 0 #3f3f3f;white-space:nowrap}

/* item tooltip, as drawn by the game */
.tip{background:rgba(16,0,16,.94);border:2px solid;border-image:linear-gradient(rgba(80,0,255,.5),rgba(40,0,127,.5)) 1;box-shadow:0 0 0 2px rgba(16,0,16,.94);padding:10px 16px 10px 10px}
.pool{display:flex;gap:16px;align-items:center}
.slot{width:56px;height:56px;flex:none;display:grid;place-items:center;background:#8b8b8b;box-shadow:inset 2px 2px 0 #373737,inset -2px -2px 0 #fff}
.pool-lines{display:flex;flex-direction:column;gap:2px}
.pool-n{white-space:nowrap}
.aqua.big{font-size:48px;line-height:48px;text-shadow:4px 4px 0 #153f3f}

/* ---------- layout ---------- */
.layout{max-width:1240px;margin:0 auto;padding:0 24px 56px;display:grid;grid-template-columns:minmax(0,1fr) 404px;gap:28px;align-items:start}

/* inventory-style window */
.window{background:#c6c6c6;padding:10px 14px 14px;box-shadow:0 0 0 2px #000,inset 4px 4px 0 #fff,inset -4px -4px 0 #555;margin:2px}
.win-title{color:#404040;text-shadow:none;padding:0 2px 8px}
.win-inner{background:#202024;box-shadow:inset 2px 2px 0 #373737,inset -2px -2px 0 #fff;padding:20px 18px 20px}

/* advancement frame (used by toasts) */
.frame{position:relative;z-index:1;width:44px;height:44px;flex:none;display:grid;place-items:center;line-height:1;
  background:#9a9a9a;box-shadow:0 0 0 2px #000,inset 2px 2px 0 #d8d8d8,inset -2px -2px 0 #5a5a5a,inset 0 0 0 4px #7a7a7a}
.frame.got{background:#e3ad1d;box-shadow:0 0 0 2px #000,inset 2px 2px 0 #ffe27a,inset -2px -2px 0 #8a5a00,inset 0 0 0 4px #c58b00}

/* puzzle list, grouped by release slot */
.win-title #win-count{color:#707070;margin-left:8px}
.grp{margin-bottom:22px}
.grp h3{font-weight:normal;margin:0 0 6px;padding:0 4px}
.grp > ol{background:#141414;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #2e2e2e}
.grp.new > ol{background:#152015;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #3c9a3c}
.row{padding:12px 14px 12px 12px}
.row + .row{border-top:2px solid #2a2a2a}
.r1{display:grid;grid-template-columns:3ch minmax(0,1fr) auto;gap:14px;align-items:center}
.num{color:var(--gray);text-shadow:.08333em .08333em 0 #2a2a2a;text-align:right}
.meta .num,.meta .ttl{color:var(--gold);text-shadow:.08333em .08333em 0 #2a2a00}
.ttl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnt{white-space:nowrap}
.row .play{margin:10px 0 0 calc(3ch + 14px)}

/* locked slots: one quiet line each */
.lockln{display:grid;grid-template-columns:7ch minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:6px 4px}
.lockln.next{background:#141414;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #6b6420;padding:12px 14px;margin:4px 0 14px}
.lockln .when{text-align:right}

.btn{display:inline-block;text-decoration:none;color:#e0e0e0;text-shadow:.08333em .08333em 0 #383838;padding:7px 12px 8px;line-height:1;
  background:#6f6f6f;box-shadow:0 0 0 2px #000,inset 2px 2px 0 #a8a8a8,inset -2px -4px 0 #4a4a4a;white-space:nowrap}
.btn:hover,.btn:focus-visible{outline:none;color:#ffffa0;background:#7c7fbf;box-shadow:0 0 0 2px #fff,inset 2px 2px 0 #b6b9ee,inset -2px -4px 0 #50537f}

.nothing{text-align:center;padding:40px 0 30px}

/* ---------- HUD column ---------- */
.hud{display:flex;flex-direction:column;gap:28px}
.board{background:rgba(0,0,0,.42)}
.board h2{text-align:center;padding:4px 0 3px;background:rgba(0,0,0,.25)}
.board ol{padding:4px 0 6px}
.board li{display:flex;justify-content:space-between;gap:12px;padding:2px 10px 1px 10px}
.board .s{white-space:nowrap}

.chat{background:rgba(0,0,0,.5)}
.chat h2{text-align:center;padding:4px 0 3px;background:rgba(0,0,0,.25)}
.chat .ln{padding:6px 10px;border-top:2px solid rgba(255,255,255,.06);overflow-wrap:anywhere}
.chat .l2{padding-left:14px}
.chat .ln.new{animation:flash 2.6s ease-out}
.chat .ln.err{color:var(--red);text-shadow:.08333em .08333em 0 #3f1515}
@keyframes flash{0%{background:rgba(255,255,255,.28)}100%{background:transparent}}

/* ---------- toasts ---------- */
.toasts{position:fixed;top:12px;right:12px;z-index:9;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{width:360px;height:68px;display:flex;align-items:center;gap:14px;padding:0 14px 0 12px;
  background:#212121;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #5b5b5b,inset 0 0 0 4px #2f2f2f;animation:toast 5.5s cubic-bezier(.2,.8,.2,1) forwards}
.toast .frame{width:44px;height:44px}
.toast div{min-width:0}
.toast div span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:26px}
@keyframes toast{0%{transform:translateX(380px)}8%,88%{transform:none}100%{transform:translateX(380px)}}

/* ---------- small screens ---------- */
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--fs:20px}
  .bossbar{padding-top:10px}
  .mast{flex-direction:column;align-items:stretch;padding:24px 14px 20px;gap:18px}
  .icon{width:56px;height:56px}
  h1{font-size:32px;line-height:38px;white-space:normal}
  .pool{align-self:flex-start}
  .aqua.big{font-size:40px;line-height:40px}
  .layout{padding:0 10px 40px;gap:26px}
  .window{padding:8px 6px 8px}
  .win-inner{padding:14px 8px 14px}
  .row{padding:10px 10px}
  .r1{grid-template-columns:3ch minmax(0,1fr) auto;grid-template-areas:"num ttl cnt";gap:2px 10px}
  .r1 .num{grid-area:num}.r1 .ttl{grid-area:ttl;white-space:normal}.r1 .cnt{grid-area:cnt}
  .row .play{margin-left:calc(3ch + 10px)}
  .lockln{grid-template-columns:6ch minmax(0,1fr) auto;gap:10px}
  .lockln.next{padding:10px}
  .toasts{left:12px;right:12px;align-items:stretch}
  .toast{width:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.white{color:#fff;text-shadow:.08333em .08333em 0 #3f3f3f}
.silver{color:#d0d0d0;text-shadow:.08333em .08333em 0 #343434}
.bronze{color:#e08a3c;text-shadow:.08333em .08333em 0 #38220f}
.nw{white-space:nowrap}

.diff{margin-left:.3em}.diff::before{content:'['}.diff::after{content:']'}
.diff.easy{color:#55ff55;text-shadow:.08333em .08333em 0 #153f15}.diff.medium{color:#ffff55;text-shadow:.08333em .08333em 0 #3f3f15}.diff.hard{color:#ff5555;text-shadow:.08333em .08333em 0 #3f1515}