[hidden] { display: none !important; }
:root {
  --beige: #e8dcc4; --trim: #c9b48e; --lawn: #8db255; --sky: #cfe3ec; --ink: #3a3530; --orange: #e4572e;
  --paper: #f7f4ee; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--beige); color: var(--ink); font-family: var(--font); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
#app { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; }

#hud { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--paper); border-bottom: 2px solid var(--ink); position: relative; z-index: 3; }
#hud .val { display: flex; flex-direction: column; min-width: 0; position: relative; }
#hud small { font-size: 12px; font-weight: 700; letter-spacing: .02em; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#value { font-size: 28px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
#delta { position: absolute; left: calc(100% + 6px); bottom: 6px; background: var(--paper); padding: 0 2px; font-weight: 900; font-size: 13px; opacity: 0; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .5s; pointer-events: none; }
#delta.show { opacity: 1; }
#delta.up { color: var(--ink); } #delta.down { color: var(--orange); }
#spark { width: 120px; height: 36px; margin-left: auto; flex: none; }
.icon { background: none; font-size: 12px; font-weight: 700; padding: 0 6px; min-height: 44px; min-width: 44px; opacity: .75; }

#stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#c.hover { cursor: pointer; }
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stamp { position: absolute; transform: translate(-50%, -50%) rotate(-14deg) scale(2.4); opacity: 0; border: 4px solid var(--orange); color: var(--orange); font-weight: 900; font-size: 26px; letter-spacing: .08em; padding: 2px 10px; border-radius: 6px; background: rgba(247, 244, 238, .55); transition: transform .16s cubic-bezier(.2, 1.6, .4, 1), opacity .12s; white-space: nowrap; }
.stamp.in { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; }
.stamp.out { opacity: 0; transition: opacity .4s; }
.stamp.ink { border-color: var(--ink); color: var(--ink); }
#toast { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.letter { max-width: 340px; background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; padding: 8px 12px; font-size: 15px; line-height: 1.3; box-shadow: 3px 3px 0 var(--ink); transform: translateY(-8px) rotate(-1deg); opacity: 0; transition: transform .25s, opacity .25s; }
.letter.in { transform: none; opacity: 1; }
.letter small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin-bottom: 2px; }
.letter.bad { border-color: var(--orange); box-shadow: 3px 3px 0 var(--orange); }

#bar { background: var(--paper); border-top: 2px solid var(--ink); padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); position: relative; z-index: 3; }
#plate { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; }
#hate { display: inline-flex; gap: 3px; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#hate i { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 2px; display: inline-block; }
#hate i.on { background: var(--ink); }
#hint { margin: 4px 0 8px; font-size: 14px; min-height: 18px; opacity: .8; }
.row { display: flex; gap: 8px; }
.primary, .ghost { min-height: 48px; border-radius: 10px; font-weight: 800; font-size: 16px; padding: 0 14px; }
.primary { background: var(--ink); color: var(--paper); flex: 1; }
.ghost { background: transparent; border: 2px solid var(--ink); }
.small { min-height: 44px; font-size: 14px; padding: 0 10px; }
.kbd { display: none; font-size: 11px; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; opacity: .7; vertical-align: 2px; }
body.keys .kbd { display: inline-block; }

#sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 70%; background: var(--paper); border-top: 2px solid var(--ink); border-radius: 14px 14px 0 0; z-index: 6; transform: translateY(105%); transition: transform .25s; display: flex; flex-direction: column; box-shadow: 0 -6px 0 rgba(58, 53, 48, .12); touch-action: none; }
#sheet.open { transform: none; }
#sheetHead { display: flex; align-items: center; gap: 8px; padding: 14px 12px 8px; position: relative; }
#sheetHead b { flex: 1; font-size: 16px; }
.grip { position: absolute; left: 50%; top: 5px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--ink); opacity: .35; }
#laws { margin: 0; padding: 0 14px 18px 38px; overflow: auto; font-size: 15px; line-height: 1.35; touch-action: pan-y; }
#laws li { padding: 6px 0; border-bottom: 1px dashed rgba(58, 53, 48, .25); }
#laws li b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
#laws li.new b::after { content: " · new"; color: var(--orange); opacity: 1; }

