/* Textless transparent game sprites, redrawn from the approved Pixel Meadow concept. */
:root {
  --title-art: url('assets/ui/title-sign.png');
  --leader-art: url('assets/ui/leaderboard-frame.png');
  --bonus-art: url('assets/ui/bonus-frame.png');
    --tile-art: url('assets/ui/gold-tile.png');
  --instruction-art: url('assets/ui/instruction-plaque-clean.png');
}
header { height: 148px; }
.brand { width: 440px; height: 124px; padding: 0 30px; display: flex; align-items: center; justify-content: center; isolation: isolate; border: 0; outline: 0; background: none; box-shadow: none; }
.brand::before { inset: -15px -25px -30px; width: auto; height: auto; top: -15px; background: var(--title-art) center / 100% 100% no-repeat; box-shadow: none; z-index: -1; }
.brand::after { display: none; }
.brand-name { font: 600 40px/1 var(--display); text-shadow: 2px 3px #24150e; }
.brand-name small { font: 500 17px/1.2 var(--font); letter-spacing: 2px; margin-top: 1px; }
.board-area { height: 565px; }
main { grid-template-columns: minmax(0, 1fr) 420px; gap: 65px; }
.leaderboard, .bonus { isolation: isolate; border: 0; outline: 0; box-shadow: none; background: none; }
.leaderboard { width: 100%; margin-left: 0; height: 380px; padding: 139px 34px 35px; }
.leaderboard::before, .bonus::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--leader-art) center / 100% 100% no-repeat; }
.leaderboard h2, .bonus h2 { position: absolute; border: 0; box-shadow: none; background: none; padding: 0; margin: 0; font: 600 32px/1 var(--display); text-shadow: 2px 3px #281a10; }
.leaderboard h2 { top: 79px; left: 34px; right: 34px; text-align: center; }
.leaderboard h2 > span { display: none; }
#leaders { margin: 0; }
.leader-row { min-height: 36px; padding: 5px 0; gap: 12px; }
.leader-name { font-size: 21px; }
.leader-score { font-size: 23px; }
.rank { font-size: 18px; }
.empty-leaders { margin: 47px 0 0; font-size: 17px; }
.bonus { height: 194px; margin-top: 19px; padding: 103px 36px 32px; }
.bonus::before { background-image: var(--bonus-art); }
.bonus h2 { top: 51px; left: 34px; right: 34px; font-size: 30px; }
.bonus h2 > span { font: 500 16px var(--font); }
#bonus-words { max-height: 60px; margin: 0; gap: 7px; }
.bonus-word { font-size: 17px; padding: 4px 9px; }
.letter-tile { width: 87px; height: 91px; background: var(--tile-art) center / 100% 100% no-repeat; border: 0; box-shadow: none; padding-bottom: 4px; font-size: 46px; color: #302013; }
.letter-tile .tile-points { right: 19px; bottom: 20px; font-size: 12px; }
.letters-section > p { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 590px; max-width: 95%; min-height: 63px; margin-top: 21px; padding: 12px 45px; background: none; border: 0; box-shadow: none; font-size: 21px; }
.letters-section > p::before { content: ''; position: absolute; inset: -12px -15px; z-index: -1; pointer-events: none; background: var(--instruction-art) center / 100% 155% no-repeat; }
.waiting h1, .round-end h2, .sign-in h1 { font-family: var(--display); font-weight: 600; }
@media (max-width: 1500px) {
  header { height: 123px; }
  .brand { width: 355px; height: 102px; padding-top: 0; }
  .brand-name { font-size: 33px; }
  .brand-name small { font-size: 15px; }
  main { grid-template-columns: minmax(0, 1fr) 340px; gap: 38px; }
  .board-area { height: min(55vh, 550px); }
  .leaderboard { height: 320px; padding: 116px 28px 28px; }
  .leaderboard h2 { top: 67px; left: 28px; right: 28px; font-size: 27px; }
  .leader-row { min-height: 30px; padding: 3px 0; gap: 10px; }
  .leader-name { font-size: 18px; }
  .leader-score { font-size: 20px; }
  .bonus { height: 170px; padding: 91px 28px 25px; }
  .bonus h2 { top: 45px; left: 30px; right: 30px; font-size: 26px; }
  .empty-leaders { font-size: 15px; margin-top: 35px; }
  .letter-tile { width: 69px; height: 75px; font-size: 38px; }
  .letter-tile .tile-points { right: 12px; bottom: 12px; font-size: 11px; }
  .letters-section > p { width: 490px; min-height: 57px; padding: 10px 32px; font-size: 18px; margin-top: 18px; }
}
@media (max-width: 1000px) {
  .brand { width: 278px; height: 94px; }
  .brand-name { font-size: 27px; }
  .brand-name small { font-size: 13px; }
  main { grid-template-columns: minmax(0, 1fr) 270px; gap: 27px; }
  .leaderboard { height: 310px; padding: 113px 25px 28px; }
  .leaderboard h2 { top: 64px; left: 25px; right: 25px; font-size: 24px; }
  .leader-name { font-size: 16px; }
  .leader-score { font-size: 18px; }
  .rank { font-size: 15px; width: 12px; }
  .bonus { height: 152px; padding: 81px 23px 23px; }
  .bonus h2 { top: 39px; left: 26px; right: 26px; font-size: 23px; }
  .bonus-word { font-size: 14px; }
  .letter-tile { width: 52px; height: 59px; font-size: 30px; }
  .letter-tile .tile-points { right: 8px; bottom: 10px; font-size: 9px; }
  .letters-section > p { width: 420px; min-height: 53px; font-size: 16px; padding: 10px 30px; }
}
@media (max-width: 650px) {
  header { height: auto; }
  .brand { width: 260px; height: 95px; margin: 0 auto; }
  .brand::before { inset: -12px -15px -20px; }
  .game-meta { margin-top: 7px; }
  .session { margin: 0 auto; }
  .board-area { height: 50vh; }
  main { display: block; }
  .letter-tile { width: 46px; height: 53px; font-size: 29px; }
  .letter-tile .tile-points { font-size: 8px; right: 7px; bottom: 9px; }
  .letters-section > p { max-width: 100%; font-size: 15px; padding: 10px 27px; }
  aside { display: block; max-width: 360px; margin: auto; padding-top: 18px; }
  .leaderboard { width: 100%; margin-left: 0; }
  .bonus { margin-top: 15px; }
  .leaderboard h2 > span { display: none; }
}

/* Align the wooden frame edges; the leaderboard sprite also includes its outboard lantern. */
aside { position: relative; }
.leaderboard, .bonus { z-index: 1; }
.leaderboard::before { left: -20%; right: auto; width: 125%; }
.bonus::before { left: -5.4%; right: auto; width: 108.7%; }
.widget-chains { position: absolute; top: 348px; left: 0; right: 0; height: 104px; padding: 0 47px; display: flex; justify-content: space-between; pointer-events: none; z-index: 0; }
.widget-chains > span { width: 14px; height: 100%; background: url('assets/ui/chain.svg') top center / 14px 28px repeat-y; filter: drop-shadow(2px 2px 0 #031223bb); }
@media (max-width: 1500px) { .widget-chains { top: 292px; height: 93px; padding: 0 37px; } }
@media (max-width: 1000px) { .widget-chains { top: 283px; height: 88px; padding: 0 30px; } }
@media (max-width: 650px) { .widget-chains { top: 298px; } }

/* Fixed end caps and an independently sized centre, sampled from the same sprite.
   SVG viewports crop existing pixels without resampling or rewriting the source PNG. */
.letter-tray { --tile-height: 91px; --rack-top: 32px; --rack-bottom: 32px; --rack-side: 56px; --rack-gap: 6px; --tray-height: calc(var(--tile-height) + var(--rack-top) + var(--rack-bottom)); --cap-width: calc(var(--tray-height) * .47619048); display: inline-block; position: relative; vertical-align: top; max-width: 100%; }
.tray-art { position: absolute; inset: 0; pointer-events: none; }
.tray-piece { position: absolute; top: 0; height: 100%; display: block; overflow: hidden; }
.tray-left { left: 0; width: var(--cap-width); }
.tray-right { right: 0; width: var(--cap-width); }
.tray-middle { left: var(--cap-width); width: calc(100% - var(--cap-width) * 2); }
#letters { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: var(--rack-gap); height: var(--tray-height); padding: var(--rack-top) var(--rack-side) var(--rack-bottom); margin: 0; border: 0; outline: 0; background: none; box-shadow: none; }
#letters::before { display: none; }
.letter-tile { height: var(--tile-height); flex-shrink: 0; }
.bonus h2 { display: block; text-align: center; }
.bonus h2 > span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 1500px) { .letter-tray { --tile-height: 75px; --rack-top: 25.5px; --rack-bottom: 25.5px; --rack-side: 44px; --rack-gap: 5px; } }
@media (max-width: 1000px) { .letter-tray { --tile-height: 59px; --rack-top: 20px; --rack-bottom: 20px; --rack-side: 35px; --rack-gap: 4px; } }
@media (max-width: 650px) { .letter-tray { --tile-height: 53px; --rack-top: 17.5px; --rack-bottom: 17.5px; --rack-side: 24px; --rack-gap: 2px; } }

/* Nine-slice HUD frame keeps its riveted corners intact as the counter changes width. */
.round-label {
  border: 14px solid transparent;
  border-image: url('assets/ui/round-frame.png') 16% / 14px / 0 stretch;
  background: #071e32ed;
  background-clip: padding-box;
  outline: 0;
  box-shadow: none;
  padding: 8px 14px;
}
@media (max-width: 1500px) { .round-label { border-width: 12px; border-image-width: 12px; padding: 7px 11px; } }
@media (max-width: 1000px) { .round-label { border-width: 10px; border-image-width: 10px; padding: 6px 9px; } }

.round-divider { width: 18px; height: 32px; background: url('assets/ui/round-divider.svg') center / contain no-repeat; box-shadow: none; }
.round-divider::before, .round-divider::after { display: none; }
@media (max-width: 1000px) { .round-divider { width: 15px; height: 27px; } }