:root { --ink: #1b1410; --cream: #fff3dc; --red: #d8402f; --gold: #ffc233; --scent: #7b4bff; --ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif, "Noto Color Emoji"; --head: "Anton", Impact, "Arial Narrow Bold", sans-serif, "Noto Color Emoji"; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #5a9a3c; color: var(--cream); font: 500 15px/1.3 var(--ui); overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
[hidden] { display: none !important; }
button { font: 700 15px var(--ui); color: var(--cream); background: var(--ink); border: 2px solid rgba(255,243,220,.25); border-radius: 12px; min-height: 46px; min-width: 46px; padding: 0 14px; cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; }
button.big { font: 400 22px var(--head); letter-spacing: .06em; background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); min-height: 52px; flex: 1; }
button.big.alt { background: var(--cream); }
.row { display: flex; gap: 8px; }

#top { position: fixed; top: 0; left: 0; right: 0; height: calc(50px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 12px; display: flex; align-items: center; gap: 8px; background: var(--ink); z-index: 5; }
#brand { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#brand b { font: 400 22px var(--head); letter-spacing: .05em; color: var(--gold); text-transform: uppercase; }
#jobname { margin-left: 10px; opacity: .85; font-size: 14px; }
#top button { min-height: 40px; }

#hud { position: fixed; top: calc(54px + env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; justify-content: center; background: rgba(27,20,16,.82); border-radius: 10px; padding: 5px 10px 9px; font-weight: 700; font-size: 14px; z-index: 4; pointer-events: none; }
#clock { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; background: rgba(255,243,220,.2); border-radius: 2px; }
#clock i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 2px; }
#brief { position: fixed; left: 10px; right: 10px; bottom: calc(var(--bottom, 150px) + 8px); text-align: center; pointer-events: none; z-index: 4; }
#brief span { display: inline-block; background: rgba(27,20,16,.86); border-radius: 10px; padding: 6px 12px; max-width: 520px; }
#brief span.warn { background: var(--red); }
#replaybar { position: fixed; top: calc(96px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--scent); border-radius: 20px; padding: 6px 14px; z-index: 4; white-space: nowrap; font-weight: 700; }
#replaybar a { color: #fff; }

