@font-face { font-family: 'Lilita One'; src: url(../fonts/lilita-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Karla'; src: url(../fonts/karla-latin.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --green: #1d4d3a;
  --green-2: #2c6a4f;
  --cream: #fbf3e1;
  --red: #e8532f;
  --gold: #f2b632;
  --ink: #1f2a24;
  --blue: #2f6fb0;
  --head: 'Lilita One', 'Arial Black', sans-serif;
  --body: 'Karla', 'Trebuchet MS', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --u: clamp(12px, 1.1vmin + 6px, 22px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--green); color: var(--ink); font-family: var(--body); }
body { -webkit-tap-highlight-color: transparent; font-size: var(--u); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; }
.game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }

/* ---------- yläpalkki ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: .6em;
  padding: calc(.5em + var(--safe-t)) .7em .5em;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.back {
  font-family: var(--head); color: var(--cream); text-decoration: none; font-size: .95em;
  background: var(--green); padding: .35em .7em; border-radius: 999px; box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.back:hover, .back:focus-visible { background: var(--green-2); }
.brand { display: flex; align-items: center; gap: .4em; }
.brand img { width: 2em; height: 2em; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.brand h1 {
  margin: 0; font-family: var(--head); font-weight: 400; font-size: 1.45em; color: var(--cream);
  letter-spacing: .01em; text-shadow: 0 2px 0 var(--green), 0 0 14px rgba(29,77,58,.5);
  transform: rotate(-2deg);
}
.tools { margin-left: auto; display: flex; gap: .35em; align-items: center; }
.tbtn {
  font: inherit; font-weight: 700; font-size: .85em; color: var(--green);
  display: inline-flex; align-items: center; gap: .35em; height: 2.3em; padding: 0 .8em;
  border: 0; border-radius: 999px; background: rgba(251,243,225,.92); cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 0 rgba(29,77,58,.35);
}
.tbtn.sq { width: 2.3em; padding: 0; justify-content: center; font-family: var(--head); font-weight: 400; }
.tbtn:hover { background: #fff; }
.tbtn:focus-visible, .btn:focus-visible, .bootbtn:focus-visible, .back:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tbtn.on { background: var(--gold); color: var(--ink); }
.tbtn.login span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.banner {
  position: absolute; z-index: 4; left: 50%; top: calc(3.4em + var(--safe-t)); transform: translateX(-50%) rotate(-1deg);
  background: var(--blue); color: #fff; font-family: var(--head); padding: .3em .9em; border-radius: .4em;
  box-shadow: 0 3px 0 rgba(0,0,0,.2); white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute; z-index: 3; left: .7em; top: calc(3.6em + var(--safe-t));
  display: flex; flex-direction: column; align-items: flex-start; gap: .4em; pointer-events: none;
}
.chip {
  display: inline-flex; align-items: center; gap: .45em; padding: .35em .75em;
  background: rgba(251,243,225,.94); border-radius: .5em; box-shadow: 0 2px 0 rgba(29,77,58,.3);
}
.wind .wval { font-family: var(--head); font-size: 1.25em; color: var(--green); }
.wind .wlbl { font-weight: 700; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: #5b6b62; }
.warrow { width: 1.5em; height: 1.5em; stroke-width: 3; color: #8a9a90; transition: transform .4s; }
.wind.tail .warrow { color: var(--green-2); }
.wind.head .warrow { color: var(--red); transform: scaleX(-1); }
.round { font-family: var(--head); color: var(--green); font-size: 1em; }
.rbest { font-family: var(--body); font-weight: 700; font-size: .8em; color: #5b6b62; }

/* tulostaulu: käsinmaalattu taulu */
.board {
  position: absolute; z-index: 3; right: .7em; top: calc(3.4em + var(--safe-t));
  width: min(17em, 42vw); background: var(--green); color: var(--cream); border-radius: .5em;
  padding: .5em .7em .6em; box-shadow: 0 4px 0 #12301f, 0 8px 18px rgba(0,0,0,.2);
  transform: rotate(1.2deg); pointer-events: none; border: 2px solid #3c7a5c;
}
.board h2 { margin: 0 0 .25em; font-family: var(--head); font-weight: 400; font-size: 1em; color: var(--gold); letter-spacing: .04em; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li { display: grid; grid-template-columns: 1.3em 1fr auto; gap: .3em; font-size: .82em; padding: .12em 0; border-top: 1px dashed rgba(251,243,225,.15); }
.board li:first-child { border-top: 0; }
.board .pos { font-family: var(--head); color: rgba(251,243,225,.6); }
.board .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .sc { font-family: var(--head); font-variant-numeric: tabular-nums; }
.board li.me { color: var(--gold); font-weight: 800; }
.board li.ch { color: #a9d1ff; }
.board li.fresh .sc { animation: flip .5s ease-out both; }
.board li.fresh:nth-child(2) .sc { animation-delay: .08s; } .board li.fresh:nth-child(3) .sc { animation-delay: .16s; }
.board li.fresh:nth-child(4) .sc { animation-delay: .24s; } .board li.fresh:nth-child(5) .sc { animation-delay: .32s; }
.board li.fresh:nth-child(6) .sc { animation-delay: .4s; } .board li.fresh:nth-child(7) .sc { animation-delay: .48s; }
@keyframes flip { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

.bigdist {
  position: absolute; z-index: 3; left: 50%; bottom: calc(3% + var(--safe-b)); transform: translateX(-50%);
  font-family: var(--head); font-size: clamp(34px, 8vmin, 96px); line-height: 1; color: var(--cream);
  text-shadow: 0 3px 0 var(--green), 0 0 20px rgba(29,77,58,.35); pointer-events: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bigdist.land { color: var(--gold); animation: thump .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes thump { from { transform: translateX(-50%) scale(1.5); } to { transform: translateX(-50%) scale(1); } }

.pop {
  position: absolute; z-index: 4; left: 50%; top: 40%; transform: translate(-50%, -50%);
  font-family: var(--head); font-size: clamp(30px, 7vmin, 84px); color: var(--cream); opacity: 0; pointer-events: none;
  text-shadow: 0 4px 0 var(--green); white-space: nowrap;
}
.pop.on { animation: pop 1.3s ease-out both; }
.pop.g-perfect { color: var(--gold); }
.pop.g-good { color: #a8e07a; }
.pop.g-foul { color: #ffb3a0; text-shadow: 0 4px 0 #7a2416; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-6deg); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1) rotate(-3deg); }
}

/* kuuluttaja */
.say {
  position: absolute; z-index: 3; left: .7em; bottom: calc(7.2em + var(--safe-b));
  max-width: min(26em, 62vw); display: flex; gap: .5em; align-items: flex-start;
  background: var(--cream); color: var(--ink); border-radius: 1em 1em 1em .2em; padding: .55em .8em;
  box-shadow: 0 3px 0 rgba(29,77,58,.35); pointer-events: none; font-weight: 600; font-size: .9em;
}
.say svg { color: var(--red); width: 1.5em; height: 1.5em; margin-top: .05em; }
.say p { margin: 0; line-height: 1.3; }
.say.in { animation: sayin .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes sayin { from { transform: translateY(10px) scale(.9); opacity: 0; } }

.hint {
  position: absolute; z-index: 3; left: 50%; bottom: calc(6.6em + var(--safe-b)); transform: translateX(-50%);
  margin: 0; padding: .45em 1em; border-radius: 999px; background: rgba(29,77,58,.88); color: var(--cream);
  font-weight: 600; text-align: center; max-width: 92vw; pointer-events: none; opacity: 0; transition: opacity .25s;
}
.hint.on { opacity: 1; }
.hint b { color: var(--gold); }

/* saapasvalinta */
.bootbar {
  position: absolute; z-index: 3; left: 50%; bottom: calc(.7em + var(--safe-b)); transform: translateX(-50%);
  display: flex; gap: .5em; transition: transform .3s, opacity .3s;
}
.bootbar.off { opacity: 0; transform: translate(-50%, 130%); pointer-events: none; }
.bootbtn {
  position: relative; font: inherit; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .5em;
  align-items: center; padding: .45em .8em .45em .55em; min-width: 11em;
  background: rgba(251,243,225,.93); color: var(--ink); border-radius: .6em;
  box-shadow: 0 3px 0 rgba(29,77,58,.35);
}
.bootbtn .bi { grid-row: 1 / 3; width: 2.1em; height: 2.1em; stroke-width: 1.5; stroke: rgba(0,0,0,.35); }
.bi.kesa { fill: var(--red); } .bi.metsa { fill: #4d6b34; } .bi.lapsi { fill: var(--gold); }
.bootbtn .bn { font-family: var(--head); font-size: 1em; color: var(--green); }
.bootbtn .bd { font-size: .74em; color: #55645b; }
.bootbtn .bk {
  position: absolute; top: -.45em; right: -.35em; font-family: var(--head); font-size: .7em;
  width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--cream);
}
.bootbtn[aria-pressed="true"] { background: var(--gold); transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 5px 0 #a87a14; }
.bootbtn[aria-pressed="true"] .bd { color: #4a3a10; }

/* ---------- kortit ---------- */
.card {
  background: var(--cream); color: var(--ink); border-radius: .9em; padding: 1em 1.2em;
  box-shadow: 0 6px 0 rgba(18,48,31,.55), 0 14px 30px rgba(0,0,0,.25);
}
.card h2 { font-family: var(--head); font-weight: 400; color: var(--green); margin: 0 0 .4em; font-size: 1.5em; }
.btn {
  font: inherit; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .6em 1.1em; border-radius: .6em; border: 2px solid var(--green); background: transparent; color: var(--green);
  cursor: pointer; min-height: 2.6em;
}
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 3px 0 #a8331a; }
.btn.primary:hover { background: #f0603c; }
.btn:disabled { opacity: .45; cursor: default; }

.result {
  position: absolute; z-index: 4; left: 50%; top: calc(27% + var(--safe-t)); transform: translateX(-50%) rotate(-.8deg);
  width: min(23em, 92vw); text-align: center; animation: cardin .35s cubic-bezier(.3,1.5,.5,1);
}
@keyframes cardin { from { opacity: 0; transform: translateX(-50%) translateY(20px) rotate(-.8deg); } }
.rdist { margin: 0; font-family: var(--head); font-size: 3em; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.rdist.foul { color: var(--red); }
.rrule { margin: .2em 0 .6em; font-size: .8em; color: #5b6b62; font-weight: 600; }
.rib {
  position: absolute; top: -.9em; right: -.8em; transform: rotate(6deg);
  background: var(--gold); color: var(--ink); font-family: var(--head); padding: .3em .8em; border-radius: .3em;
  box-shadow: 0 3px 0 #a87a14; animation: ribbon .6s cubic-bezier(.3,1.8,.5,1) .2s both;
}
@keyframes ribbon { from { transform: rotate(30deg) scale(0); } }
.rchips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em; margin: 0 0 .8em; }
.rchips div { background: #efe4c9; border-radius: .4em; padding: .2em .55em; }
.rchips dt { font-size: .66em; text-transform: uppercase; letter-spacing: .06em; color: #6a6a5a; font-weight: 700; }
.rchips dd { margin: 0; font-family: var(--head); color: var(--green); }
.rchips .g-perfect { background: var(--gold); } .rchips .g-good { background: #cfe8b4; } .rchips .g-foul { background: #ffd2c6; }
.rchips .s-stable { background: var(--gold); }

.final {
  position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(30em, 94vw); max-height: calc(100% - 1.5em - var(--safe-t) - var(--safe-b)); overflow: auto;
  animation: finalin .4s cubic-bezier(.3,1.4,.5,1);
}
@keyframes finalin { from { opacity: 0; transform: translate(-50%, -45%); } }
.fplace { margin: 0; font-family: var(--head); font-size: 2.6em; line-height: 1; color: var(--green); }
.fplace.p1 { color: #c48f12; } .fplace.p2 { color: #7d8a92; } .fplace.p3 { color: #a5602a; }
.fbest { margin: .2em 0 .6em; font-weight: 800; }
.ftable { list-style: none; padding: 0; margin: 0 0 .9em; columns: 2; column-gap: 1em; font-size: .85em; }
.ftable li, .ftop li { display: flex; justify-content: space-between; gap: .6em; padding: .12em 0; break-inside: avoid; }
.ftable li span:last-child, .ftop li span:last-child { font-family: var(--head); }
.ftable li.me, .ftop li.me { color: var(--red); font-weight: 800; }
.ftable li.ch { color: var(--blue); }
.fshare { display: grid; gap: .6em; margin-bottom: .8em; }
.chal label { font-size: .75em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #5b6b62; }
.chrow { display: flex; gap: .4em; }
.chrow input {
  flex: 1; min-width: 0; font: inherit; padding: .5em .7em; border: 2px solid #d9cba8; border-radius: .6em; background: #fff;
}
.chrow input:focus { outline: none; border-color: var(--green); }
.fbtns { display: flex; gap: .5em; flex-wrap: wrap; }
.fbtns .btn { flex: 1; }
.ftop h3, .fpb h3 { font-family: var(--head); font-weight: 400; color: var(--green); margin: 1em 0 .3em; font-size: 1.05em; }
.ftop ol { list-style: none; padding: 0; margin: 0; font-size: .85em; }
.ftop a { color: var(--green); font-weight: 700; }
.muted { color: #5b6b62; font-size: .8em; margin: 0 0 .3em; }
.fpb ul { margin: 0; padding-left: 1.1em; font-size: .85em; }

.overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(18,48,31,.55); padding: 1em; }
.overlay .card { max-width: 32em; max-height: 100%; overflow: auto; text-align: center; }
.help { text-align: left !important; }
.steps { padding-left: 1.3em; margin: 0 0 .8em; line-height: 1.4; }
.steps li { margin-bottom: .5em; }
.steps b { color: var(--red); }
.keys { font-size: .8em; color: #5b6b62; }

.embedlink {
  position: absolute; z-index: 5; right: .5em; bottom: calc(.5em + var(--safe-b));
  font-family: var(--head); font-size: .8em; color: var(--cream); background: rgba(29,77,58,.85);
  padding: .2em .6em; border-radius: 999px; text-decoration: none;
}
.embedsound { position: absolute; z-index: 5; right: .5em; top: .5em; }
body.embed .board { right: 3.4em; }
.toast {
  position: absolute; z-index: 9; left: 50%; top: 1em; transform: translateX(-50%);
  background: var(--ink); color: var(--cream); padding: .5em 1em; border-radius: .5em; font-weight: 700;
}

/* ---------- pysty ja kapea ---------- */
@media (max-width: 760px) {
  .brand h1 { font-size: 1.15em; }
  .tbtn span { display: none; }
  .tbtn { width: 2.3em; padding: 0; justify-content: center; }
  .tbtn.login { width: auto; padding: 0 .6em; }
  .tbtn.login span { display: inline; max-width: 5em; }
  .bootbtn { min-width: 0; grid-template-columns: auto; grid-template-rows: auto auto; justify-items: center; text-align: center; padding: .4em .6em; }
  .bootbtn .bi { grid-row: auto; }
  .bootbtn .bd { display: none; }
  .bootbtn .bn { font-size: .8em; }
  .say { bottom: calc(10.5em + var(--safe-b)); max-width: 80vw; font-size: .82em; }
  .hint { bottom: calc(7.6em + var(--safe-b)); font-size: .85em; width: max-content; }
  .board { width: 12.5em; font-size: .85em; }
}
@media (max-width: 420px) {
  .brand h1 { display: none; }
  .back { font-size: .85em; }
  .board { width: 11em; }
  .board li:nth-child(n+5):not(.me) { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .say { bottom: calc(5.2em + var(--safe-b)); }
  .hint { bottom: calc(5em + var(--safe-b)); }
  .bootbtn .bd { display: none; }
  .result { top: 18%; }
  .board li:nth-child(n+6):not(.me) { display: none; }
}
body.embed .hud, body.embed .board { top: .6em; }
body.embed .banner { top: .6em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}