/* Goatlane UI: native 1280x720 lobby artboard, uniformly fitted to the viewport.
   All frames use the production 9-slice insets; all labels are runtime text. */
:root { --ink:#30312d; --paper:#fff5df; --sun:#ffbe4d; --wood:#a77443; --wood-dark:#704b2b; }
html,body { margin:0; height:100%; background:#344b35; color:var(--ink); font-family:'Lilita One','Arial Black',sans-serif; overflow:hidden; }
body { display:flex; flex-direction:column; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; filter:grayscale(.85); opacity:.65; }
button:focus-visible,input:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px var(--ink); }
[hidden] { display:none !important; }
#game { flex:1; min-height:0; background:#344b35 url('../assets/art/pasture.webp') center/cover; }
#lobby,#waiting,#versus { position:fixed; width:1280px; height:720px; inset:0; margin:auto; zoom:var(--ui-scale,1); color:var(--ink); font:20px/1.3 'Lilita One','Arial Black',sans-serif; }
#lobby { z-index:20; }
#waiting { z-index:22; }
#versus { z-index:24; pointer-events:none; }
.backdrop { position:absolute; inset:calc(-1 * var(--bleed-y,0px)) calc(-1 * var(--bleed-x,0px)); overflow:hidden; container-type:inline-size; background:#89d0eb var(--meadow-background,url('../assets/art/pasture.webp')) center/cover no-repeat; z-index:-1; }
.logo { margin:0; }
.logo img { display:block; width:300px; height:80px; object-fit:contain; }
.topbar { position:absolute; top:12px; left:calc(24px - var(--bleed-x,0px)); right:calc(24px - var(--bleed-x,0px)); display:grid; grid-template-columns:1fr 300px 1fr; align-items:start; }
.player,.grass { height:58px; min-width:160px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:12px; color:white; border:solid transparent; border-width:18px 22px 20px; border-image:url('../assets/art/plate.webp') 36 44 40 44 fill / 18px 22px 20px stretch; padding:0; font-size:24px; text-shadow:0 2px var(--ink); }
.player { justify-self:start; }
.grass { justify-self:end; }
.player .ring { width:30px; height:30px; flex:none; border:3px solid var(--ink); border-radius:50%; background:white; }
.icon { display:inline-block; width:32px; height:32px; flex:none; background-image:url('../assets/art/icons.webp'); background-size:256px 128px; background-repeat:no-repeat; vertical-align:middle; }
.blades { width:32px; height:32px; background:url('../assets/art/icons.webp') 0 0 / 256px 128px no-repeat; display:inline-block; flex:none; }
.icon-copy { background-position:-32px 0; }
.icon-close { background-position:-96px 0; }
.icon-plus { background-position:-128px 0; }
.icon-minus { background-position:-160px 0; }
.battle,.btn-blue,.btn-green,.feed,.unlock,.step,#waiting button,#after button,.message button {
 background:none; border:solid transparent; padding:0 12px; color:white; text-shadow:0 2px var(--ink); box-sizing:border-box; font-size:24px; min-height:56px; display:inline-flex; align-items:center; justify-content:center;
}
.battle { border-width:20px 22px 22px; border-image:url('../assets/art/button-battle.webp') 40 44 44 44 fill / 20px 22px 22px stretch; font-size:44px; width:352px; height:86px; }
/* At a fractional device scale the nine-slice pieces anti-alias at their joins and the page shows
   through as hairlines beside the caps. Underneath, the image's 4px middle column (of 112) is
   stretched from x 25 to the width less 25 (28 x (100% - 50px) wide, centred), so the joins at 27
   show the button's own colours. The clip to the padding box (25px side borders, narrower than the
   27px caps drawn over them) keeps it from showing past the rounded ends on a taller button. */
.btn-blue,.step,#waiting button,#after button,.message button { border-width:8px 25px; border-image:url('../assets/art/button-round-blue.webp') 54 fill / 27px stretch; background:url('../assets/art/button-round-blue.webp') center / calc(2800% - 1400px) 100% no-repeat border-box padding-box; }
.btn-green,.feed,.unlock { border-width:8px 25px; border-image:url('../assets/art/button-round-green.webp') 54 fill / 27px stretch; background:url('../assets/art/button-round-green.webp') center / calc(2800% - 1400px) 100% no-repeat border-box padding-box; }
button:active:not(:disabled) { translate:0 2px; }
/* Buttons centred with translate keep their centring while pressed. */
.roamer:active:not(:disabled),.card .skill:active:not(:disabled) { translate:-50% 2px; }
.roamer.locked:active:not(:disabled) { translate:0 2px; }
.view { position:absolute; inset:96px 0 60px; }
.play { position:absolute; bottom:18px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:36px; }
.side { display:flex; flex-direction:column; align-items:center; gap:6px; }
.round { width:104px; height:104px; background:url('../assets/art/button-round-blue.webp') center/contain no-repeat; border:0; color:white; text-shadow:0 2px var(--ink); font-size:24px; padding:0; }
.round[data-mode="host"] { background-image:url('../assets/art/button-round-green.webp'); }
.side-note,.levels { background:#fff5df; border:2px solid var(--ink); border-radius:20px; padding:2px 10px; }
.side-note { font-size:18px; }
.levels { display:flex; gap:4px; padding:2px; }
.level { border:0; border-radius:14px; padding:4px 9px; background:none; font-size:16px; }
.level[aria-checked="true"] { background:var(--ink); color:white; }
.pasture { position:absolute; left:64px; right:64px; bottom:150px; height:190px; }
.roamer { position:absolute; bottom:0; translate:-50% 0; display:flex; flex-direction:column; align-items:center; border:0; padding:0; background:none; }
.roamer canvas { width:120px; height:auto; display:block; }
.bar { position:relative; display:block; width:80px; height:18px; background:#57452e; border:3px solid var(--ink); border-radius:20px; overflow:hidden; box-sizing:border-box; }
.bar i { display:block; height:100%; width:var(--fill); background:#ffd34a; }
.roamer.picked::before { content:''; position:absolute; bottom:8px; width:120px; height:28px; border:4px solid white; border-radius:50%; }
/* The sprite has 22px of empty canvas under the feet: the bar tucks up to just below them, and a
   contact shadow sits on the feet line (the same shadow as the entry screen). */
.roamer::after { content:''; position:absolute; bottom:12px; left:50%; width:118px; height:22px; translate:-50% 0; z-index:-1; border-radius:50%; background:radial-gradient(ellipse at center,rgba(27,43,22,.5) 0%,rgba(27,43,22,.34) 32%,rgba(27,43,22,.12) 58%,rgba(27,43,22,0) 74%); pointer-events:none; }
.roamer.locked::after { display:none; }
.zzz { display:none; position:absolute; top:42%; left:58%; pointer-events:none; color:#fff5df; font-size:22px; text-shadow:0 2px var(--ink),-1px -1px var(--ink),1px -1px var(--ink); }
.roamer.asleep .zzz { display:block; }
.zzz b { position:absolute; font-weight:400; opacity:0; animation:zzz 2.4s linear infinite; }
.zzz b:nth-child(2) { animation-delay:.8s; }
.zzz b:nth-child(3) { animation-delay:1.6s; }
@keyframes zzz { 0% { opacity:0; translate:0 0; scale:.7; } 20% { opacity:1; } 100% { opacity:0; translate:26px -46px; scale:1.2; } }
.roamer > .bar { margin-top:-14px; width:66px; height:14px; border-width:2px; box-shadow:0 0 0 2px #fff5df; }
.roamer[data-stamina="high"] .bar i { background:#5fcf3a; }
.roamer[data-stamina="low"] .bar i { background:#e2553f; }
.pen { position:absolute; right:0; bottom:0; width:320px; display:flex; justify-content:space-around; align-items:flex-end; }
.pen:not(:has(.locked)) { display:none; }
.roamer.locked { position:relative; translate:none; min-width:146px; padding-bottom:48px; }
.roamer.locked > canvas { opacity:.4; }
.roamer.locked .bar { display:none; }
.fence { position:absolute; bottom:48px; width:100%; height:84px; z-index:2; pointer-events:none; background:url('../assets/art/pen-fence.webp') center/100% 100% no-repeat; }
.pen-label { position:absolute; bottom:0; z-index:3; width:144px; font-size:18px; background:#fff5df; border:3px solid var(--ink); border-radius:12px; line-height:1.15; padding:5px 0; }
.lock-mark { display:block; font-size:28px; line-height:1; }
.goat-card,.board,#waiting .sign,.message,#after {
 box-sizing:border-box; border:solid transparent; border-width:28px 28px 32px; border-image:url('../assets/art/panel.webp') 28 28 32 28 fill / 28px 28px 32px stretch;
}
.goat-card { position:absolute; top:10px; left:50%; translate:-50% 0; width:450px; height:224px; display:grid; grid-template-columns:130px 1fr; align-content:center; gap:10px 12px; padding:0; z-index:3; text-align:center; }
.goat-card .detail-goat { grid-row:1/5; align-self:center; }
.goat-card .detail-goat canvas { width:130px; display:block; height:auto; }
.goat-card .name { background:var(--c); border:2px solid var(--ink); border-radius:20px; justify-self:center; padding:1px 20px; }
.goat-card b { font-weight:400; font-size:18px; }
.goat-card .close,.board .close { position:absolute; right:-16px; top:-16px; border:0; background:none; width:48px; height:48px; font-size:28px; }
.board .close { z-index:1; }
.meter { position:relative; display:block; height:26px; border:3px solid var(--ink); border-radius:20px; background:#57452e; overflow:hidden; box-sizing:border-box; }
.meter i { position:absolute; left:0; top:0; bottom:0; background:#ffd34a; }
.meter em { position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-style:normal; }
.goat-card .feed { width:210px; height:56px; font-size:19px; }
.goat-card .feed-note { font-size:15px; margin:0; }
.goat-card.locked { display:flex; flex-direction:column; height:auto; min-height:210px; }
.note { position:absolute; bottom:142px; left:50%; translate:-50% 0; margin:0; background:#fff5df; border:3px solid var(--ink); border-radius:18px; padding:5px 16px; font-size:17px; max-width:650px; text-align:center; z-index:4; }
.tabs { position:absolute; left:calc(-1 * var(--bleed-x,0px)); right:calc(-1 * var(--bleed-x,0px)); bottom:calc(-1 * var(--bleed-y,0px)); height:60px; background:url('../assets/art/tabs.webp') center/1280px 60px repeat-x; display:flex; justify-content:center; }
.tab { width:240px; background:none; border:0; border-right:2px solid #704b2b; color:#c9a77c; font-size:26px; text-shadow:0 2px #3d2716; }
.tab:hover:not([aria-current="true"]) { color:#fff5df; }
/* The open view's tab is lit like the Battle button, so it reads at a glance against the board. */
.tab[aria-current="true"] { color:white; background:linear-gradient(#ffcf5a,#f2a634); text-shadow:0 2px var(--ink),-1px -1px var(--ink),1px -1px var(--ink); box-shadow:inset 0 3px 0 #ffe9a8,inset 0 -5px 0 #c47f1c,0 0 0 2px var(--ink); }
.refill { position:absolute; right:28px; top:18px; font-size:17px; color:var(--paper); }
.board { position:absolute; left:64px; top:12px; width:1152px; height:408px; padding:0 0 8px; }
.herd-head { display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:-8px; margin-bottom:12px; }
h2 { font-weight:400; margin:0; font-size:32px; }
.herd-head h2 { font-size:36px; }
.total { font-size:24px; }
.cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.card,.tile { border:solid transparent; border-width:12px 12px 14px; border-image:url('../assets/art/card.webp') 24 24 28 24 fill / 12px 12px 14px stretch; background:none; box-sizing:border-box; }
.card { position:relative; display:flex; flex-direction:column; align-items:center; height:300px; padding:0 4px; gap:7px; }
.card .name { order:-2; width:100%; text-align:center; font-size:18px; border:2px solid var(--ink); border-radius:18px; background:var(--c); }
.card .chips { order:-1; display:flex; justify-content:center; gap:6px; }
.chip { background:var(--c); border:2px solid var(--ink); border-radius:12px; padding:3px 8px; min-height:32px; font-size:14px; opacity:.6; }
.chip.on { opacity:1; outline:2px solid var(--ink); }
.stage { height:96px; display:flex; justify-content:center; }
.card canvas { width:112px; height:auto; object-fit:contain; }
.weight { display:flex; align-items:center; justify-content:space-between; gap:5px; width:100%; }
.weight b { font-size:24px; font-weight:400; }
.step { width:40px; height:40px; min-height:40px; border-width:16px; border-image:url('../assets/art/button-battle.webp') 40 44 44 44 fill / 16px stretch; background:none; font-size:28px; padding:0; line-height:8px; }
.card .cost { font-size:18px; order:1; }
.card .skill { font-size:16px; order:2; font:inherit; font-size:15px; background:#fff5df; border:2px solid var(--ink); border-radius:14px; padding:0 10px; cursor:pointer; color:inherit; }
.card .skill::after { content:' ›'; }
.xp { display:block; width:100%; height:6px; border-radius:4px; background:#3d2716; overflow:hidden; order:3; }
.xp i { display:block; height:100%; background:#159ee0; }
.xp.big { height:12px; border:2px solid var(--ink); }
.message.skills { width:620px; gap:8px; padding:16px 22px; }
.skills-xp,.skills-lead,.skills-note { font-size:17px; }
.skills-note { opacity:.75; font-size:15px; }
.skill-list { display:flex; flex-direction:column; gap:6px; width:100%; }
.message .xp { order:0; }
.message .skill-option { border-image:none; min-width:0; min-height:0; text-shadow:none; }
.skill-option em { white-space:nowrap; }
.message .skill-option { display:grid; grid-template-columns:140px 1fr 70px; align-items:center; gap:10px; text-align:left; font:inherit; font-size:16px; background:#fff5df; border:2px solid #dbcaa2; border-radius:10px; padding:6px 12px; color:inherit; cursor:pointer; }
.skill-option b { font-weight:400; font-size:19px; line-height:1.1; }
.skill-option span { font-size:15px; line-height:1.2; }
.skill-option em { font-style:normal; text-align:right; color:#159ee0; }
.skill-option.on { border-color:var(--c); box-shadow:inset 0 0 0 2px var(--c); }
.skill-option:disabled:not(.on) { filter:grayscale(1); opacity:.6; cursor:not-allowed; }
.skill-option.on:disabled { filter:none; opacity:1; cursor:default; }
.card .bar { order:3; width:100%; height:26px; }
.card .bar em { position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-style:normal; }
.card .unlock { display:none; width:100%; font-size:16px; min-height:56px; padding:0; }
.card.locked .unlock { display:block; margin-top:auto; }
.card.locked :is(.weight,.chips,.bar,.cost,.skill,.name) { display:none; }
.card.locked .stage { height:180px; opacity:.35; }
.card.locked::before { content:''; position:absolute; top:140px; width:100%; height:50px; background:url('../assets/art/pen-fence.webp') center/contain no-repeat; }
.hint { text-align:center; font-size:16px; margin:8px 0; }
.herd-play { position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; }
.start { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:14px; }
.start .logo img { width:380px; height:100px; }
.start-heading { text-align:center; border:solid transparent; border-width:18px 20px 22px; border-image:url('../assets/art/panel.webp') 28 28 32 28 fill / 18px 20px 22px stretch; padding:0 20px; }
.start-heading h2 { font-size:36px; }
.start-heading p { margin:4px 0 0; font-size:20px; }
.tiles { display:grid; grid-template-columns:repeat(4,252px); gap:18px; }
.tile { position:relative; height:320px; display:flex; flex-direction:column; align-items:center; padding:8px 12px; font-size:24px; gap:6px; }
.tile .pic canvas { width:172px; height:auto; display:block; }
.tile .pic { margin-top:4px; }
.tile b { order:-1; font-weight:400; }
.tile small { font-size:20px; margin-top:auto; }
.tile .skill-icon { width:68px; height:60px; object-fit:contain; }
.tile[aria-pressed="true"] { outline:5px solid var(--sun); outline-offset:-6px; border-radius:20px; }
.tile-check { position:absolute; right:2px; top:2px; pointer-events:none; }
.tile-el { position:absolute; left:6px; top:6px; width:22px; height:22px; padding:7px; border-radius:50%; background:var(--c); border:3px solid var(--ink); pointer-events:none; }
.selection-count { margin:0; font-size:24px; }
.start .battle { width:352px; height:74px; min-height:74px; font-size:32px; }
.start .starter-note { margin:0; font-size:17px; }
#waiting .logo { position:absolute; top:20px; left:490px; }
#waiting .sign { position:absolute; top:140px; left:310px; width:660px; height:440px; padding:8px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
#waiting .sign > * { flex-shrink:0; }
#waiting .waiting-actions { display:flex; gap:12px; }
#waiting .sign p { margin:0; }
#waiting .waiting-text { white-space:pre-line; }
#waiting h2 { font-size:34px; }
#waiting .walker canvas { width:120px; height:auto; }
#waiting button { width:200px; height:56px; }
#waiting input { box-sizing:border-box; width:560px; height:48px; border:3px solid var(--ink); border-radius:12px; background:#fff5df; color:var(--ink); padding:0 12px; text-align:center; font-size:16px; }
#waiting .copy { border-image-source:url('../assets/art/button-round-green.webp'); background-image:url('../assets/art/button-round-green.webp'); }
#waiting .meter { width:440px; }
#waiting .waiting-note { position:absolute; bottom:80px; left:0; right:0; text-align:center; font-size:18px; }
#waiting .progress-label { font-size:24px; }
#versus .logo { position:absolute; top:18px; left:490px; }
#versus .side { position:absolute; top:150px; width:440px; height:420px; display:flex; flex-direction:column; align-items:center; gap:12px; }
#versus .us { left:64px; }
#versus .them { right:64px; }
#versus .side::before { content:''; position:absolute; inset:140px 0 0; z-index:-1; background:url('../assets/art/versus-blue.webp') center/contain no-repeat; opacity:.8; }
#versus .them::before { background-image:url('../assets/art/versus-red.webp'); filter:hue-rotate(-22deg); }
#versus b { display:block; width:360px; height:72px; box-sizing:border-box; text-align:center; border:solid transparent; border-width:18px 22px 20px; border-image:url('../assets/art/plate.webp') 36 44 40 44 fill / 18px 22px 20px stretch; font-weight:400; font-size:28px; color:white; }
#versus .goat canvas { width:320px; height:auto; }
#versus .portraits { display:flex; gap:8px; }
#versus .portraits canvas { width:50px; height:auto; border:2px solid var(--ink); border-radius:8px; background:var(--paper); }
#versus .vs { position:absolute; top:290px; left:555px; width:170px; height:170px; }
#versus .vs img { width:100%; height:100%; }
#versus .rule { position:absolute; left:0; right:0; bottom:24px; text-align:center; }
#versus .ready { position:absolute; top:540px; left:528px; }
#versus .ready canvas { width:224px; height:140px; object-fit:contain; }
.ui-burst { position:fixed; z-index:60; pointer-events:none; }
.ui-anim { flex:none; pointer-events:none; }
.message-shade { position:fixed; inset:0; background:#17241d70; z-index:50; display:grid; place-items:center; }
.message { width:520px; min-height:300px; padding:12px; text-align:center; font-size:20px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.message h2 { font-size:30px; }
.message p { margin:0; }
.message .message-actions { display:flex; justify-content:center; gap:12px; }
.message button { min-width:180px; font-size:20px; }
.message.profile { width:640px; gap:10px; justify-content:flex-start; padding:16px 22px; }
.profile-head { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; }
.profile-wallet { font-size:18px; opacity:.75; }
.profile-rating { display:flex; flex-direction:column; align-items:center; line-height:1; }
.profile-rating b { font-size:52px; font-weight:400; color:#159ee0; }
.profile-rating span { font-size:16px; }
.profile-stats { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.profile-stats div { display:flex; flex-direction:column; background:#fff5df; border:2px solid #dbcaa2; border-radius:10px; padding:6px; }
.profile-stats b { font-size:26px; font-weight:400; }
.profile-stats span { font-size:15px; }
.message.profile h3 { margin:4px 0 0; font-size:20px; font-weight:400; align-self:flex-start; }
.profile-recent { width:100%; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.profile-recent li { display:grid; grid-template-columns:70px 1fr auto; text-align:left; background:#fff5df; border-radius:8px; padding:3px 12px; font-size:18px; }
.profile-recent li.win b { color:#3f9a2c; }
.profile-recent li.loss b { color:#d2483c; }
.profile-recent b { font-weight:400; }
.profile-empty { font-size:17px; opacity:.8; align-self:flex-start; }
.profile-deck { display:flex; gap:10px; align-self:flex-start; }
.enter-code { cursor:pointer; font:inherit; font-size:18px; color:inherit; white-space:nowrap; }
.message.code-entry { min-height:0; }
.code-entry input { width:230px; text-align:center; font:40px 'Lilita One','Arial Black',sans-serif; letter-spacing:10px; padding:6px; border:3px solid var(--ink); border-radius:12px; background:white; }
.code-error { min-height:22px; color:#d2483c; font-size:17px; }
#waiting .invite-code { margin:0; font-size:22px; }
#waiting .invite-code b { font-size:44px; font-weight:400; letter-spacing:8px; color:#159ee0; margin-left:8px; }
.profile-deck div { display:flex; flex-direction:column; align-items:center; font-size:15px; }
.toast { position:absolute; top:100px; left:50%; translate:-50% 0; z-index:40; background:var(--paper); border:3px solid var(--ink); border-radius:14px; padding:8px 16px; max-width:800px; font-size:20px; }
#after { position:fixed; z-index:18; width:752px; min-height:480px; height:fit-content; inset:0; margin:auto; zoom:var(--ui-scale,1); padding:0 18px 12px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; background:none; color:var(--ink); }
#after .result-banner { height:132px; width:360px; display:flex; align-items:center; justify-content:center; }
#after .result-banner canvas { width:216px; height:216px; }
#after .score { font-size:40px; }
#after .status { margin:0; font-size:20px; min-height:26px; }
#after .reward { width:100%; display:grid; grid-template-columns:1fr auto; gap:8px; background:#fff5df; border:2px solid #dbcaa2; border-radius:10px; padding:10px 18px; box-sizing:border-box; font-size:22px; }
#after .reward b { color:#65a737; font-size:30px; font-weight:400; }
#after .reward b.rating-change.down { color:#d2483c; }
#after .reward b.xp-gain { color:#159ee0; }
#after .reward .level-ups { grid-column:1 / -1; text-align:center; color:#c47f1c; font-size:20px; }
#after .reward span { font-size:18px; }
#after .reward .stamina-total { color:#bd8126; }
#after .result-herd { display:flex; justify-content:center; gap:18px; min-height:70px; }
#after .result-herd .portrait { background:var(--paper); border-radius:12px; padding:4px 14px; }
#after .result-herd canvas { width:70px; display:block; }
#after .result-herd small { font-size:14px; }
#after .row { display:flex; justify-content:center; gap:12px; }
#after button { min-width:204px; height:64px; font-size:24px; }
#after button:first-child { border-width:20px 22px 22px; border-image:url('../assets/art/button-battle.webp') 40 44 44 44 fill / 20px 22px 22px stretch; background:none; }
#after button:last-child { border-image-source:url('../assets/art/button-round-green.webp'); background-image:url('../assets/art/button-round-green.webp'); }
#after.message-panel { min-height:300px; width:520px; }
#after.message-panel .row { flex-wrap:wrap; }
#after.message-panel button { min-width:160px; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }


.start { gap:10px; }
.start .logo img { width:340px; height:80px; }
.start-heading { border-width:14px 20px 18px; }
.start-heading h2 { font-size:32px; }
.tile { height:300px; gap:0; padding:4px 12px; }
.tile .pic canvas { width:180px; }
.tile .skill-icon { width:80px; height:60px; order:2; }
.tile small { order:3; margin-top:0; }


.roamer canvas { width:180px; }
.board { height:450px; }
.card { height:322px; display:block; }
.card .name { position:absolute; top:0; left:4px; right:4px; width:auto; }
.card .chips { position:absolute; top:32px; left:0; right:0; }
.card .chip { font-size:12px; min-height:24px; padding:1px 6px; }
.card .stage { position:absolute; top:60px; left:0; right:0; height:105px; }
.card canvas { width:140px; height:121px; }
.card .weight { position:absolute; top:166px; left:4px; right:4px; width:auto; }
.card .cost { position:absolute; top:210px; left:0; right:0; text-align:center; }
.card .skill { position:absolute; top:236px; left:50%; translate:-50% 0; white-space:nowrap; text-align:center; }
.card .xp { position:absolute; top:272px; left:10px; right:10px; width:auto; }
.card.locked .xp { display:none; }
.card .bar { position:absolute; bottom:2px; left:4px; right:4px; width:auto; }
.card.locked .unlock { position:absolute; bottom:12px; left:0; right:0; font-size:14px; }
.card.locked .stage { top:20px; height:170px; }
.card.locked::before { top:140px; }
body:has(#after:not([hidden])) { background:#89d0eb url('../assets/art/pasture.webp') center/cover; }
body:has(#after:not([hidden])) #game { visibility:hidden; }


.lock-mark canvas { display:block; margin:0 auto; width:32px; height:32px; }
.card-lock { display:none; position:absolute; top:80px; left:50%; translate:-50% 0; }
.card.locked .card-lock { display:block; }
#versus .ready { width:224px; left:528px; top:535px; text-align:center; font-size:32px; }
#after .result-header { position:absolute; left:50%; top:-24px; translate:-50% 0; width:1180px; display:flex; justify-content:center; }
#after .result-header img { display:none; }
#after .result-balance { position:absolute; right:0; top:10px; display:flex; gap:12px; align-items:center; background:url('../assets/art/plate.webp') center/100% 100% no-repeat; width:160px; height:58px; justify-content:center; color:white; font-size:26px; }
#after .result-herd canvas { width:100px; height:auto; }
#after .status { max-width:630px; }

/* Artboard placement corrections: controls fit inside their intended regions. */
.goat-card { gap:4px 10px; }
.goat-card .detail-goat { grid-row:1 / 6; }
.goat-card .detail-goat canvas { width:155px; }
.goat-card .feed-note { grid-column:2; font-size:14px; }
.bar i,.meter i { background-size:100% 100%; background-repeat:no-repeat; }
.board { height:444px; }
.herd-head { position:absolute; left:0; right:0; top:-8px; margin:0; }
.herd-head h2 { font-size:32px; line-height:1.1; }
.total { font-size:20px; line-height:1.2; }
.cards { position:absolute; left:8px; right:8px; top:68px; }
.hint { display:none; }
.pasture { bottom:174px; }
.play { height:132px; }
.play > .battle { position:absolute; left:464px; top:18px; }
.play > .side:first-child { position:absolute; left:286px; top:0; width:190px; }
.play > .side.invite-side { position:absolute; left:852px; top:0; width:104px; }
.play > .side.ranked-side { position:absolute; left:990px; top:0; width:130px; }
.round[data-mode="ranked"] { filter:hue-rotate(70deg) saturate(1.2); }
.round[data-mode="ranked"].closed { filter:grayscale(.85); opacity:.75; }
.card .skill { top:233px; }
.card .bar { bottom:8px; }

#after .score-us { color:#159ee0; }
#after .score-them { color:#e85a59; }
#after .result-stamina { position:relative; display:block; width:120px; height:22px; border:2px solid var(--ink); border-radius:12px; background:#57452e; overflow:hidden; }
#after .result-stamina i { position:absolute; inset:0 auto 0 0; width:var(--fill,0%); background:#ffd34a; }
#after .result-stamina em { position:absolute; inset:0; display:grid; place-items:center; font-style:normal; }

:is(.roamer,.card,.goat-card).tired :is(.bar,.meter) i { background:#ee6765; }

/* Keep readiness help clear of the moving herd and the main action row. */
.note.tired { top:28px; bottom:auto; left:64px; translate:none; width:280px; padding:12px; }
.bar em,.meter em,#after .result-stamina em { color:white; text-shadow:-1px -1px var(--ink),1px -1px var(--ink),-1px 1px var(--ink),1px 1px var(--ink); }
:is(.roamer,.card,.goat-card).tired :is(.bar,.meter) { background:#74413c; }

#after .result-banner { font-size:56px; color:#ffbe4d; text-shadow:2px 2px var(--ink); }

/* Cloud movement uses only compositor transforms, never gameplay/layout updates. */
.sky-cloud { position:absolute; left:calc(-1 * var(--cloud-width)); top:calc(var(--cloud-top) + var(--bleed-y,0px)); width:var(--cloud-width); height:var(--cloud-height); background:var(--cloud-image) center/100% 100% no-repeat; pointer-events:none; animation:cloud-drift var(--cloud-duration) linear infinite; animation-delay:var(--cloud-delay); }
.cloud-one { --cloud-width:146px; --cloud-height:86px; --cloud-top:37px; --cloud-image:var(--cloud-1); --cloud-duration:285.2s; --cloud-delay:-72.8s; }
.cloud-two { --cloud-width:116px; --cloud-height:68px; --cloud-top:48px; --cloud-image:var(--cloud-2); --cloud-duration:465.333s; --cloud-delay:-319.333s; }
.cloud-three { --cloud-width:146px; --cloud-height:86px; --cloud-top:82px; --cloud-image:var(--cloud-3); --cloud-duration:356.5s; --cloud-delay:-323.5s; }
@keyframes cloud-drift { from { transform:translateX(0); } to { transform:translateX(calc(100cqw + var(--cloud-width))); } }
.meadow-scenery { display:none; position:fixed; inset:0; margin:auto; width:1280px; height:720px; zoom:var(--ui-scale,1); pointer-events:none; z-index:17; }
body:has(#after:not([hidden])) .meadow-scenery { display:block; }
@media(prefers-reduced-motion:reduce) {
 .sky-cloud { animation:none; }
 .cloud-one { transform:translateX(364px); }
 .cloud-two { transform:translateX(958px); }
 .cloud-three { transform:translateX(1294px); }
}

/* The arena's way out, in its empty top-left corner; hidden while any other screen is on top. */
#leave { position:fixed; z-index:15; zoom:var(--ui-scale,1); left:calc(var(--bleed-x,0px) + 16px); top:calc(var(--bleed-y,0px) + 14px); width:140px; height:52px; color:white; font:24px 'Lilita One','Arial Black',sans-serif; text-shadow:0 2px var(--ink); cursor:pointer; }
body:has(#lobby) #leave, body:has(#waiting) #leave, body:has(#versus) #leave, body:has(#after:not([hidden])) #leave, body:has(.message-shade) #leave { display:none; }

/* Phones held upright get a prompt instead of a tiny arena. */
#rotate { display:none; }
@media (orientation:portrait) and (max-width:900px) {
 #rotate { display:grid; place-items:center; position:fixed; inset:0; z-index:200; padding:16px; background:#89d0eb url('../assets/art/pasture.webp') center/cover; }
 #rotate p { box-sizing:border-box; width:100%; max-width:360px; margin:0; padding:20px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font:18px/1.3 'Lilita One','Arial Black',sans-serif; color:var(--ink); border:solid transparent; border-width:28px 28px 32px; border-image:url('../assets/art/panel.webp') 28 28 32 28 fill / 28px 28px 32px stretch; }
 #rotate img { width:220px; height:auto; }
 #rotate b { font-size:26px; }
}
/* Sound toggle under the Grass plate. */
.sound-toggle { position:absolute; top:66px; right:0; width:48px; height:48px; border-radius:50%; border:3px solid var(--ink); background:#fff5df; padding:8px; cursor:pointer; }
.sound-toggle svg { width:100%; height:100%; display:block; }
.sound-toggle .cross { display:none; }
.sound-toggle.muted .cross { display:inline; }
.sound-toggle.muted .waves { display:none; }
button.player { cursor:pointer; font:inherit; font-size:24px; background:none; border-radius:0; box-shadow:none; }
/* Entry screen: one clear primary action, owned goats, and readable supporting copy. */
.start.entry { padding:22px 0 0; gap:0; }
.entry .logo img { width:360px; height:96px; }
.entry-intro { text-align:center; margin-top:8px; }
.entry-intro .entry-eyebrow { display:inline-block; margin:0 0 8px; padding:5px 18px; border:2px solid var(--ink); border-radius:24px; background:var(--paper); font-size:17px; box-shadow:0 3px 0 var(--ink); }
.entry-intro h2 { margin:0; font-size:48px; line-height:1.12; color:var(--paper); text-shadow:0 3px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink); }
.entry-intro > p:last-child { margin:12px 0 0; font-size:22px; color:var(--ink); }
.entry .entry-goats { display:flex; gap:28px; align-items:flex-end; height:166px; margin:10px 0 16px; }
.entry-element { position:relative; width:170px; height:166px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.entry-element::before { content:''; position:absolute; bottom:35px; left:18px; width:134px; height:26px; border-radius:50%; background:radial-gradient(ellipse at center,rgba(27,43,22,.38) 0%,rgba(27,43,22,.25) 30%,rgba(27,43,22,.10) 55%,rgba(27,43,22,0) 74%); transform:skewX(-12deg); pointer-events:none; }
.entry-element::after { content:''; position:absolute; bottom:43px; left:32px; width:106px; height:9px; border-radius:50%; background:radial-gradient(ellipse at center,rgba(22,33,17,.28),rgba(22,33,17,0) 72%); pointer-events:none; }
.entry .entry-goats canvas { position:relative; z-index:1; display:block; width:180px; height:auto; flex:none; margin-bottom:-7px; }
.entry-element > span { position:relative; min-width:84px; text-align:center; box-sizing:border-box; padding:3px 12px; border:2px solid var(--ink); border-radius:20px; background:var(--paper); font-size:17px; box-shadow:0 2px 0 var(--ink); }
.entry-choices { display:grid; grid-template-columns:1fr 1fr; gap:0; width:820px; padding:18px 24px 20px; box-sizing:border-box; background:var(--paper); border:4px solid var(--ink); border-radius:28px; box-shadow:0 8px 0 var(--ink); }
.entry-choice { display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 20px; }
.entry-guest { border-right:2px solid #d8c8a5; }
.entry-route { font-size:19px; line-height:1.1; }
.entry .entry-choice button { width:332px; height:68px; min-height:68px; font-size:28px; white-space:nowrap; }
.entry .guest-in { gap:14px; }
.entry .wallet-in { font-size:26px; }
.entry-choice p { margin:0; font-family:'Lilita One','Arial Black',sans-serif; font-size:17px; line-height:1.4; color:#61533f; text-align:center; }
.entry-footer a { color:#1d6fa3; }
.entry-footer { margin:14px 0 0; padding:5px 16px; border-radius:18px; background:#fff5dfdb; font-size:16px; color:var(--ink); }
.message.season .profile-recent li { align-items:center; }
.message.season .claim { min-width:0; height:40px; font-size:17px; }
/* The ladder scrolls inside the panel; the viewer's own row stands out and an ellipsis marks the gap above it. */
.ladder-list { max-height:min(52vh,420px); overflow-y:auto; }
.ladder-list li { align-items:center; }
.ladder-list li.me { background:#ffe39a; outline:2px solid #e0a92c; outline-offset:-2px; }
.ladder-list li.gap { background:none; padding:0 12px; color:#8a7b62; }
.goat-card .buy-token { grid-column:2; justify-self:center; background:none; border:0; padding:0; font-size:14px; color:#1d6fa3; text-decoration:underline; }
/* With the token shop, the skills panel has three buttons; they size to their labels on one line. */
.message.skills .message-actions:has(> :nth-child(3)) button { min-width:0; padding:0 6px; font-size:18px; white-space:nowrap; }
/* Four buttons (the wallet profile) share the row equally instead of each asking for 180px. */
.message .message-actions:has(> :nth-child(4)) { width:100%; gap:8px; }
.message .message-actions:has(> :nth-child(4)) button { min-width:0; flex:1 1 0; padding:0; font-size:18px; white-space:nowrap; }
.message.link-wallet { width:560px; }
.link-points { margin:0; padding-left:22px; text-align:left; font-size:18px; display:flex; flex-direction:column; gap:6px; }
.tier-badge { display:inline-block; vertical-align:middle; flex:none; }
.plate-tier:empty { display:none; }
.plate-tier { display:flex; margin-right:-4px; }
.side-note .tier-badge { margin:-3px 2px 0 0; }
.profile-tier { display:flex; align-items:center; gap:10px; text-align:left; line-height:1.1; }
.profile-tier b { display:block; font-size:30px; font-weight:400; }
.profile-tier span, .profile-tier em { display:block; font-size:15px; font-style:normal; }
.profile-tier em { opacity:.7; }
#versus .vs-tier { display:flex; align-items:center; justify-content:center; gap:6px; font-size:20px; color:white; text-shadow:0 2px var(--ink); min-height:30px; }
#after .tier-move { grid-column:1 / -1; font-size:22px; }
#after .tier-move.up, #after .tier-move.placed { color:#2f8f2f; }
#after .tier-move.down { color:#b5442f; }
.ranked-side .side-note { white-space:nowrap; font-size:16px; display:flex; align-items:center; gap:2px; }