/* Words and Guff Daily
   The Power Board's own palette (teal, terracotta, cream serif tiles) on warm squared paper,
   so it reads as the same family as Words and Guff without borrowing the league app's yellow. */
:root {
  color-scheme: light;
  --paper: #F4F0E6;
  --paper-line: #E7E1D3;
  --card: #FFFDF8;
  --ink: #1F2D2C;
  --muted: #66706D;
  --line: #E2DBCB;
  --q: #0E4F58;       /* 4W, and the house colour */
  --t: #2C8B85;       /* 3W */
  --d: #BEDFD8;       /* 2W */
  --tl: #C4552B;      /* 3L, and "Daily" */
  --dl: #F3CBB3;      /* 2L */
  --ground: #F0ECE3;  /* an empty square */
  --boardline: #D9D2C2;
  --tile: #FBF3DC;
  --tile-hi: #FFFBEE;
  --tile-edge: #C9B786;
  --gold: #F6D77A;
  --good: #1E7A58;
  --good-soft: #E1F2EA;
  --bad: #B23A1E;
  --bad-soft: #F8E3DC;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 24px -16px rgba(14,79,88,.35);
}
* { box-sizing: border-box; }
.sq, .rt, .btn, .chip, .tops li { -webkit-tap-highlight-color: transparent; }   /* no grey-blue flash on the square you just tapped */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; color: var(--ink); font: 16px/1.45 var(--body);
  background-color: var(--paper);
  background-image: linear-gradient(var(--paper-line) 1px, transparent 1px), linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 36px 36px;
  font-variant-numeric: tabular-nums;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: clip;
}
a { color: var(--q); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.page { max-width: 600px; margin: 0 auto; padding: 14px 8px 40px; }

/* Masthead: the Words and Guff tiles, with "Daily" signed underneath like a stamp ---------------- */
.masthead { padding: 4px 8px 10px; }
.logo { --ts: min(34px, calc((100vw - 64px) / 13.4)); display: inline-block; position: relative; text-decoration: none; color: inherit; padding-bottom: calc(var(--ts) * .78); }
.tiles { display: flex; gap: calc(var(--ts) * .3); align-items: center; }
.word { display: inline-flex; gap: calc(var(--ts) * .08); }
.word i {
  position: relative; display: inline-grid; place-items: center; width: var(--ts); height: var(--ts);
  font: 400 calc(var(--ts) * .64)/1 var(--serif); font-style: normal; color: var(--ink);
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border: 1px solid var(--tile-edge);
  border-radius: calc(var(--ts) * .14); box-shadow: 0 2px 0 var(--tile-edge), 0 4px 10px -6px rgba(0,0,0,.35);
}
.word i b { position: absolute; right: 7%; bottom: 3%; font: 400 calc(var(--ts) * .25)/1 var(--body); }
.word.guff i { background: linear-gradient(180deg, #3A9C95, #2C8B85); border-color: var(--q); box-shadow: 0 2px 0 var(--q), 0 4px 10px -6px rgba(0,0,0,.35); color: #FFF8E6; }
/* "Daily" is signed under GUFF like a rubber stamp: smaller, italic, terracotta, a little askew. */
.daily {
  position: absolute; right: calc(var(--ts) * .1); bottom: 0;
  font: italic 700 calc(var(--ts) * .92)/1 var(--display); color: var(--tl); letter-spacing: .01em;
  transform: rotate(-6deg); transform-origin: right bottom;
}
.issue { margin: 4px 0 0; color: var(--muted); font-size: .86rem; }

/* The stage: board, and the cover card before you start ------------------------------------------ */
.stage { position: relative; }
.boardwrap { border-radius: 8px; }
.board {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 1px; width: 100%;
  background: var(--boardline); border: 1px solid var(--boardline); border-radius: 8px; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: filter .5s ease;
}
.stage.covered .board { filter: blur(4px) saturate(.6) opacity(.75); }
.sq {
  aspect-ratio: 1; background: var(--ground); display: grid; place-items: center; position: relative; cursor: pointer;
  font: 700 2.05cqw/1 var(--body); color: var(--ink); letter-spacing: -.02em;
}
.sq.pQ { background: var(--q); color: #fff; }
.sq.pT { background: var(--t); color: #fff; }
.sq.pD { background: var(--d); }
.sq.pt { background: var(--tl); color: #fff; }
.sq.pd { background: var(--dl); }
.sq .gbimg { width: 4.6cqw; height: 4.6cqw; display: block; pointer-events: none; }
.sq.tile { background: linear-gradient(180deg, var(--tile-hi), var(--tile)); box-shadow: inset 0 0 0 1px var(--tile-edge); border-radius: 12%; color: var(--ink); }
.sq.tile span { font: 400 4.3cqw/1 var(--serif); margin-top: -4%; }
.sq.tile i { position: absolute; right: 7%; bottom: 3%; font: 400 1.75cqw/1 var(--body); font-style: normal; }
.sq.tile.pending { background: linear-gradient(180deg, #FFF3C4, var(--gold)); box-shadow: inset 0 0 0 2px var(--q); cursor: grab; }
.sq.tile.pending.valid { box-shadow: inset 0 0 0 2px var(--good); background: linear-gradient(180deg, #F4FFF8, #BFE8D1); }
.sq.tile.pending.invalid { box-shadow: inset 0 0 0 2px var(--bad); }
.sq.tile.mine { background: linear-gradient(180deg, #8ED1B4, #3E9E78); box-shadow: inset 0 0 0 1px #2B7A5B; color: #fff; }
.sq.tile.mine span, .sq.tile.mine i { color: #fff; }
.sq.tile.ghost { background: linear-gradient(180deg, #FFE6D6, #F5B895); box-shadow: inset 0 0 0 2px var(--tl); }
.sq.tile.ghost span { color: #7A2E12; }
/* The square the next tile goes to (a line of two or more), or where typing lands (keyboard, with an arrow) */
.sq.next { box-shadow: inset 0 0 0 2px var(--q); z-index: 1; }
.sq.next::before { content: ""; position: absolute; width: 36%; height: 36%; border-radius: 50%; background: var(--q); opacity: .35; }
.sq.next.pQ::before, .sq.next.pT::before, .sq.next.pt::before { background: #fff; opacity: .6; }
.sq.next.kbd::before { width: auto; height: auto; border-radius: 0; background: none; opacity: .9; color: var(--q); font: 800 3.6cqw/1 var(--body); animation: blink 1.1s ease-in-out infinite; }
.sq.next.kbd.pQ::before, .sq.next.kbd.pT::before, .sq.next.kbd.pt::before { color: #fff; }
.sq.next.kbd.across::before { content: "▸"; }
.sq.next.kbd.down::before { content: "▾"; }
.sq.drop { box-shadow: inset 0 0 0 3px var(--tl); }
.sq.tile.typed { animation: typedpop .26s cubic-bezier(.3,1.6,.5,1); }
@keyframes typedpop { from { transform: scale(.55) rotate(-8deg); } to { transform: none; } }
.sq.land { animation: land .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes blink { 50% { opacity: .35; } }
@keyframes land { from { transform: scale(1.35); } to { transform: scale(1); } }

.cover { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; }
.covercard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px -18px rgba(14,79,88,.55);
  padding: 20px 18px 14px; max-width: 380px; text-align: center;
}
.covercard h1 { font: 800 1.45rem/1.15 var(--display); margin: 0 0 16px; letter-spacing: -.01em; }
.covercard h1 em { color: var(--tl); font-style: italic; font-weight: 700; }
.covercard p { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.covercard .small { margin: 10px 0 0; font-size: .85rem; }
.btn.go { font-size: 1.05rem; padding: 13px 18px; background: var(--q); border-color: var(--q); color: #FFF8E6; display: inline-flex; align-items: center; gap: 10px; }
.btn.go:hover { background: #0A3F46; }
.flip { display: inline-flex; gap: 3px; }
.flip i {
  width: 20px; height: 20px; display: grid; place-items: center; font: 400 13px/1 var(--serif); font-style: normal; color: var(--q);
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border-radius: 4px; box-shadow: 0 1px 0 var(--tile-edge);
  animation: peek 2.6s ease-in-out infinite;
}
.flip i:nth-child(2) { animation-delay: .18s; } .flip i:nth-child(3) { animation-delay: .36s; }
@keyframes peek { 0%, 70%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg); } }

/* The dock: status line, rack, buttons ----------------------------------------------------------- */
.dock { margin-top: 10px; padding: 10px 6px 4px; }
.status { min-height: 1.6em; margin: 0 0 8px; text-align: center; font-size: .95rem; color: var(--muted); transition: color .2s; }
.status b { font-weight: 800; letter-spacing: .02em; }
.status.ok { color: var(--good); }
.status.ok .pts { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--good); color: #fff; font-weight: 800; animation: pop .3s cubic-bezier(.2,1.6,.4,1); }
.status.bad { color: var(--bad); }
@keyframes pop { from { transform: scale(.6); } to { transform: scale(1); } }
.rack { display: flex; justify-content: center; gap: 6px; min-height: 52px; touch-action: none; }
.rt {
  flex: 0 1 50px; max-width: 11.6%; aspect-ratio: 1; position: relative; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); border-radius: 12%;
  box-shadow: inset 0 0 0 1px var(--tile-edge), 0 3px 0 var(--tile-edge), 0 6px 12px -8px rgba(0,0,0,.4);
  display: grid; place-items: center; transition: transform .16s ease, box-shadow .16s ease, opacity .16s;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.rt span { font: 400 clamp(19px, 6.6vw, 30px)/1 var(--serif); color: var(--ink); margin-top: -6%; }
.rt i { position: absolute; right: 8%; bottom: 4%; font: 400 clamp(8px, 2.5vw, 11px)/1 var(--body); font-style: normal; color: var(--ink); }
.rt.sel { transform: translateY(-8px); box-shadow: inset 0 0 0 2px var(--q), 0 10px 0 var(--tile-edge), 0 14px 18px -10px rgba(0,0,0,.4); }
.rt.used { opacity: .18; box-shadow: none; transform: scale(.9); pointer-events: none; }
.rt.face-down { background: linear-gradient(180deg, #3A9C95, var(--q)); box-shadow: 0 3px 0 #083238; }
.rt.face-down span, .rt.face-down i { visibility: hidden; }
.rt.turn { animation: turn .45s ease both; }
@keyframes turn { 0% { transform: rotateY(180deg); } 100% { transform: rotateY(0); } }
/* Dragging: the hole a tile left, the floating tile (sized from the board square it will land on), and
   the magnifier bubble that shows the square under it with its neighbours. Ported from the main game. */
.rt.dragging { opacity: .25; box-shadow: inset 0 0 0 1px var(--tile-edge); background: var(--ground); }
.rt.dragging span, .rt.dragging i { visibility: hidden; }
.sq.pending.dragging { opacity: .35; }
.rt.arriving, .sq.tile.arriving { visibility: hidden; }
.sq.pending { touch-action: none; }
.dragghost {
  --gs: 48px; position: fixed; z-index: 60; pointer-events: none; display: grid; place-items: center; border-radius: 12%;
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); box-shadow: inset 0 0 0 1px var(--tile-edge), 0 2px 0 var(--tile-edge);
  transform: scale(1); transition: transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .16s ease, opacity .18s ease;
}
.dragghost.lifted { transform: scale(1.14) rotate(-3deg); box-shadow: inset 0 0 0 1px var(--tile-edge), 0 14px 30px -8px rgba(0,0,0,.55); }
.dragghost.landingghost { transform: scale(1) rotate(0); box-shadow: inset 0 0 0 1px var(--tile-edge); transition: left .24s cubic-bezier(.2,.9,.3,1.1), top .24s cubic-bezier(.2,.9,.3,1.1), width .24s ease, height .24s ease, transform .24s ease, box-shadow .24s ease; }
.dragghost.fade { opacity: 0; transform: scale(.8); }
.dragghost span { font: 400 calc(var(--gs) * .6)/1 var(--serif); color: var(--ink); margin-top: -4%; }
.dragghost i { position: absolute; right: 8%; bottom: 5%; font: 400 calc(var(--gs) * .22)/1 var(--body); font-style: normal; color: var(--ink); }
.magnifier { --mc: 36px; position: fixed; z-index: 61; pointer-events: none; padding: 5px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 28px -10px rgba(0,0,0,.45); }
.magnifier::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.mgrid { display: grid; grid-template-columns: repeat(5, var(--mc)); grid-auto-rows: var(--mc); gap: 2px; background: var(--boardline); border-radius: 6px; overflow: hidden; }
.mc { background: var(--ground); display: grid; place-items: center; font: 700 11px/1 var(--body); color: var(--ink); position: relative; }
.mc.off { background: var(--line); }
.mc.pQ { background: var(--q); color: #fff; } .mc.pT { background: var(--t); color: #fff; } .mc.pD { background: var(--d); }
.mc.pt { background: var(--tl); color: #fff; } .mc.pd { background: var(--dl); }
.mc .gbimg { width: 26px; height: 26px; }
.mc.tile { background: linear-gradient(180deg, var(--tile-hi), var(--tile)); box-shadow: inset 0 0 0 1px var(--tile-edge); border-radius: 12%; }
.mc.tile span { font: 400 21px/1 var(--serif); margin-top: -2px; }
.mc.tile i { position: absolute; right: 6%; bottom: 3%; font: 400 8px/1 var(--body); font-style: normal; }
.mc.tile.pending { background: linear-gradient(180deg, #FFF3C4, var(--gold)); box-shadow: inset 0 0 0 2px var(--q); }
.mc.tile.here { background: linear-gradient(180deg, #FFF3C4, var(--gold)); box-shadow: inset 0 0 0 3px var(--tl); }
.rack.shake { animation: rackshake .4s ease; }
@keyframes rackshake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.btns { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; margin-top: 14px; }
.btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 10px 8px; cursor: pointer;
  font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .12s ease, background .15s ease;
}
.btn:active { transform: scale(.96); }
.btn.ghost:hover { background: #fff; }
.btn.play { background: var(--q); border-color: var(--q); color: #FFF8E6; font-size: 1rem; }
.btn.play:disabled { background: var(--line); border-color: var(--line); color: var(--muted); cursor: default; }
.btn.play.ready { animation: ready 1.8s ease-in-out infinite; }
@keyframes ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(30,122,88,.0); } 50% { box-shadow: 0 0 0 5px rgba(30,122,88,.22); } }
.giveup { text-align: center; margin: 12px 0 0; }
.linkbtn { border: 0; background: none; padding: 4px; color: var(--muted); font-size: .84rem; text-decoration: underline; cursor: pointer; }

/* The result ---------------------------------------------------------------------------------- */
.result { margin-top: 12px; display: grid; gap: 12px; }
.resultpart { display: grid; gap: 12px; }
.resultpart:empty { display: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.score { text-align: center; }
.score .big { font: 800 3.4rem/1 var(--display); color: var(--q); letter-spacing: -.02em; }
.score .sum { margin-top: 4px; color: var(--muted); font-size: .95rem; }
.score .sum b { color: var(--ink); letter-spacing: .03em; }
.meter { height: 12px; border-radius: 999px; background: var(--ground); overflow: hidden; margin: 14px 0 6px; box-shadow: inset 0 0 0 1px var(--line); }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--t), var(--q)); border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.meter.full i { background: linear-gradient(90deg, var(--tl), #E07A45); }
.meterlabel { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }
.views { display: flex; gap: 6px; justify-content: center; margin: 2px 0 0; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.chip.on { background: var(--q); color: #FFF8E6; border-color: var(--q); }
.tops h3, .today h3 { margin: 0 0 8px; font: 800 1.05rem/1.2 var(--display); }
.tops ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tops li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.tops li:hover, .tops li.on { background: var(--ground); }
.tops li.best { background: #FCEBE1; }
.tops .w { font: 700 1rem/1.2 var(--serif); letter-spacing: .06em; }
.tops .w small { font: 400 .78rem/1 var(--body); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.tops .p { font-weight: 800; }
.tops .you { font: 700 .7rem/1 var(--body); color: #fff; background: var(--good); border-radius: 999px; padding: 2px 6px; margin-left: 6px; letter-spacing: .04em; vertical-align: 1px; }
.today .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.today .stats div { background: var(--ground); border-radius: 10px; padding: 10px 4px; }
.today .stats b { display: block; font: 800 1.35rem/1 var(--display); color: var(--q); }
.today .stats span { font-size: .75rem; color: var(--muted); }
.today .line { margin: 10px 0 0; font-size: .92rem; color: var(--muted); text-align: center; }
.shareRow { display: grid; grid-template-columns: 1fr; gap: 8px; }
.btn.share { background: var(--tl); border-color: var(--tl); color: #fff; font-size: 1rem; padding: 12px; }
.next { text-align: center; color: var(--muted); font-size: .9rem; margin: 0; }
.promo { background: linear-gradient(180deg, #EAF5F2, var(--card) 60%); border-color: var(--d); }
.promo h3 { margin: 0 0 6px; font: 800 1.05rem/1.2 var(--display); }
.promo p { margin: 0 0 10px; font-size: .92rem; color: var(--muted); }
.promo a.btn { display: inline-block; text-decoration: none; background: var(--card); border-color: var(--t); color: var(--q); }
.news h3 { margin: 0 0 6px; font: 800 1rem/1.2 var(--display); }
.news p { margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
.news form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.news input { border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font: inherit; min-width: 0; background: #fff; }
.news .msg { margin: 8px 0 0; font-size: .85rem; }
#guffbar-slot:empty { display: none; }

/* How to play, footer ------------------------------------------------------------------------ */
.how { margin: 18px 6px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.how summary { cursor: pointer; padding: 13px 0; font: 800 1rem/1.2 var(--display); }
.how .sheet { padding: 0 0 12px; font-size: .93rem; }
.how .sheet p { margin: 0 0 10px; }
.how ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.how .ok { color: var(--good); font-weight: 700; }
.k { display: inline-block; font: 700 .72rem/1 var(--body); padding: 3px 5px; border-radius: 4px; }
.k-dl { background: var(--dl); } .k-tl { background: var(--tl); color: #fff; } .k-dw { background: var(--d); } .k-tw { background: var(--t); color: #fff; } .k-qw { background: var(--q); color: #fff; }
.foot { margin: 18px 8px 0; color: var(--muted); font-size: .82rem; }
.foot p { margin: 0 0 6px; }

/* Bottom sheet, toast, burst --------------------------------------------------------------- */
.sheetwrap { position: fixed; inset: 0; background: rgba(15,35,35,.42); display: grid; align-items: end; justify-items: center; z-index: 40; animation: fade .18s ease; }
.sheetcard { width: min(100%, 520px); background: var(--card); border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.4); animation: rise .24s cubic-bezier(.2,1.2,.4,1); }
.sheetcard h2 { margin: 0 0 6px; font: 800 1.3rem/1.2 var(--display); }
.sheetcard p { margin: 0 0 16px; color: var(--muted); }
.sheetcard p b { color: var(--ink); letter-spacing: .04em; }
.sheetcard .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: .4; } }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: .9rem; z-index: 60; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.burst i {
  position: absolute; top: -40px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 12%;
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); box-shadow: inset 0 0 0 1px var(--tile-edge);
  font: 400 16px/1 var(--serif); font-style: normal; color: var(--ink);
  animation: fall 1.8s cubic-bezier(.3,.1,.5,1) forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(var(--r, 200deg)); } }

@media (min-width: 560px) {
  .page { padding-top: 22px; }
  .rt span { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* The guff bar in the house colours (its skin knobs, see guff-bar.js). The id beats the bar's own .gxb rule. */
#guff-crossbar { --gxb-done: #2C8B85; --gxb-next-bg: #0E4F58; --gxb-next-fg: #FFF8E6; --gxb-line: #1F2D2C; --gxb-next-radius: 16px; }