:root {
  --linen: #3E5753; --linen-dark: #2E4441; --clay: #E4D2B3; --clay-2: #D3BC97; --clay-ink: #5B4330; --clay-ink-soft: #7C634A;
  --celadon: #6FAE98; --celadon-deep: #2F6A5C; --amber: #D8892A; --amber-deep: #8A4B12;
  --seal: #B23A2E; --cream: #F5ECDD;
  --ui: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --display: 'Young Serif', Georgia, serif;
  --tile-shadow: 10px 14px 24px rgba(10, 22, 20, .35), 2px 3px 0 rgba(10, 22, 20, .18);
  --bw: min(calc(100vw - 520px), calc((100dvh - 150px) * 1000 / 380), 1100px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--linen); }
html, body { margin: 0; min-height: 100%; }
body.gleam {
  font-family: var(--ui); color: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 60% at 30% 20%, #4B6762, transparent 70%),
    linear-gradient(160deg, #46605B, var(--linen) 45%, var(--linen-dark));
  background-attachment: fixed;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #F0C27A; outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

/* window light and a leaf shadow drifting across the table */
.window-light { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.window-light::before, .window-light::after {
  content: ''; position: absolute; width: 34vw; height: 120vh; top: -10vh; transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 236, 200, .085) 20%, rgba(255, 236, 200, .085) 80%, transparent);
  filter: blur(18px);
}
.window-light::before { left: 4vw; } .window-light::after { left: 42vw; width: 22vw; }
.leaves { position: fixed; top: -6vh; right: -4vw; width: 46vw; height: 60vh; pointer-events: none; z-index: 0; opacity: .2; filter: blur(7px);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'><g fill='%23071210'><path d='M380 10 C300 60 220 90 120 140' stroke='%23071210' stroke-width='5' fill='none'/><ellipse cx='330' cy='40' rx='40' ry='16' transform='rotate(-30 330 40)'/><ellipse cx='290' cy='80' rx='44' ry='17' transform='rotate(20 290 80)'/><ellipse cx='240' cy='90' rx='40' ry='15' transform='rotate(-35 240 90)'/><ellipse cx='200' cy='125' rx='46' ry='17' transform='rotate(15 200 125)'/><ellipse cx='150' cy='130' rx='38' ry='14' transform='rotate(-40 150 130)'/><ellipse cx='120' cy='170' rx='42' ry='15' transform='rotate(25 120 170)'/><ellipse cx='360' cy='90' rx='34' ry='13' transform='rotate(50 360 90)'/></g></svg>") no-repeat center / contain;
  animation: sway 11s ease-in-out infinite alternate; transform-origin: 90% 0; }
@keyframes sway { to { transform: rotate(3deg) translate(-12px, 8px); } }
#app { position: relative; z-index: 1; min-height: 100dvh; }

/* ---------- stoneware tiles, glazed buttons ---------- */
.tile {
  position: relative; color: var(--clay-ink); border-radius: 28px; box-shadow: var(--tile-shadow);
  background:
    radial-gradient(circle at 20% 30%, rgba(91, 60, 38, .55) 0 1px, transparent 1.6px) 0 0 / 23px 29px,
    radial-gradient(circle at 70% 60%, rgba(47, 36, 29, .45) 0 1.2px, transparent 1.8px) 0 0 / 37px 31px,
    radial-gradient(circle at 40% 80%, rgba(91, 60, 38, .35) 0 .8px, transparent 1.4px) 0 0 / 17px 19px,
    linear-gradient(160deg, #EDDFC5, var(--clay) 55%, var(--clay-2));
}
.tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .55), inset -3px -4px 0 rgba(120, 90, 60, .25); }
.btn {
  --g1: #F2E7D3; --g2: #DCCBAE; --ink: var(--clay-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; cursor: pointer; border: 0;
  min-height: 46px; padding: .5em 1.4em; border-radius: 999px; font-weight: 700; font-size: 1.02rem; color: var(--ink);
  background: radial-gradient(ellipse 80% 60% at 35% 25%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(var(--g1), var(--g2));
  box-shadow: 0 3px 0 rgba(60, 40, 25, .35), 0 6px 14px rgba(10, 22, 20, .25), inset 0 -3px 6px rgba(0, 0, 0, .12);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60, 40, 25, .35), inset 0 -2px 4px rgba(0, 0, 0, .12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { --g1: #4F8E7C; --g2: #2B6152; --ink: #F5F1E6; }
.btn.amber { --g1: #E3A659; --g2: #A9611E; --ink: #2E1A08; }
.btn.small { min-height: 36px; font-size: .92rem; padding: .3em 1em; }
.btn.big { font-size: 1.15rem; padding: .6em 1.9em; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 0; cursor: pointer; min-height: 40px; padding: .3em 1.1em; border-radius: 999px; font-weight: 600; color: var(--clay-ink);
  background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1.5px rgba(91, 67, 48, .25); }
.chip.on { background: #F5ECDD; box-shadow: inset 0 0 0 2px var(--clay-ink); }
input { font: inherit; font-size: 1.05rem; color: var(--clay-ink); min-height: 44px; padding: .4em .9em; width: 100%; border: 1.5px solid rgba(91, 67, 48, .35); border-radius: 14px; background: #FBF6EC; }
input:focus { outline: none; border-color: var(--celadon-deep); }
.code { font-family: var(--display); letter-spacing: .14em; padding: .02em .45em; border-radius: 8px; background: rgba(255, 255, 255, .55); color: var(--clay-ink); }
.form-error { background: #F6DDD6; color: #8E2D23; padding: .6em 1em; border-radius: 12px; text-align: center; }
.note, .blurb { color: var(--clay-ink-soft); margin: 6px 0 0; }
.blurb { min-height: 2.6em; }
.loading { min-height: 100dvh; display: grid; place-items: center; font-family: var(--display); font-size: 1.5rem; }
.back { position: absolute; top: 14px; left: 14px; z-index: 3; color: var(--cream); text-decoration: none; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.back:hover { background: rgba(255, 255, 255, .18); }
.icon { border: 0; cursor: pointer; min-height: 36px; padding: .2em .9em; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--cream); font-weight: 600; font-size: .9rem; }
.icon:hover { background: rgba(255, 255, 255, .2); }
.mini { border: 0; cursor: pointer; background: #F0C27A; color: #2E1A08; border-radius: 999px; font-size: .78rem; padding: .15em .7em; font-weight: 700; }
.tag { font-size: .76rem; background: rgba(91, 67, 48, .12); padding: .05em .6em; border-radius: 999px; }
.tag.away { background: #F6DDD6; color: #8E2D23; }
.swatch { display: inline-block; width: 34px; height: 34px; border-radius: 50%; flex: none;
  box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(255, 255, 255, .5), 0 0 0 3px #EDE0C6, 0 2px 4px rgba(0, 0, 0, .25); }
.swatch.g0 { background: radial-gradient(circle at 60% 65%, var(--celadon-deep), var(--celadon) 60%, #B6D9C7); }
.swatch.g1 { background: radial-gradient(circle at 60% 65%, #6B3A12, #B9762E 60%, #E2B26C); }

/* ---------- home & lobby ---------- */
.g-home { min-height: 100dvh; display: grid; place-items: center; padding: 60px 16px 40px; }
.home-card { width: min(820px, 100%); padding: 28px clamp(18px, 4vw, 44px) 28px; }
.home-logo { margin: 0; display: grid; place-items: center; }
.home-logo .gleam-logo { width: min(480px, 100%); height: auto; }
.home-card .gleam-logo text:last-child { fill: var(--clay-ink-soft); }
.lede { max-width: 58ch; margin: 8px auto 20px; text-align: center; color: var(--clay-ink-soft); line-height: 1.55; }
.field { display: flex; flex-direction: column; gap: 4px; max-width: 320px; margin: 0 auto 22px; }
.field span { font-size: .92rem; color: var(--clay-ink-soft); font-weight: 600; }
.choices { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.choice { border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: rgba(255, 255, 255, .32); box-shadow: inset 0 0 0 1.5px rgba(91, 67, 48, .12); }
.choice h2, .lobby-card h1, .lobby-card h2, .end-card h2 { font-family: var(--display); font-weight: 400; margin: 0; }
.choice h2 { font-size: 1.4rem; }
.choice p { margin: 0; color: var(--clay-ink-soft); }
.side-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.side { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, .5); border-radius: 18px; padding: 8px 16px 8px 10px; color: var(--clay-ink); box-shadow: inset 0 0 0 1.5px rgba(91, 67, 48, .2); }
.side .swatch { grid-row: span 2; }
.side.on { background: #FBF6EC; box-shadow: inset 0 0 0 2.5px var(--clay-ink); }
.side b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1; }
.side small { color: var(--clay-ink-soft); line-height: 1.1; }
.join { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.join input { max-width: 130px; text-transform: uppercase; letter-spacing: .2em; }
.g-lobby { min-height: 100dvh; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lobby-top { width: min(760px, 100%); display: flex; justify-content: space-between; align-items: center; }
.lobby-top a { display: block; width: 220px; } .lobby-top svg { width: 100%; height: auto; }
.lobby-card { width: min(760px, 100%); padding: 26px clamp(16px, 4vw, 36px); }
.lobby-card h1 { font-size: 1.8rem; margin-bottom: 4px; }
.lobby-card h2 { font-size: 1.2rem; margin: 18px 0 8px; }
.invite { display: flex; gap: 8px; }
.seats { display: grid; gap: 10px; margin: 20px 0 8px; }
.seat { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .4); }
.seat.empty { background: rgba(255, 255, 255, .2); }
.seat b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.seat small { color: var(--clay-ink-soft); }
.seat .who { font-weight: 600; margin-top: 2px; }
.seat > .btn { margin-left: auto; }
.seat .x { margin-left: auto; border: 0; background: rgba(255, 255, 255, .6); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: #8E2D23; }
.lobby-row { display: flex; justify-content: center; margin: 8px 0; }
.lobby-card > .btn.big { margin-top: 16px; }

/* ---------- game ---------- */
.gleam-game { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 10px 16px 24px; }
.g-top { width: 100%; max-width: 1400px; display: flex; align-items: center; gap: 14px; }
.top-logo { width: 190px; flex: none; } .top-logo svg { width: 100%; height: auto; display: block; }
.top-logo .gleam-logo text:last-child { display: none; }
.status { margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; color: var(--clay-ink);
  background: linear-gradient(#F2E7D3, #E2D1B2); padding: 6px 22px; border-radius: 999px; min-height: 46px; box-shadow: 0 4px 12px rgba(10, 22, 20, .3); }
.status b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.status span { color: var(--clay-ink-soft); }
.my-turn .status { box-shadow: 0 4px 12px rgba(10, 22, 20, .3), 0 0 0 4px rgba(111, 174, 152, .55); }
.meta { display: flex; gap: 8px; align-items: center; flex: none; }
.meta .code { background: rgba(255, 255, 255, .85); }
.table { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 32px); width: 100%; padding-top: 6px; }

.badge { width: 190px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border-radius: 26px; color: var(--clay-ink);
  background: radial-gradient(circle at 20% 30%, rgba(91, 60, 38, .45) 0 1px, transparent 1.6px) 0 0 / 23px 29px, linear-gradient(160deg, #EDDFC5, var(--clay) 60%, var(--clay-2));
  box-shadow: var(--tile-shadow); transition: transform .25s, box-shadow .25s; }
.badge .swatch { width: 54px; height: 54px; }
.badge.turn { transform: translateY(-6px); box-shadow: var(--tile-shadow), 0 0 0 4px rgba(245, 236, 221, .7); }
.badge.g0.turn { box-shadow: var(--tile-shadow), 0 0 0 4px #8CC2AD; }
.badge.g1.turn { box-shadow: var(--tile-shadow), 0 0 0 4px #E7B46E; }
.badge-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.badge-text b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.badge-who { font-size: .92rem; color: var(--clay-ink-soft); text-align: center; overflow-wrap: anywhere; }
.badge-count { font-family: var(--display); font-size: 3rem; line-height: 1; }
.badge.g0 .badge-count { color: var(--celadon-deep); } .badge.g1 .badge-count { color: var(--amber-deep); }
.badge-count.bump { animation: bump .35s ease-out; }
@keyframes bump { 40% { transform: scale(1.25); } }
.badge-turn { min-height: 1.2em; font-weight: 700; color: var(--clay-ink); }
.badge-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

.board-wrap { display: grid; place-items: center; }
.board { position: relative; width: var(--bw); container-type: inline-size; --m: 2.75%; }
.board-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.layer { position: absolute; inset: 0; }
.layer.preview, .layer.counts, .layer.stamps, .layer.marbles { pointer-events: none; }
.cup { position: absolute; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: default; }
.cup:focus-visible { outline-offset: 2px; border-radius: 50%; }
.my-turn .cup.legal { cursor: pointer; }
.my-turn .cup.legal::after { content: ''; position: absolute; inset: -4%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 244, 214, 0); transition: box-shadow .2s; }
.my-turn .cup.legal:hover::after, .my-turn .cup.legal:focus-visible::after { box-shadow: 0 0 0 3px rgba(255, 244, 214, .75), 0 0 26px 6px rgba(255, 230, 170, .35); }
.my-turn .cup.legal:not(:hover)::before { content: ''; position: absolute; left: 50%; bottom: -14%; width: 8%; height: 8%; min-width: 6px; min-height: 6px; translate: -50% 0; border-radius: 50%; background: #F5ECDD; opacity: .75; animation: breathe 1.8s ease-in-out infinite; }
.vertical .my-turn .cup.legal:not(:hover)::before, .gleam-game.vertical.my-turn .cup.legal:not(:hover)::before { bottom: auto; left: -14%; top: 50%; translate: 0 -50%; }
@keyframes breathe { 50% { opacity: .25; } }
.cup.store.glow::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 34px 10px rgba(255, 230, 170, .6); animation: fade 1.2s ease-out forwards; }
@keyframes fade { to { opacity: 0; } }
.cup.shake { animation: shake .3s; }
@keyframes shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
.ring { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; }
.ring.go { animation: ripple .55s ease-out; }
@keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(255, 250, 235, .7); } 100% { box-shadow: 0 0 0 14px rgba(255, 250, 235, 0); } }

/* counts stamped into the clay */
.count { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-size: 2.3cqw; line-height: 1; color: rgba(91, 67, 48, .78);
  text-shadow: 0 1px 0 rgba(255, 250, 240, .7), 0 -1px 0 rgba(60, 40, 25, .25); }
.count.store-count { font-size: 2.6cqw; }

/* move preview */
.drop { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 1.5cqw; color: var(--clay-ink); padding: .1em .45em; border-radius: 999px;
  background: rgba(255, 250, 238, .82); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); animation: pop .2s ease-out; }
.drop.last { background: #FFF6DE; box-shadow: 0 0 0 2px var(--clay-ink), 0 2px 8px rgba(0, 0, 0, .3); }
.hint { position: absolute; transform: translate(-50%, 110%); white-space: nowrap; font-family: var(--display); font-size: 1.7cqw; color: #FFF6DE;
  background: var(--celadon-deep); padding: .15em .7em; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); animation: pop .2s ease-out; }
.hint.cap { background: var(--seal); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }

/* stamps: a potter's seal pressed over the board */
.stamp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; animation: stampIn 1.7s ease-out forwards; }
.stamp span { display: block; font-family: var(--display); font-size: 3.6cqw; color: var(--seal); padding: .15em .6em .2em; border: .14em double var(--seal);
  border-radius: .3em; background: rgba(250, 241, 225, .9); transform: rotate(-6deg); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); white-space: nowrap; }
.stamp.again span { color: var(--celadon-deep); border-color: var(--celadon-deep); }
@keyframes stampIn { 0% { transform: scale(1.8); opacity: 0; } 12% { transform: scale(.94); opacity: 1; } 20% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(-6px); } }

/* end */
.end-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(15, 28, 26, .45); animation: fadeIn .4s; }
.end-backdrop.late { animation: fadeIn .4s .9s both; }
@keyframes fadeIn { from { opacity: 0; } }
.end-card { width: min(460px, 100%); padding: 26px 28px; text-align: center; }
.end-card h2 { font-size: 2.2rem; }
.end-score { font-family: var(--display); font-size: 1.7rem; margin: 6px 0; }
.end-score .c0 { color: var(--celadon-deep); } .end-score .c1 { color: var(--amber-deep); }
.end-score small { font-family: var(--ui); font-size: .95rem; color: var(--clay-ink-soft); }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

.toasts { position: fixed; z-index: 50; top: 74px; left: 50%; translate: -50% 0; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(520px, calc(100vw - 32px)); }
.toast { background: #F5ECDD; color: var(--clay-ink); padding: 8px 18px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); text-align: center; transition: opacity .4s, transform .4s; }
.toast.error { background: #F6DDD6; color: #8E2D23; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.conn { position: fixed; z-index: 60; bottom: 16px; left: 50%; translate: -50% 0; background: var(--seal); color: #fff; padding: 6px 16px; border-radius: 999px; }

/* about (static text) */
.about { position: relative; z-index: 1; width: min(800px, calc(100% - 32px)); margin: 0 auto 56px; padding: 26px clamp(18px, 4vw, 42px); color: var(--clay-ink); line-height: 1.6;
  background: linear-gradient(160deg, #EDDFC5, var(--clay) 60%, var(--clay-2)); border-radius: 28px; box-shadow: var(--tile-shadow); }
.about h2 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 1.2em 0 .4em; } .about h2:first-child { margin-top: 0; }
.about p, .about li, .about dd { max-width: 68ch; }
.about dt { font-weight: 700; margin-top: .8em; } .about dd { margin: .2em 0 0; }
.about a { color: var(--celadon-deep); font-weight: 700; }

/* ---------- phones: the board stands upright ---------- */
@media (max-width: 760px) {
  .g-top { flex-wrap: wrap; gap: 8px; }
  .top-logo { width: 140px; }
  .status { order: 3; width: 100%; padding: 4px 14px; min-height: 40px; }
  .meta { margin-left: auto; } .meta .code { display: none; }
  .table { flex-direction: column; gap: 10px; }
  .board { width: min(calc(100vw - 40px), calc((100dvh - 290px) * 380 / 1000)); --m: 7.2%; }
  .badge { width: 100%; max-width: 420px; flex-direction: row; flex-wrap: wrap; padding: 8px 14px; gap: 2px 10px; border-radius: 18px; }
  .badge .swatch { width: 34px; height: 34px; }
  .badge-text { align-items: flex-start; } .badge-text b { font-size: 1.05rem; } .badge-who { text-align: left; font-size: .82rem; }
  .badge-count { font-size: 1.9rem; margin-left: auto; }
  .badge-turn { width: 100%; font-size: .85rem; min-height: 0; } .badge-extra { width: 100%; justify-content: flex-start; }
  .badge.turn { transform: none; }
  .count { font-size: 5.6cqw; } .count.store-count { font-size: 6cqw; }
  .drop { font-size: 3.8cqw; } .hint { font-size: 4.4cqw; } .stamp span { font-size: 8cqw; }
  .choices { grid-template-columns: 1fr; }
  .leaves { width: 90vw; }
  .toasts { top: auto; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}