#bottom { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--ink); z-index: 5; }
#planUi, #runUi { display: flex; flex-direction: column; gap: 8px; }
#runUi { flex-direction: row; }
#crew { display: flex; gap: 6px; }
#crew:empty { display: none; }
.card { flex: 1; min-width: 0; min-height: 58px; padding: 4px 6px; background: #2b211b; border: 2px solid rgba(255,243,220,.18); text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: center; font-size: 14px; line-height: 1.15; }
.card em { font: 26px/1 var(--ui); font-style: normal; grid-row: span 2; }
.card small { font-weight: 500; font-size: 11px; opacity: .75; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card.on { background: var(--cream); color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.card.locked { opacity: .4; }
#scatter { background: var(--red); color: #fff; }
#scatter span { font-family: var(--ui); font-weight: 700; font-size: 16px; }

#labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#labels div { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 400 17px var(--head); letter-spacing: .04em; color: #fff; text-shadow: 0 0 3px var(--ink), 0 1px 3px var(--ink), 0 0 6px var(--ink); }
#labels .tag { font: 700 12px var(--ui); background: rgba(27,20,16,.85); border-radius: 8px; padding: 2px 7px; text-shadow: none; }
#labels .pop { font-size: 26px; color: #ff5a44; animation: pop 1.6s ease-out forwards; }
#labels .pop.good { color: var(--gold); }
#labels .pop.them { font-size: 17px; color: #2fd6ee; }
@keyframes pop { 0% { opacity: 0; margin-top: 6px; } 12% { opacity: 1; } 100% { opacity: 0; margin-top: -46px; } }

#loupe { position: fixed; width: 128px; height: 128px; border: 4px solid var(--ink); border-radius: 8px; box-shadow: 0 4px 0 rgba(0,0,0,.3); z-index: 4; pointer-events: none; }
#loupe i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); }

.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 54vh; overflow-y: auto; background: var(--ink); border-top: 4px solid var(--gold); border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); z-index: 8; display: flex; flex-direction: column; gap: 10px; }
.sheet h2 { margin: 0; font: 400 30px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.sheet p { margin: 0; }
#resLine { font-weight: 700; font-size: 16px; background: #2b211b; border-radius: 10px; padding: 9px 10px; -webkit-user-select: text; user-select: text; }
#resSub { opacity: .85; font-size: 14px; }
.sheet .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#peek { min-height: 40px; font-size: 13px; font-weight: 500; padding: 0 10px; flex: none; }
#result { transition: transform .28s ease-out; }
#resStars { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
#resStars b { font-size: 24px; letter-spacing: .08em; color: var(--gold); }
#resStars span { opacity: .85; }
#resDaily { font-size: 14px; font-weight: 700; color: var(--gold); }
#jobsSum { font-size: 14px; opacity: .85; }
#jobList button span.gold { color: var(--gold); }
#labels .mark { font-size: 13px; background: rgba(216,64,47,.92); color: #fff; }
#labels .mark.good { background: rgba(27,20,16,.88); color: var(--gold); }
.sheet .row button:not(.big) { flex: 1; }
#vote p { font-size: 13px; opacity: .8; margin-bottom: 6px; }
#voteOpts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
#voteOpts::-webkit-scrollbar { display: none; }
#voteOpts button { flex: none; white-space: nowrap; }
#voteOpts button, #door { font-size: 13px; min-height: 44px; font-weight: 500; }
#door { border-style: dashed; }
#house { font-size: 14px; min-height: 44px; font-weight: 500; color: var(--gold); }
#more { margin: 2px -14px 0; } /* the row runs edge to edge of the sheet */
#more .links { padding: 0 14px; }
#mark { position: fixed; top: calc(55px + env(safe-area-inset-top)); left: 10px; padding: 3px 9px 3px 4px; border-radius: 9px; background: rgba(27,20,16,.72); color: var(--cream); pointer-events: none; z-index: 4; }
.links { font-size: 12px; opacity: .8; text-align: center; }
.links a, #doorMsg a { color: var(--gold); }
#jobList { display: flex; flex-direction: column; gap: 6px; }
#jobList button { text-align: left; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 500; }
#jobList button b { font: 400 18px var(--head); letter-spacing: .04em; }
#jobList button.cur { border-color: var(--gold); }
#toast { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); background: var(--ink); border: 2px solid var(--gold); border-radius: 12px; padding: 10px 16px; z-index: 20; font-weight: 700; }

/* Desktop: the blanket takes the height of the window and the controls move to the right margin. */
@media (min-width: 860px) and (min-height: 520px) {
  #top { right: auto; width: 300px; height: auto; flex-wrap: wrap; padding: 14px; border-radius: 0 0 18px 0; }
  #brand { flex-basis: 100%; white-space: normal; }
  #brand b { display: block; font-size: 38px; line-height: 1; }
  #jobname { margin: 4px 0 6px; display: block; font-size: 15px; }
  #mark { position: static; flex-basis: 100%; padding: 4px 0 0; background: none; opacity: .75; }
  #hud { top: 150px; left: 14px; right: auto; width: 272px; justify-content: flex-start; font-size: 15px; }
  #bottom { left: auto; right: 0; top: 50%; bottom: auto; transform: translateY(-50%); width: 300px; padding: 14px; border-radius: 18px 0 0 18px; }
  #crew { flex-direction: column; }
  .card small { -webkit-line-clamp: 3; font-size: 12px; }
  #runUi { flex-wrap: wrap; }
  #scatter { flex-basis: 100%; }
  #runUi button:not(.big) { flex: 1; }
  #brief { left: 14px; right: auto; width: 272px; bottom: 14px; text-align: left; }
  #peek { display: none; }
  .sheet { left: auto; right: 0; top: 0; bottom: 0; width: 340px; max-height: none; border-top: 0; border-left: 4px solid var(--gold); border-radius: 0; justify-content: center; }
  #replaybar { top: 14px; }
}
#resVs { font-weight: 700; font-size: 14px; color: #2fd6ee; }
#resVs.won { color: var(--gold); }

/* Round 6, the diorama look: the panels are smoked glass over the scene, lit gold at the top edge; the gold is
   foil, the red is lacquer. No sizes change here, only the finish. */
#top, #bottom, .sheet, #hud, #brief span, #mark, #toast {
  background: linear-gradient(180deg, rgba(40,26,16,.78), rgba(16,10,6,.86));
  -webkit-backdrop-filter: blur(12px) saturate(1.35); backdrop-filter: blur(12px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,214,120,.28), 0 10px 30px rgba(0,0,0,.38);
}
#brief span.warn { background: linear-gradient(180deg, #e2483a, #a8261b); }
#brand b, .sheet h2 {
  background: linear-gradient(180deg, #fff1b8 0%, #ffcf4a 42%, #f29a1c 58%, #ffd86a 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,180,40,.25));
}
button { background: linear-gradient(180deg, rgba(58,40,28,.9), rgba(28,18,12,.92)); border-color: rgba(255,220,150,.22); }
button.big { background: linear-gradient(180deg, #ffe680 0%, #ffc233 45%, #f0a01a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 0 var(--ink), 0 6px 18px rgba(255,170,30,.35); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
button.big.alt { background: linear-gradient(180deg, #fffaf0, #f3e2c2); }
#scatter { background: linear-gradient(180deg, #ff6a4d 0%, #d8402f 50%, #a92a1d 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 rgba(0,0,0,.45), 0 0 20px rgba(255,80,50,.35); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.card { background: linear-gradient(180deg, rgba(64,44,30,.85), rgba(34,22,14,.9)); }
.card.on { background: linear-gradient(180deg, #fffaf0, #f6e4c0); box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255,194,51,.4); }
#resLine { background: rgba(255,240,210,.08); box-shadow: inset 0 0 0 1px rgba(255,214,120,.18); }
#labels div { text-shadow: 0 0 3px #000, 0 2px 4px rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.5); }
#labels .tag { background: rgba(16,10,6,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#labels .pop { text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 16px rgba(255,90,68,.7); }
#labels .pop.good { text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 16px rgba(255,194,51,.75); }
#loupe { border-color: rgba(255,214,120,.85); box-shadow: 0 6px 20px rgba(0,0,0,.45); }

#labels .pop.them { text-shadow: 0 0 3px #000, 0 2px 0 #000, 0 0 12px rgba(47,214,238,.7); }