body { display: flex; flex-direction: column; min-height: 100dvh; font-size: 20px; transition: background-color .3s; }
body::after { /* faint watermark logo, like a chalkboard ghost */
  content: "Babble!"; position: fixed; left: 50%; top: 58%; translate: -50% -50%; rotate: -8deg;
  font-family: var(--chunky); font-size: min(34vw, 260px); line-height: 1; color: rgba(0,0,0,.12);
  pointer-events: none; z-index: 0; white-space: nowrap;
}
#bar { position: sticky; top: 0; z-index: 5; background: var(--bitumen); border-bottom: 3px solid var(--gold); color: var(--gold); text-align: center; font-size: 22px; text-transform: uppercase; padding: 4px 12px 0; display: flex; justify-content: center; gap: 12px; }
#bar:empty { display: none; }
#bar .pts { color: var(--cream); }
#bar .secs { color: var(--paper); min-width: 2ch; }
#app { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 18px; width: 100%; max-width: 760px; margin: 0 auto; }
.timerbar { margin: -14px -16px 0; }

h1 { margin: 0; font-weight: 400; font-size: 34px; text-transform: uppercase; text-align: center; line-height: 1; }
h2 { margin: 0; font-weight: 400; font-size: 24px; text-transform: uppercase; text-align: center; opacity: .9; }
.muted { opacity: .75; text-transform: uppercase; text-align: center; }
.center { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.logo { font-family: var(--chunky); font-size: 76px; line-height: .85; text-shadow: 0 .05em 0 var(--clay), 0 .1em 0 rgba(0,0,0,.25); }
.logo span { color: var(--gold); text-shadow: 0 .05em 0 #9a6a14; }
.logo small { display: block; font-family: var(--display); font-size: .32em; letter-spacing: .08em; color: var(--gold); text-shadow: none; }

label { display: block; text-transform: uppercase; font-size: 18px; margin: 0 0 4px; opacity: .85; }
.field { width: 100%; border: 0; border-radius: 6px 10px 7px 11px; background: var(--sand) var(--mottle); box-shadow: inset 0 3px 0 rgba(0,0,0,.15); color: var(--ink); font-size: 30px; padding: 10px 12px 4px; text-transform: uppercase; outline: none; }
.field::placeholder { color: rgba(0,0,0,.35); }
.field:focus { box-shadow: inset 0 3px 0 rgba(0,0,0,.15), 0 0 0 3px var(--gold); }
.field.code { text-align: center; letter-spacing: .3em; font-size: 40px; }
.check { display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 20px; }
.check input { width: 22px; height: 22px; accent-color: var(--go); }
.err { color: var(--butter); min-height: 1.1em; text-transform: uppercase; text-align: center; }
.wide { width: 100%; font-size: 32px; padding: .4em; }

/* prompt choice cards */
.offers { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.offer { position: relative; width: min(100%, 330px); min-height: 72px; background: var(--bitumen) linear-gradient(170deg, rgba(255,235,210,.08), transparent 50%); color: var(--cream); border: 0; border-radius: 3px 9px 4px 8px / 8px 3px 9px 4px; box-shadow: inset 0 -6px 10px rgba(0,0,0,.45), 0 4px 0 rgba(0,0,0,.35) !important; font-size: 32px; text-transform: uppercase; padding: 14px 18px 8px; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.offer .tag { position: absolute; left: -8px; top: -12px; font-size: 18px; }
.offer:active { transform: scale(.97); }
.offer.fresh { animation: slideUp .25s both; }

/* sentence builder */
.sentcard { position: relative; isolation: isolate; color: var(--ink); padding: 18px 14px 12px; text-align: center; font-size: 34px; text-transform: uppercase; line-height: 1.25; min-height: 96px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: .25em; }
.sentcard .blank { border-bottom: 4px solid; padding: 0 2px; cursor: pointer; }
.sentcard .blank.empty { opacity: .9; }
.sentcard .fx { border-bottom: 4px solid #aaa; cursor: pointer; padding: 0 2px; }
.cols { display: grid; gap: 10px; }
.col { border: 4px solid; border-radius: 4px; background: #3a2418; max-height: 42dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 0; scrollbar-width: thin; }
.tile { position: relative; background: var(--bitumen) linear-gradient(170deg, rgba(255,235,210,.07), transparent 50%); border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; box-shadow: inset 0 -5px 8px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,230,200,.06); color: var(--cream); border: 0; font-size: 26px; text-transform: uppercase; padding: 8px 6px 4px; min-height: 48px; line-height: 1; }
.tile.sel { color: var(--ink); }
.tile.sel::before { content: "✕"; position: absolute; left: 6px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; border-radius: 50%; background: var(--tile); color: var(--paper); font-family: system-ui; font-size: 13px; display: grid; place-items: center; }
.col.dim .tile:not(.sel) { opacity: .8; }
.buildrow { display: flex; gap: 10px; }
.buildrow .btn { font-size: 30px; }
.buildrow .go { flex: 1; }
.buildrow .nav { width: 58px; padding: 0; background: var(--navy-dk); }
.modebtn { font-size: 22px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; }
.chip { font-size: 22px; padding: 3px 10px 0; --r: 0deg; transform: rotate(var(--r)); }
.chip.fresh { animation: pop .3s both; }
.chip small { font-size: .65em; opacity: .7; margin-right: 4px; }

/* guessing */
.feed { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.feed .strip { font-size: 24px; text-align: center; }
.feed .strip.latest { font-size: 32px; transform: rotate(-2deg); }
.feed .strip.latest.fresh { animation: pop .35s both; --r: -2deg; }
.guessrow { display: flex; gap: 10px; align-items: stretch; }
.guessrow .btn { background: var(--navy-dk); font-size: 28px; }
.solved { background: var(--gold) var(--mottle); border-radius: 4px 9px 5px 8px; color: var(--ink); padding: 14px; text-align: center; font-size: 30px; text-transform: uppercase; transform: rotate(-2deg); }

.answer { font-size: 46px; transform: rotate(-3deg); }
.rating { display: flex; gap: 8px; width: 100%; }
.rating .btn { flex: 1; font-size: 22px; padding: .45em .2em .3em; }

.ranks { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ranks .strip { display: flex; align-items: center; gap: 10px; font-size: 30px; padding: 4px 12px 0; }
.ranks .strip b { margin-left: auto; font-weight: 400; }
.ranks .strip.me { outline: 3px solid var(--butter); }

#toast { position: fixed; left: 50%; bottom: 80px; translate: -50% 0; background: var(--coral-hot); color: #fff; text-transform: uppercase; font-size: 22px; padding: 8px 16px 4px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10; white-space: nowrap; }
#toast.show { opacity: 1; }

/* the sentence tablet: a hewn sandstone slab (same surface + filter as .strip) */
.sentcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 12px 20px 14px 22px / 20px 12px 22px 14px;
  background: var(--sand);
  background-image: var(--mottle), var(--pits), var(--noise), radial-gradient(120% 140% at 30% 20%, rgba(255,245,225,.25), transparent 60%);
  box-shadow: inset 0 -8px 12px rgba(40,20,10,.2), inset 0 0 0 1px rgba(40,20,10,.2);
  filter: url(#hew-b) drop-shadow(0 6px 0 rgba(28,16,9,.5));
}

/* chisel: lets one blank of one sentence take a second word */
.btn.chisel { font-size: 22px !important; background-color: #6b5a44; }
.btn.chisel.on { background-color: var(--gold); color: var(--ink); animation: wiggle .35s 2; }
.col.open { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(227,181,77,.6); }
.sentcard .blank.chiseled { border-bottom-style: double; border-bottom-width: 7px; }