:root { --paper: #f6f1e7; --ink: #1d1b26; --day: #5cc45a; --danger: #ff3b30; --head: inherit; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--ink); font: 16px/1.35 var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
[hidden] { display: none !important; }

/* Fight HUD: boss name and health across the top, hearts and the clock under it. */
#hud { position: fixed; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top)) 10px 0; pointer-events: none; max-width: 640px; margin: 0 auto; }
#top { display: flex; align-items: center; gap: 8px; color: var(--paper); }
#chip { background: var(--day); color: var(--ink); font-weight: 800; font-size: 13px; letter-spacing: .08em; padding: 4px 8px; border-radius: 4px; border: 2px solid var(--ink); }
#boss-name { flex: 1; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 var(--ink); }
#top button { pointer-events: auto; width: 44px; height: 44px; border-radius: 8px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; }
#top button svg { width: 22px; height: 22px; fill: var(--ink); }
body:not(.muted) #mute-x { display: none; }
#bar { position: relative; height: 18px; margin-top: 8px; background: var(--ink); border: 2px solid var(--ink); border-radius: 5px; overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
#bar-fill { position: absolute; inset: 0; background: var(--day); transform-origin: left; transition: transform .12s; }
#bar u { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); left: 33.33%; }
#bar u + u { left: 66.66%; }
#row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--paper); font-weight: 800; text-shadow: 0 2px 0 var(--ink); }
#hearts { display: flex; gap: 4px; }
#hearts i { width: 20px; height: 18px; background: var(--danger); clip-path: path("M10 18 L1.5 9.5 A5 5 0 0 1 10 3.5 A5 5 0 0 1 18.5 9.5 Z"); }
#hearts i.off { background: rgba(246, 241, 231, .25); }
#clock { font-variant-numeric: tabular-nums; font-size: 17px; }
#clock.late { color: var(--danger); font-size: 22px; }
#status { font-size: 13px; letter-spacing: .03em; }
body[data-day="5"] #clock { font-size: 22px; }
/* The boss bar wears today's rule: a shield over it (Friday), locked (Saturday), gold while the weak point is open. */
#bar-shield { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .85) 0 6px, rgba(255, 255, 255, .5) 6px 12px); transform-origin: left; transform: scaleX(0); transition: transform .12s; }
#bar.guard #bar-fill { background: repeating-linear-gradient(-45deg, #8f8c99 0 6px, #6d6a78 6px 12px); }
#bar.weak { box-shadow: 0 0 0 3px #ffd23f, 0 3px 0 rgba(0, 0, 0, .25); }
#weak { position: relative; height: 0; margin-top: 0; overflow: hidden; border-radius: 5px; background: #fff6d0; opacity: 0; transition: height .12s, opacity .12s, margin .12s; }
#weak.on { height: 22px; margin-top: 5px; opacity: 1; border: 2px solid var(--ink); }
#weak-fill { position: absolute; inset: 0; background: #ffd23f; transform-origin: left; }
#weak b { position: relative; display: block; text-align: center; font-size: 12.5px; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; color: #1d1b26; }
/* Saturday's chore numbers, placed over the floor by main.js. */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#labels span { position: absolute; left: 0; top: 0; translate: -50% -50%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 15px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); opacity: .7; }
#labels span.next { opacity: 1; width: 34px; height: 34px; font-size: 19px; background: #ffd23f; animation: ready .6s infinite; }
#labels span.done { background: var(--ink); color: var(--paper); opacity: .6; }
/* Thursday's fake win card: it looks like the real one, then tears off. */
#fake { pointer-events: none; background: none; align-items: start; padding-top: 22vh; }
#fake .card { transition: transform .5s cubic-bezier(.5, 0, 1, .6), opacity .5s; transform-origin: top left; }
#fake.torn .card { transform: translateY(70vh) rotate(24deg); opacity: 0; }

#banner { position: fixed; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; font-size: 34px; font-weight: 900; color: var(--paper); text-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(0, 0, 0, .4); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; }
#banner.on { opacity: 1; transform: scale(1); }
#hint { position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); text-align: center; pointer-events: none; color: var(--paper); font-weight: 700; padding: 0 100px; text-shadow: 0 2px 0 var(--ink); transition: opacity .4s; }
#hint.off { opacity: 0; }

/* The second weapon: a thumb button on touch, a cooldown pill on desktop. */
#b-second { position: fixed; right: calc(14px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 15px; display: grid; place-content: center;
  background: conic-gradient(rgba(29, 27, 38, .55) calc(var(--cd, 0) * 360deg), transparent 0), var(--second, #4f7cf0); color: #fff; text-shadow: 0 1px 0 var(--ink); }
#b-second.ready { animation: ready .3s; }
/* The main weapon: not a button. It says what the weapon is doing, or what it needs. */
#b-main { position: fixed; left: calc(14px + env(safe-area-inset-left)); bottom: calc(26px + env(safe-area-inset-bottom)); min-width: 104px; padding: 7px 12px; border-radius: 12px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); pointer-events: none; display: grid; gap: 1px; background: #3a3744; color: #fff; text-shadow: 0 1px 0 var(--ink); font-weight: 800; font-size: 14px; line-height: 1.15; transition: background .12s; }
#b-main[hidden] { display: none; }
#b-main small { font-size: 12px; font-weight: 700; opacity: .9; }
#b-main.on { background: var(--main, #e5484d); }
#b-main.on small::before { content: '● '; }
#b-main.far { border-style: dashed; }
body.touch #hint { bottom: calc(122px + env(safe-area-inset-bottom)); padding: 0 24px; }
#b-second small { display: block; font-size: 11px; opacity: .85; }
@keyframes ready { 50% { transform: scale(1.14); } }
body:not(.touch) #b-second { pointer-events: none; width: auto; height: 44px; border-radius: 22px; padding: 0 16px; right: auto; left: calc(50% + 8px); bottom: 18px; grid-auto-flow: column; gap: 8px; align-items: center;
  background: linear-gradient(90deg, rgba(29, 27, 38, .55) calc(var(--cd, 0) * 100%), transparent 0), var(--second, #4f7cf0); animation: none; }
body:not(.touch) #hint { bottom: 74px; }
body:not(.touch) #b-main { left: auto; right: calc(50% + 8px); bottom: 18px; min-height: 44px; padding: 3px 14px; align-content: center; }
body:not(.touch) .touch-only { display: none; }

/* Screens are desk-calendar cards: a band in the day's colour, paper under it. */
.screen { position: fixed; inset: 0; display: grid; place-items: safe center; padding: 12px; background: rgba(29, 27, 38, .45); overflow: auto; }
.card { width: min(100%, 380px); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 8px 0 var(--ink); overflow: hidden; overflow: clip; }
.card header { background: var(--day); border-bottom: 3px solid var(--ink); padding: 10px 16px; display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; }
.card header small { font-size: 13px; letter-spacing: .04em; }
.body { padding: 14px 16px 16px; display: grid; gap: 10px; }
h1 { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.05; }
p { margin: 0; }
.small { font-size: 13px; opacity: .8; }
.label { font-weight: 800; font-size: 14px; margin-top: 2px; }
.over { font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
#m-intro, #r-line { font-style: italic; }
body.touch #m-hint { display: none; }
@media (max-height: 860px) { #menu .body { gap: 7px; padding: 10px 14px 12px; } #menu h1 { font-size: 26px; } #menu #weapons { gap: 6px; } #menu .wep { padding: 6px 8px; gap: 3px; } #menu .card header { padding: 7px 14px; font-size: 19px; } #menu .week span { height: 28px; } #menu .wep button span, #menu .wep > p { font-size: 12px; } #menu #m-intro { font-size: 15px; } }
#m-week s, #r-week-note s { opacity: .5; }
.body > button { min-height: 46px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; font-weight: 800; box-shadow: 0 3px 0 var(--ink); }
.body > button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.body > button.big { min-height: 54px; font-size: 20px; background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.body > button:disabled { opacity: .35; }
.links a { color: inherit; }

.week { display: flex; gap: 6px; }
.week span { flex: 1; height: 34px; border: 2px solid var(--ink); border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #fff; opacity: .55; }
.week span.today { opacity: 1; outline: 3px solid var(--ink); outline-offset: 1px; }
.week span.won { opacity: 1; color: #fff; text-shadow: 0 1px 0 var(--ink); }
.week span.missed { opacity: .4; text-decoration: line-through; }
.week .full { display: grid; place-items: center; font-size: 22px; color: #e0a800; }

#weapons { display: grid; gap: 8px; }
/* A weapon card: its name, what it does today, and two rows to tap: use it as the main, or as the second. */
.wep { display: grid; gap: 4px; padding: 8px 9px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; }
.wep > b { font-size: 16px; display: flex; align-items: center; gap: 7px; }
.wep > b i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--ink); background: var(--w); flex: none; }
.wep > b u { text-decoration: none; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; border: 1.5px solid var(--ink); white-space: nowrap; margin-left: auto; }
.wep > p { font-size: 12.5px; line-height: 1.25; opacity: .85; }
.wep button { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; text-align: left; min-height: 44px; padding: 4px 8px 4px 5px; border: 2px solid rgba(29, 27, 38, .3); border-radius: 7px; background: #fff; }
.wep button em { font-style: normal; font-weight: 900; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 4px 0; border-radius: 4px; border: 1.5px solid var(--ink); }
.wep button span { font-size: 12.5px; line-height: 1.2; }
.wep button.on { border-color: var(--ink); background: color-mix(in srgb, var(--w) 26%, #fff); box-shadow: 0 2px 0 var(--ink); }
.wep button.on em { background: var(--ink); color: var(--paper); }
.wep.picked { background: color-mix(in srgb, var(--w) 9%, #fff); }
.wep.locked { opacity: .6; border-style: dashed; }
.wep.locked > b i { background: repeating-linear-gradient(-45deg, #8f8c99 0 3px, #6d6a78 3px 6px); }
/* The weapon cards make the start card taller than a phone, so Fight stays in reach as it scrolls. */
#menu #b-fight { position: sticky; bottom: 6px; z-index: 1; }
#m-how b { text-transform: uppercase; letter-spacing: .04em; }
#r-unlock { padding: 8px 10px; border: 2px solid var(--ink); border-radius: 9px; background: color-mix(in srgb, var(--w, #ffd23f) 26%, #fff); font-size: 13px; line-height: 1.3; box-shadow: 0 3px 0 var(--ink); }
#r-unlock b { display: block; font-size: 16px; }
@media (hover: hover) { .wep button:hover, .body > button:hover:not(:disabled) { filter: brightness(1.06); } #top button:hover { background: #fff; } }

/* The end-screen question and the locked teaser: small, under everything else on the result card. */
#ask { display: grid; gap: 6px; padding-top: 8px; border-top: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
#votes { display: grid; gap: 6px; }
#votes button { min-height: 44px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; font-weight: 700; font-size: 14px; text-align: left; }
#votes button:active, #b-want:active { transform: translateY(1px); }
.body > #b-want { border-style: dashed; box-shadow: none; font-size: 14px; font-weight: 700; padding: 6px 10px; }
#b-want u { text-decoration: none; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; border: 1.5px solid var(--ink); margin-right: 4px; }
#ask-note a { color: inherit; }

#r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#r-stats div { border: 2px solid var(--ink); border-radius: 8px; background: #fff; padding: 6px 4px; text-align: center; font-size: 12px; }
#r-stats b { display: block; font-size: 18px; }

@media (min-width: 900px) { #hud { max-width: 560px; } #banner { font-size: 46px; } }
@media (max-height: 640px) { .body { gap: 7px; padding: 10px 14px 12px; } h1 { font-size: 24px; } }

/* Looks (src/looks.js, ?look=<id>): the colours and fonts are variables; these classes restyle the cards to match. */
h1, .card header, #banner, #boss-name, .body > button.big, #chip { font-family: var(--head); }
.look-soft .card { border-radius: 26px; border-width: 4px; box-shadow: 0 10px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .5); }
.look-soft .body > button, .look-soft #weapons .wep, .look-soft #top button { border-radius: 18px; border-width: 3px; }
.look-soft #bar { height: 22px; border-radius: 11px; border-width: 3px; }
.look-cut .card { border: 0; border-radius: 6px; box-shadow: 0 0 0 5px #fff, 9px 12px 0 5px rgba(0, 0, 0, .28); }
.look-cut .card header { border-bottom: 5px solid #fff; }
.look-cut .body > button, .look-cut #weapons .wep, .look-cut #top button, .look-cut #r-stats div, .look-cut .week span { border: 0; border-radius: 4px; box-shadow: 0 0 0 3px #fff, 4px 5px 0 3px rgba(0, 0, 0, .25); }
.look-cut #weapons { gap: 12px; }
.look-cut #chip, .look-cut #bar { border-color: #fff; }
.look-film .card { border-radius: 4px; border-width: 4px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--ink); filter: sepia(.55); }
.look-film .card header { background: var(--ink); color: var(--paper); }
.look-film h1 { letter-spacing: .02em; }
.look-film #hud, .look-film #b-second { filter: sepia(.7) saturate(.8); }
.look-comic .card { border-radius: 0; border-width: 4px; box-shadow: 9px 9px 0 var(--ink); transform: rotate(-.6deg); }
.look-comic .card header, .look-comic h1 { letter-spacing: .05em; }
.look-comic h1 { font-size: 40px; }
.look-comic .body > button, .look-comic #weapons .wep, .look-comic #top button, .look-comic #r-stats div, .look-comic .week span { border-radius: 0; box-shadow: 4px 4px 0 var(--ink); }
.look-comic .body { font-size: 18px; } .look-comic .wep button span, .look-comic .wep > p { font-size: 14.5px; } .look-comic .small { font-size: 15px; }
.look-ruled .card { border-radius: 3px; border-width: 2px; box-shadow: 5px 6px 0 rgba(42, 63, 158, .35); background: repeating-linear-gradient(var(--paper) 0 25px, #bcd2ec 25px 26px); }
.look-ruled .card header { background: color-mix(in srgb, var(--day) 55%, transparent); border-bottom-width: 2px; }
.look-ruled .body > button, .look-ruled #weapons .wep, .look-ruled #top button, .look-ruled #r-stats div, .look-ruled .week span { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: transparent; box-shadow: none; }
.look-ruled .body > button.big { background: var(--ink); }
.look-ruled .body { font-size: 18px; } .look-ruled .wep button span, .look-ruled .wep > p { font-size: 15px; } .look-ruled .small { font-size: 15.5px; }
.look-bit .card, .look-bit .body > button, .look-bit #weapons .wep, .look-bit .wep i, .look-bit .wep em, .look-bit #top button, .look-bit #r-stats div, .look-bit .week span, .look-bit #bar, .look-bit #chip { border-radius: 0; }
.look-bit .card { box-shadow: 8px 8px 0 var(--ink); }
.look-bit .card header, .look-bit #bar-fill, .look-bit #chip { background: var(--paper); }
.look-bit #bar-fill { background: repeating-linear-gradient(90deg, var(--paper) 0 3px, var(--ink) 3px 4px); }
.look-bit .body > button, .look-bit #weapons .wep, .look-bit #r-stats div, .look-bit .week span { background: var(--paper); }
.look-bit .wep i { background: var(--ink); } .look-bit #weapons .wep.picked { background: var(--paper); outline: 4px solid var(--ink); }
.look-bit .week span.won { background: var(--ink) !important; color: var(--paper); }
.look-bit #b-second { background: conic-gradient(var(--ink) calc(var(--cd, 0) * 360deg), var(--paper) 0); color: var(--ink); text-shadow: 1px 1px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper); border-radius: 0; border-color: var(--paper); box-shadow: none; }
.look-bit #hearts i.off { background: none; box-shadow: inset 0 0 0 20px rgba(0, 0, 0, .0); opacity: .25; background: var(--paper); }
.look-bit #hearts i { background: var(--paper); } .look-bit .screen { background: none; } .look-bit .body { font-size: 15px; }
body.look-bit:not(.touch) #b-second { background: linear-gradient(90deg, var(--ink) calc(var(--cd, 0) * 100%), var(--paper) 0); }
.look-film .card header { font-size: 17px; } .look-film .card header small { font-size: 11px; }
.look-ruled #top, .look-ruled #row, .look-ruled #banner, .look-ruled #hint { color: var(--ink); text-shadow: 0 0 6px var(--paper), 0 0 2px var(--paper); }
.look-bit #top, .look-bit #row, .look-bit #banner, .look-bit #hint { text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.look-bit .body > button.big { background: var(--ink); color: var(--paper); } .look-bit #banner { font-size: 26px; }
.look-bit #chip { text-shadow: none; }