#card { position: fixed; left: 8px; right: 8px; top: calc(76px + env(safe-area-inset-top)); z-index: 7; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 12px; box-shadow: 4px 4px 0 var(--ink); max-width: 460px; margin: 0 auto; }
#cardTitle { font-size: 18px; }
#cardText { margin: 4px 0 8px; font-size: 16px; }
.ask { margin: 0 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
#chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.chip { min-height: 48px; text-align: left; padding: 6px 12px; border-radius: 10px; background: var(--beige); border: 2px solid var(--ink); font-size: 15px; line-height: 1.25; }
.chip b { margin-right: 4px; }
.chip .kbd { float: right; }
#leave { width: 100%; }

/* the ruler: a tray at the edge of the picture, the ruler standing in it, a loupe to read it */
#tray { position: absolute; right: 8px; bottom: 8px; z-index: 4; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; touch-action: none; cursor: grab; }
#tray i { width: 52px; height: 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 5px) top / 100% 5px no-repeat, #f2d16b; transition: opacity .15s; }
#tray.empty i { opacity: .15; }
#tray .kbd { margin-left: 0; }
/* the fake door: a locked second slot in the tray, and what it says when tapped */
#tray2 { position: absolute; right: 150px; bottom: 8px; z-index: 4; min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--paper); border: 2px dashed var(--ink); border-radius: 10px; font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); opacity: .72; cursor: pointer; }
#door { position: absolute; right: 8px; bottom: 66px; z-index: 6; max-width: 260px; padding: 10px 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); font-size: 14px; line-height: 1.35; }
#door p { margin: 0 0 6px; } #door p:last-child { margin: 0; }
#door .row { display: flex; gap: 8px; flex-wrap: wrap; }
#door button { min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: #f2d16b; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; }
#door button[data-close] { background: transparent; }
#door a { color: var(--ink); font-weight: 800; }
#ruler { position: fixed; z-index: 5; transform-origin: 0 100%; display: none; touch-action: none; cursor: grab; filter: drop-shadow(2px 2px 0 rgba(58, 53, 48, .35)); }
#ruler.on { display: block; }
#ruler canvas, #loupe canvas { display: block; }
#loupe { position: fixed; z-index: 8; width: 128px; height: 128px; display: none; pointer-events: none; filter: drop-shadow(3px 3px 0 rgba(58, 53, 48, .8)); }
#loupe.on { display: block; }
.finger { position: fixed; z-index: 8; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(58, 53, 48, .35); border: 2px solid var(--paper); pointer-events: none; display: none; }
.finger.on { display: block; }
body.measuring #card { opacity: .12; pointer-events: none; }
#card { transition: opacity .15s; }
#measure { margin: 0 0 8px; }
#measure canvas { display: block; width: 100%; height: 84px; border: 2px solid var(--ink); border-radius: 10px; margin-bottom: 4px; }
#measure p { margin: 0; font-size: 13px; font-weight: 700; opacity: .75; }

#modal { position: fixed; inset: 0; z-index: 9; background: rgba(58, 53, 48, .42); display: flex; align-items: center; justify-content: center; padding: 14px; }
.panel { background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); padding: 16px; width: 100%; max-width: 440px; max-height: calc(100% - 8px); overflow: auto; }
.panel h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.02em; line-height: 1.05; }
.panel h2 { margin: 0 0 8px; font-size: 22px; }
.panel p { margin: 6px 0; font-size: 16px; line-height: 1.4; }
.panel .big { font-size: 20px; font-weight: 900; }
.panel .o { color: var(--orange); }
.panel .stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.panel ul { margin: 6px 0; padding-left: 18px; font-size: 15px; }
.panel ul li.down { color: var(--orange); }
.law { text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--beige); border: 2px solid var(--ink); min-height: 56px; }
.law b { display: block; font-size: 16px; }
.law span { font-size: 15px; }
.law em { display: block; font-style: normal; font-size: 13px; font-weight: 800; color: var(--orange); margin-top: 2px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0; font-size: 15px; }
.stats b { display: block; font-size: 20px; }
.credit { font-size: 13px; opacity: .7; }
.vote { margin-top: 14px; border-top: 1px dashed rgba(58, 53, 48, .3); padding-top: 10px; }
.vote .opts { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.vote .opts button { flex: none; min-height: 44px; padding: 0 12px; border-radius: 22px; border: 2px solid var(--ink); background: transparent; font-weight: 700; font-size: 14px; }
.door { margin-top: 8px; width: 100%; min-height: 44px; border: 2px dashed var(--ink); background: transparent; border-radius: 10px; font-weight: 700; }
[data-wefav-mark] { display: block; margin-top: 10px; }
[data-wefav-row] { margin-top: 12px; }
.panel a { color: var(--ink); }

/* Wide screens: the house gets the room, the bylaws sit open in the right margin. */
@media (min-width: 900px) {
  #app { grid-template-columns: 1fr 340px; grid-template-rows: auto 1fr auto; }
  #hud { grid-column: 1 / 3; }
  #stage { grid-column: 1; grid-row: 2; }
  #bar { grid-column: 1; grid-row: 3; display: flex; align-items: center; gap: 16px; }
  #bar #plate { flex: 1; justify-content: flex-start; gap: 16px; }
  #bar #hint { margin: 0; flex: 1.4; }
  #bar .row { flex: none; width: 260px; }
  #lawsBtn { display: none; }
  #sheet { position: static; grid-column: 2; grid-row: 2 / 4; transform: none; border-radius: 0; border-top: 0; border-left: 2px solid var(--ink); max-height: none; box-shadow: none; }
  #sheetClose, .grip { display: none; }
  #card { left: auto; right: 356px; top: 92px; width: 420px; }
  #value { font-size: 34px; }
  #spark { width: 200px; height: 44px; }
}

/* the day's clock: the last ten seconds pulse in ink (orange stays for violations) */
#clock { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 13px; opacity: 1; }
#clock.late { color: var(--ink); animation: late 0.5s ease-in-out infinite alternate; }
@keyframes late { from { opacity: 1; } to { opacity: 0.35; } }
#modal .result { display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: center; margin: 8px 0; }
#modal .result .stats { grid-template-columns: 1fr; gap: 4px; margin: 0; }
#modal .result .stats b { font-size: 18px; }
#postcard { display: block; width: 100%; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.2deg); }
/* the end screen's letters from the street: one per neighbour, how their story ended */
.ends { margin-top: 12px; }
.ends .letter { max-width: none; margin: 6px 0; box-shadow: 2px 2px 0 var(--ink); font-size: 14px; }
.ends .letter.won { border-color: #6f9440; box-shadow: 2px 2px 0 #6f9440; }
.ends .letter.gone { border-style: dashed; }
.ends .letter.grudge { transform: rotate(-1deg); }
@media (max-width: 480px) { #hud .ev { display: none; } }
body.daily #hud .ev { display: none; }
#modal .streak { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; font-size: 13px; }
#modal .streak b { display: block; font-size: 20px; }
/* the letters fold away under the buttons, so the streak and the buttons fit the first screen on a phone */
details.ends { border: 2px solid var(--ink); border-radius: 10px; padding: 0 10px; background: #fff; }
details.ends summary { min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; }
details.ends summary::-webkit-details-marker { display: none; }
details.ends summary::after { content: "Open"; margin-left: auto; font-size: 13px; opacity: .65; }
details.ends[open] summary::after { content: "Close"; }
details.ends summary span { opacity: .65; }
details.ends[open] { padding-bottom: 8px; }
/* share first: the postcard's share button leads the end screen, with the follow link right under it (games/studio#146) */
#modal .share { width: 100%; min-height: 56px; margin-top: 8px; font-size: 18px; }
.panel .follow-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; margin: -4px 0 -6px; font-size: 12px; font-weight: 700; }
.panel .follow-line a + a { font-weight: 600; opacity: .75; }
.panel .follow-line a { display: inline-block; padding: 13px 2px; white-space: nowrap; }
/* a neighbour moved out: the lap card offers the moment to share */
.sold { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; padding: 8px 10px; border: 2px dashed var(--ink); border-radius: 10px; background: #fff; }
.sold p { flex: 1; margin: 0; font-size: 15px; }
.sold button { flex: none; min-height: 44px; padding: 0 14px; }
/* wide screens: the end screen in two columns, so the studio row is in reach without scrolling */
@media (min-width: 900px) {
  .panel[data-kind="over"] { max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
  .panel[data-kind="over"] .col + .col { padding-top: 6px; }
  .panel[data-kind="over"] .col + .col .ends { margin-top: 0; }
}