@font-face{font-family:Nunito;src:url('../../assets/fonts/Nunito-Variable.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{font-family:Nunito,'Arial Rounded MT Bold',system-ui,sans-serif;color:#4c2418;background:#eddfc7;font-synthesis:none;--paper:#fff8e9;--orange:#ff792b;--ink:#4c2418;--muted:#866b54;--line:#eddbba;--green:#527f3b}
*{box-sizing:border-box}body{margin:0;padding-top:var(--tg-safe-top,0px);padding-bottom:max(env(safe-area-inset-bottom),var(--tg-safe-bottom,0px))}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid #46759b;outline-offset:3px}[hidden]{display:none!important}
.shell{max-width:480px;min-height:100dvh;margin:auto;background:var(--paper);overflow:clip;position:relative}header{height:64px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 18px;border-bottom:1px solid #eadbbf;background:#fffaf0;position:relative;z-index:5}.brand{text-decoration:none;font-weight:1000;font-size:19px;line-height:1.05;text-align:center;flex:1}.brand span{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:4px}.build-tag{display:none}header .small-button{border:0;background:#f3e6cd;border-radius:50%;width:40px;height:40px;padding:0;font-size:11px;font-weight:900}#leaveRoomButton{order:-1}.screen{padding:20px 18px 12px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:1.4px;color:var(--muted)}h1{font-weight:1000;font-size:clamp(32px,9vw,43px);line-height:1.04;letter-spacing:-1.3px;margin:4px 0 18px;text-align:center;text-wrap:balance}h1 em{font-style:normal;color:var(--orange)}h2{font-weight:1000;font-size:25px;line-height:1.12;letter-spacing:-.6px;margin:12px 0}h3{font-size:15px;font-weight:1000;margin:0}.intro{font-size:14px;line-height:1.45;color:#79573e;text-align:center;margin:14px 0 20px}.footnote{font-size:12px;line-height:1.4;color:var(--muted);text-align:center;margin:10px 0}.primary,.secondary{display:block;width:100%;min-height:58px;padding:12px 14px;border:3px solid var(--ink);border-radius:20px;font-weight:1000;font-size:23px;text-align:center;line-height:1.15}.primary{background:#ff7c2e;color:#fffdf4;box-shadow:inset 0 -5px 0 #e85d20,0 3px 0 #4c241814;text-shadow:0 1px 0 #ad481c;margin-top:12px}.primary:hover:not(:disabled){background:#ff8b3d}.primary:active:not(:disabled){translate:0 2px;box-shadow:inset 0 -2px 0 #e85d20}.primary:disabled{background:#e4d9c1;border-color:#d2bea0;box-shadow:none;color:#9e886b;text-shadow:none}.secondary{color:var(--ink);background:#fff7e5;font-size:18px;margin-top:12px;box-shadow:inset 0 -3px 0 #f0dfbf}.small-button{background:#fff7e5;border:2px solid #d8c2a0;border-radius:12px;padding:10px 14px;min-height:40px;font-size:12px;font-weight:900}.text-button{display:block;background:none;border:0;margin:16px auto 2px;padding:8px;text-decoration:underline;text-underline-offset:4px;font-size:13px;font-weight:800}.rule-chip{border-radius:14px;background:#f7e8cc;padding:9px 12px;text-align:center;font-size:13px;font-weight:900;margin:10px 0}.rule-chip span{padding:0 8px;color:#bc9261}
.yard-scene{background:#e8e8c8 url('../../assets/ui/yard.svg') center bottom/cover no-repeat;position:relative}.animal{position:relative;width:100%;aspect-ratio:1}.animal img{display:block;width:100%;height:100%;object-fit:contain}.animal.mirror img{transform:scaleX(-1)}.rig-stage,.rig-stage>div{width:100%;height:100%}.rig-stage svg{display:block;width:100%;height:100%;overflow:visible}.targets{position:absolute;inset:0;pointer-events:none}.animal.mirror .targets{transform:scaleX(-1)}.animal.mirror .target{transform:translate(-50%,-50%) scaleX(-1)}.target{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;display:none;place-items:center;background:#fff7e9;border:2px solid var(--ink);font-size:11px;font-weight:1000}.target.attack-target,.target.block-target{display:grid}.target.attack-target{background:#ff7c2e;color:white;box-shadow:0 0 0 4px #fff7e980}.target.block-target{background:#5c8e45;color:white;box-shadow:0 0 0 4px #fff7e980}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 10px}.character-card{padding:0;border:0;background:transparent;min-width:0;text-align:center;position:relative}.card-animal{height:83px;border-radius:17px;background:#f5e4bf;border:3px solid transparent;display:flex;align-items:center;justify-content:center;overflow:hidden}.character-card:nth-child(2) .card-animal{background:#f1d7d3}.character-card:nth-child(3) .card-animal{background:#dce2b5}.character-card:nth-child(4) .card-animal{background:#e3d5ee}.card-animal .animal{width:95px;flex-shrink:0}.card-animal .targets{display:none}.character-card strong{display:block;font-size:14px;font-weight:1000;margin-top:5px}.character-card>span{display:none}.character-card.selected .card-animal{border-color:#ff7c2e;box-shadow:0 0 0 2px #fffaf0 inset}.character-card.selected:after{content:'✓';position:absolute;right:-2px;top:-3px;width:24px;height:24px;border:2px solid #fff9ec;border-radius:50%;background:#ff7c2e;color:white;font-size:15px;font-weight:1000;display:grid;place-items:center}.selection-scene{height:clamp(210px,calc(100dvh - 500px),320px);border-radius:24px 24px 45% 45% / 24px 24px 24px 24px;display:flex;align-items:flex-end;justify-content:center;margin:0 -18px;overflow:hidden}.selection-scene:after{content:'';position:absolute;inset:auto 0 0;height:30px;background:linear-gradient(transparent,var(--paper));pointer-events:none}#selectionAnimal{height:100%;aspect-ratio:1;width:auto;max-width:92%;position:relative;bottom:-8px;z-index:1}.selection-scene .targets{display:none}.character-caption{text-align:center;background:#faecd3;border-radius:22px;padding:10px 12px;margin:0 0 8px;position:relative;z-index:2}.character-caption h2{margin:0 0 5px;font-size:27px}.character-caption p{margin:0;font-size:13px;color:#795d45}.entry-scene{height:210px;margin:0 -18px 12px;display:flex;align-items:end;justify-content:center;overflow:hidden;border-radius:24px}#entryAnimal{width:240px;margin-bottom:-12px}#entryAnimal .targets{display:none}#entry h1{font-size:42px}#entry .eyebrow{text-align:center;margin-bottom:12px}#entryText{margin:14px 0;font-size:13px}input,textarea{border:2px solid #dcc39f;background:#fffdf5;border-radius:12px;padding:12px;width:100%;max-width:100%;font-size:15px}#devLogin label{display:block;font-size:12px;margin-bottom:6px}#devLogin .primary{font-size:17px}#watchMatchButton{display:block;width:100%;margin-top:12px;font-size:16px}#entry .primary{font-size:20px}.invite-panel{margin:12px 18px 0;padding:10px 14px;border:2px solid #ead4af;background:#fff3d8;border-radius:15px;font-size:12px}.invite-panel summary{font-size:14px;font-weight:900;cursor:pointer}.invite-panel strong{display:block;margin-top:10px}.invite-panel p{line-height:1.4;color:var(--muted)}.invite-panel>div{display:flex;gap:6px;margin-top:8px}.invite-panel .small-button{flex:1;padding:8px;font-size:11px}.invite-panel input{font-size:11px}
#preparation{text-align:center}.preparation-scene{height:clamp(260px,calc(100dvh - 390px),370px);margin:0 -18px 18px;display:flex;align-items:end;justify-content:space-between;gap:10px;padding:14px 12px 20px;overflow:hidden}.prep-fighter{width:48%;position:relative;z-index:1}.prep-animal{width:115%;margin-left:-7%}.prep-animal .targets{display:none}.fighter-chip{background:#fff8e9e8;border-radius:16px;padding:9px 4px;font-size:12px;min-height:54px}.fighter-chip b,.fighter-chip span{display:block;overflow-wrap:anywhere}.fighter-chip b{font-size:15px;font-weight:1000}.fighter-chip span{font-size:11px;color:var(--muted);margin-top:4px}.fighter-chip .is-ready{color:var(--green);font-weight:1000}.unknown-animal{height:150px;width:120px;max-width:100%;margin:0 auto 8px;border:3px dashed #b2a779;border-radius:45% 48% 40% 40%;background:#fff7df70;color:#b6a581;font-size:90px;font-weight:1000;display:grid;place-items:center}.scene-versus{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-7deg);border-radius:50%;padding:9px;background:#fff7e9dc;font-size:22px;font-weight:1000;z-index:2}.prep-rules{display:flex;justify-content:center;gap:24px}.prep-rules b{display:block}.prep-rules span{font-size:12px}#preparationStatus{font-size:25px;margin:14px 0 8px}
/* The battlefield reserves its lower area for the independent attack and guard choices. */
#battle{padding:10px 0 0}.battle-top{display:flex;justify-content:space-between;align-items:center;margin:0 18px 6px;min-height:20px}.battle-top .eyebrow{font-size:9px;letter-spacing:1px}.audience-badge{border-radius:10px;background:#f5e6ca;padding:4px 8px;font-size:10px;font-weight:900}.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);gap:9px;align-items:center;padding:0 18px 8px;background:var(--paper);position:relative;z-index:2}.fighter-label{font-size:11px;font-weight:900;display:flex;flex-direction:column;gap:3px;margin-bottom:5px}.fighter-label b{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scoreboard>div:last-child .fighter-label{text-align:right}.fighter-label span{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)}.hp-track{height:13px;border:2px solid var(--ink);border-radius:9px;background:#eedbbb;overflow:hidden}.hp-track>div{height:100%;background:#90c64d;transition:width .25s;border-radius:6px;box-shadow:inset 0 3px 0 #b1da6a}.hp-track.enemy>div{background:#ff7440;box-shadow:inset 0 3px 0 #ff9960}.versus-badge{font-size:27px;text-align:center;font-weight:1000;border:3px solid var(--ink);border-radius:15px;background:#fff1d8;padding:7px 0;font-variant-numeric:tabular-nums;line-height:1.2}.arena{height:clamp(180px,calc(100dvh - 650px),240px);display:flex;align-items:flex-end;justify-content:center;gap:0;overflow:hidden;padding:0 6px 12px}.actor{width:50%;max-width:235px;position:relative;z-index:1;margin-bottom:-6px;flex-shrink:0}.arena .scene-versus{font-size:15px;top:53%;padding:6px;z-index:0}.yard-ground{position:absolute;bottom:22px;height:22px;left:12%;right:12%;background:#af87452b;border-radius:50%}#impact{position:absolute;top:30%;left:50%;transform:translateX(-50%) rotate(-9deg);font-size:34px;font-weight:1000;opacity:0;color:#ff6929;-webkit-text-stroke:1px #6c2c16;text-shadow:2px 3px #fff9e9;z-index:3}#impact.pop{animation:impact-pop .9s ease-out}.battle-panel{position:relative;z-index:2;background:var(--paper);border-radius:26px 26px 0 0;margin-top:-18px;padding:10px 18px 0}.status-line{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:1px;margin:0 0 5px}#choiceClock{font-size:9px}.battle-status{font-size:24px;font-weight:1000;line-height:1.1;text-align:center;margin:4px 0 9px;min-height:29px}.last-exchange{font-size:11px;line-height:1.35;background:#f7e9ce;border-radius:12px;padding:8px 10px;margin:7px 0;color:#7a5a3c;overflow-wrap:anywhere}#lastExchange{max-height:44px;overflow:auto}#missWarning{border:1px solid #e5a763;background:#ffead0;color:#9a4e23;font-weight:900}.control-label{display:flex;justify-content:space-between;align-items:center;margin:8px 0 5px}.control-label>span{font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.4px}.zone-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.zone-button{display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:1px;position:relative;min-height:59px;border:2px solid #e9d6b4;border-radius:13px;background:#fffaf0;padding:5px 1px}.zone-button b{font-size:9px;line-height:1;position:absolute;left:5px;top:5px;color:#b59b78}.zone-button span{font-size:12px;font-weight:900;line-height:1.15}.zone-button small{font-size:12px;line-height:1.1;color:#a8794c;font-weight:900}.zone-button.selected{background:#ffe3a2;border-color:#ff812d;box-shadow:0 0 0 1px #ff812d}.zone-button.selected b{color:#bf5c1d}.zone-button.selected:after{content:'✓';position:absolute;right:-4px;top:-6px;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#ff812d;color:white;font-size:11px;border:1px solid #fff8e9}#blocks .zone-button.selected{background:#e6edcf;border-color:#71944f;box-shadow:0 0 0 1px #71944f}#blocks .zone-button.selected:after{background:#71944f}#blocks .zone-button.selected small{color:#557b36}.zone-button:disabled:not(.selected){opacity:.5}.zone-button.selected small{color:#a84d17}#choiceSummary{font-size:11px;color:#785439;background:#f9ebd2;border-radius:10px;padding:6px 8px;margin:8px 0 0;min-height:27px}#submitButton{font-size:21px;min-height:54px;margin-top:8px}.history{font-size:11px;margin:12px 18px 4px;padding:8px 0;color:var(--muted);border-top:1px solid var(--line)}.history summary{display:flex;justify-content:space-between;cursor:pointer;font-weight:800}.history ol{padding:0;list-style:none;max-height:200px;overflow:auto}.history li{padding:8px 0;border-bottom:1px solid var(--line);line-height:1.4}#battle>.footnote{display:none}.experiment-note{font-size:12px;background:#f6e5c5;border-radius:14px;padding:12px;line-height:1.5}#spectatorStatus{font-size:13px;text-align:center;margin:12px 0 20px}#pressureStatus{font-size:10px;background:#ffe7be;color:#9c5024;border-radius:10px;padding:5px 8px;margin:5px 0;font-weight:900}.move-locked .control-label,.move-locked .zone-grid{display:none}.move-locked #controls{padding-top:8px}.move-locked #choiceSummary{font-size:15px;padding:18px 12px;line-height:1.5}.move-locked .battle-status{color:var(--green)}.move-locked #lastExchange{display:none}.is-spectator .arena{height:clamp(260px,calc(100dvh - 330px),430px)}.is-spectator .actor{max-width:240px}.is-spectator #battleStatus{font-size:27px}.is-spectator #lastExchange{max-height:none;font-size:14px;padding:14px}.is-spectator #choiceSummary{display:none}
#result{text-align:center}#result h1{font-size:38px;margin:12px 0}#result .intro{font-size:13px;margin:8px 0 15px}.result-animals{display:flex;align-items:end;justify-content:center;margin:0 -18px;overflow:hidden;height:260px;padding-bottom:18px}.result-animals>div{width:50%;max-width:230px;position:relative;z-index:1}.result-animals>span{font-size:26px;font-weight:1000;align-self:center;position:absolute;left:50%;transform:translateX(-50%)}.result-animals .targets{display:none}.receipt{background:#f8e9cf;border-radius:23px;padding:15px 10px;margin:0 0 12px;position:relative}.receipt h2{font-size:clamp(20px,6vw,27px);line-height:1.2;margin:8px 0;overflow-wrap:anywhere}.result-stats{font-size:12px;color:var(--muted);line-height:1.5}.result-animals+.receipt{margin-top:-10px;z-index:2}#resultLastExchange{font-size:12px}#result .primary{font-size:21px}#rematchStatus{font-size:11px}
.chat-dock{position:relative;width:calc(100% - 36px);margin:8px 18px 14px;min-height:42px;background:#fff3d9;border:2px solid #dac09a;border-radius:15px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;gap:6px;text-align:left}.chat-dock b{font-size:13px;font-weight:1000;flex-shrink:0}.chat-dock b:before{content:'↗ ';color:#bb6a30}.chat-dock span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-battle .chat-dock span{display:none}.in-battle .chat-dock{justify-content:center;margin-top:4px;margin-bottom:8px;min-height:36px;padding:6px 10px}.in-battle footer{display:none}.chat-dialog{width:min(100%,480px);height:76dvh;max-height:90dvh;margin:auto auto 0;padding:18px;border-radius:24px 24px 0 0}.chat-dialog[open]{display:flex;flex-direction:column}.chat-heading{display:flex;align-items:center;gap:9px}.chat-heading h2{font-size:23px;padding:0;flex:1;margin:0}.chat-heading strong{font-size:14px;color:#c95d22;white-space:nowrap}.chat-heading .small-button{font-size:11px;padding:6px 8px}.chat-messages{list-style:none;padding:0;flex:1;overflow:auto;min-height:80px;margin:8px 0}.chat-messages li{padding:10px 12px;margin:6px 0;background:#f5e7ce;border-radius:14px}.chat-messages strong{font-size:11px}.chat-messages p{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0;line-height:1.4}.chat-dialog label{font-size:11px}.chat-dialog textarea{resize:vertical;max-height:90px;min-height:54px;padding:8px}.chat-dialog .primary{min-height:44px;font-size:17px;margin-top:6px}.chat-dialog .footnote{font-size:10px;margin:6px 0}.chat-dialog #chatError{margin:5px 0;font-size:12px}dialog{background:var(--paper);border:3px solid #6b4027;border-radius:23px;padding:22px;width:calc(100% - 28px);max-width:460px;max-height:85dvh;overflow:auto;color:var(--ink)}dialog::backdrop{background:#3c251965}dialog .small-button{float:right}dialog h2{padding-top:25px}dialog p{font-size:14px;line-height:1.6}.message{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);width:430px;background:#573521;color:#fff8e9;border:2px solid #ffe3ad;border-radius:16px;padding:14px 18px;z-index:10;font-size:13px;line-height:1.4;box-shadow:0 6px 25px #3e241a30}.connection-status{background:#ffe4bb;color:#945023;margin:10px 18px;border-radius:12px;padding:10px;font-size:12px;line-height:1.4}footer{font-size:10px;color:#a48a68;margin:10px 18px 0;padding:12px 0 16px;text-align:center;border-top:1px solid var(--line)}footer>span{display:none}
@keyframes impact-pop{0%{opacity:0;scale:.6}20%,65%{opacity:1;scale:1.1}100%{opacity:0;scale:1.3}}
@media(min-width:600px){body{padding:24px 0}.shell{border:5px solid #dfc9a3;border-radius:30px;box-shadow:0 12px 60px #5735211a;min-height:850px}header{height:70px}.selection-scene{height:320px}.arena{height:240px}.preparation-scene{height:350px}.chat-dialog{border-radius:24px;margin:auto}}
@media(max-height:760px) and (max-width:599px){header{height:54px}.screen{padding-top:14px}h1{font-size:33px;margin-bottom:14px}.card-animal{height:70px}.card-animal .animal{width:85px}.character-card strong{font-size:12px}.selection-scene{height:clamp(210px,calc(100dvh - 500px),270px)}.character-caption{padding:9px}.character-caption h2{font-size:24px}.primary,.secondary{min-height:52px;font-size:21px}.preparation-scene{height:280px}.arena{height:150px}.battle-status{font-size:24px}.battle-panel{padding-top:8px}#choiceSummary{font-size:10px;padding:5px 6px;margin-top:6px}.zone-button{min-height:53px}.zone-button span{font-size:11px}.zone-button small{font-size:11px}.control-label{margin-top:6px}.history{margin-top:8px;padding:6px 0}.result-animals{height:230px}.entry-scene{height:170px}}
@media(max-width:350px){.screen{padding-left:14px;padding-right:14px}header{padding-left:14px;padding-right:14px}.brand{font-size:17px}.character-grid{gap:5px}.card-animal{border-radius:14px;height:68px}.card-animal .animal{width:78px}.character-card strong{font-size:12px}.selection-scene,.preparation-scene,.entry-scene,.result-animals{margin-left:-14px;margin-right:-14px}.battle-panel{padding-left:14px;padding-right:14px}.scoreboard{padding-left:14px;padding-right:14px;gap:6px}.fighter-label b{font-size:11px}.zone-grid{gap:4px}.zone-button span{font-size:10px}.zone-button small{font-size:11px}.zone-button b{left:3px;top:3px;font-size:8px}.battle-status{font-size:22px}.zone-button{min-height:51px}#choiceSummary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preparation-scene{gap:5px;padding-left:8px;padding-right:8px}.fighter-chip b{font-size:13px}.unknown-animal{height:120px;font-size:75px}.chat-dock{width:calc(100% - 28px);margin-left:14px;margin-right:14px}#submitButton{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#impact.pop{opacity:1}}

body[data-screen=selection] footer{display:none}

.in-battle header{height:54px}.battle-panel .control-label{margin-top:6px;margin-bottom:4px}.battle-panel .control-label h3{line-height:1.2}
#blocks .zone-button.tired{border-style:dashed}#blocks .zone-button.tired small{color:#b05c2c}#blocks .zone-button.tired.selected{border-style:solid}body[data-screen=preparation] .invite-panel{margin-bottom:8px}
/* Mode remains visible before the ready action; avoid repeating it beneath the fold. */
#selectionNote{display:none}.brand span{letter-spacing:.4px}.battle-top{display:none}#choiceClock{display:none}.zone-button small:empty{display:none}.zone-button.tired small{display:block}.arena{height:clamp(180px,calc(100dvh - 610px),280px)}
@media(max-height:760px) and (max-width:599px){.arena{height:150px}}
@media(max-height:680px) and (max-width:599px){header{height:48px}.arena{height:125px}.battle-panel{padding-top:6px}.battle-status{font-size:22px;margin-top:2px;margin-bottom:6px;min-height:25px}.zone-button{min-height:48px}.battle-panel .control-label{margin:5px 0 3px}.battle-panel .control-label h3{font-size:13px}#lastExchange{padding:5px 8px;max-height:35px;font-size:10px;margin:5px 0}#choiceSummary{font-size:10px;min-height:22px;padding:4px 6px;margin-top:5px}#submitButton{min-height:48px;font-size:18px;margin-top:6px}.in-battle .chat-dock{min-height:32px;margin-bottom:5px}.selection-scene{height:180px}#selection .character-caption{padding:7px}#selection h1{font-size:29px;margin-bottom:10px}#selection .card-animal{height:60px}#selection .primary{min-height:48px;font-size:20px}.rule-chip{padding:6px;margin:7px 0}.prep-fighter .unknown-animal{height:120px}.preparation-scene{height:225px;padding-top:0;padding-bottom:8px}.preparation-scene .prep-animal{width:100%;margin-left:0}}
.arena{--arena-height:clamp(180px,calc(100dvh - 610px),280px);height:var(--arena-height)}.actor{width:min(50%,calc(var(--arena-height) - 4px))}
@media(max-height:760px) and (max-width:599px){.arena{--arena-height:150px}}
@media(max-height:680px) and (max-width:599px){.arena{--arena-height:125px}}
.is-spectator .arena{--arena-height:clamp(260px,calc(100dvh - 330px),430px);height:var(--arena-height)}
.yard-scene{background-image:url('../../assets/ui/art-v2/yard-day.png')}.portrait{position:relative;width:100%;aspect-ratio:1}.portrait img{position:absolute;object-fit:contain;pointer-events:none}.card-animal .portrait{width:96px;flex-shrink:0}.card-animal{align-items:end}.prep-animal .portrait{width:100%}#selectionAnimal .portrait{height:100%}
@media(max-height:760px) and (max-width:599px){.card-animal .portrait{width:86px}}
@media(max-width:350px){.card-animal .portrait{width:80px}}

.card-animal .portrait{width:100%}
.status-line .audience-badge{padding:2px 6px;font-size:9px;letter-spacing:0;margin-left:auto}.is-spectator[data-phase=preparation] .hp-track,.is-spectator[data-phase=preparation] .versus-badge{display:none}.is-spectator[data-phase=preparation] .scoreboard{grid-template-columns:1fr 1fr}

.control-label>span{letter-spacing:0}

/* Browser/device inset describes the outer safe rectangle; Telegram controls
   reserve additional space inside it. Do not count the browser/device twice. */
:root{
  --app-safe-top:calc(max(env(safe-area-inset-top,0px),var(--app-system-top,0px)) + var(--app-content-top,0px));
  --app-safe-right:calc(max(env(safe-area-inset-right,0px),var(--app-system-right,0px)) + var(--app-content-right,0px));
  --app-safe-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--app-system-bottom,0px)) + var(--app-content-bottom,0px));
  --app-safe-left:calc(max(env(safe-area-inset-left,0px),var(--app-system-left,0px)) + var(--app-content-left,0px));
  --app-dialog-height:max(100px,calc(var(--app-visible-height,100dvh) - var(--app-safe-top) - var(--app-safe-bottom) - 28px));
}
body{padding:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left)}
.shell{min-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom))}
dialog{
  inset:var(--app-safe-top) var(--app-safe-right) calc(var(--app-keyboard-bottom,0px) + var(--app-safe-bottom)) var(--app-safe-left);
  width:calc(100% - var(--app-safe-left) - var(--app-safe-right) - 28px);
  max-height:min(85dvh,var(--app-dialog-height));
}
.chat-dialog{width:calc(100% - var(--app-safe-left) - var(--app-safe-right) - 28px);height:min(76dvh,var(--app-dialog-height));max-height:var(--app-dialog-height);margin:auto auto 0}
.chat-heading h2{min-width:0}
.chat-messages{min-height:0}
.chat-heading,#chatForm,.chat-dialog>.footnote{flex-shrink:0}
.message{bottom:calc(20px + var(--app-safe-bottom) + var(--app-keyboard-bottom,0px));max-width:calc(100% - var(--app-safe-left) - var(--app-safe-right) - 28px)}
@media(min-width:600px){
  body{padding:calc(24px + var(--app-safe-top)) var(--app-safe-right) calc(24px + var(--app-safe-bottom)) var(--app-safe-left)}
  .shell{min-height:850px}
  .chat-dialog{margin:auto}
}

.turn-reminder{font-size:12px;line-height:1.35;color:var(--ink);background:#f7e9ce;border-radius:12px;padding:7px 10px;margin:7px 0;overflow-wrap:anywhere}
.chat-heading strong{font-size:10px;color:var(--muted)}
.card-animal .portrait{height:100%;width:auto;aspect-ratio:1;max-width:100%}

/* UI-CLEAN: one entry wordmark, concise controls, visible room chat. */
body[data-screen=entry] header .brand{display:none}
body[data-screen=entry] header{justify-content:flex-end;border-bottom:0;background:var(--paper)}
body[data-screen=entry] footer{display:none}
header #rulesButton{font-size:23px;line-height:1}
#entry{padding-top:0}
#entry .entry-logo{display:flex;flex-direction:column;align-items:center;margin:0 0 18px;font-size:clamp(38px,11vw,54px);font-weight:1000;line-height:.93;letter-spacing:-1.8px;transform:rotate(-3deg);text-shadow:0 3px 0 #e9cf9d}
.entry-logo span:nth-child(2){font-size:1.38em;letter-spacing:-2.5px}
#entry .entry-logo em{font-size:.62em;line-height:1.15;letter-spacing:-.7px;background:var(--orange);color:var(--paper);padding:3px 17px 7px;border:3px solid var(--ink);border-radius:15px;transform:rotate(5deg);margin-top:7px;text-shadow:0 2px 0 #bc4b20;box-shadow:0 3px 0 #4c24181a}
.scoreboard{grid-template-columns:1fr 1fr;gap:22px}
.control-label h3>span{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:0}
.guard-details{font-size:11px;line-height:1.4;color:#87502c;margin:6px 0;background:#ffe7be;border-radius:10px;padding:6px 9px}
.guard-details summary{cursor:pointer;font-weight:900}
.guard-details p{margin:6px 0 0}
#pressureStatus{font-size:11px;background:none;padding:0;margin:0}
#missWarning{font-size:11px;padding:7px 9px;margin:6px 0}
#battleStatus{font-size:clamp(19px,5.8vw,24px)}
.chat-dock,.in-battle .chat-dock{background:#f9dda4;border:2px solid var(--ink);min-height:44px;padding:9px 12px;box-shadow:0 2px 0 #4c24181a}
.chat-dock b{font-size:15px}
.chat-dock b:before{content:'↗ ';color:var(--ink)}
.training-chat-note{font-size:18px;line-height:1.4;text-align:center;margin:auto 0;font-weight:900}
.chat-dialog:has(#trainingChatNote:not([hidden])){height:auto;min-height:200px}
/* Fit the full entry portrait to the scene, including short phone screens. */
#entryAnimal{height:100%;width:auto;aspect-ratio:1;margin-bottom:0}
@media(max-height:600px) and (max-width:599px){
  #missWarning,.turn-reminder{font-size:11px;line-height:1.3;padding:4px 8px;margin:4px 0}
  #battleStatus{font-size:19px;min-height:22px;margin:2px 0 5px}
  .arena{height:125px}
  #submitButton{min-height:44px}
  .in-battle .chat-dock{margin-top:2px}
}

/* UI-02: nonselectable game chrome with explicit editable/copyable surfaces. */
.shell,dialog{-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable=true],.chat-messages,.chat-messages *{-webkit-user-select:text;user-select:text}
.shell img,dialog img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.shell{width:100%;min-width:0;container-type:inline-size}
header .brand{min-width:0;overflow-wrap:anywhere}
header #rulesButton{width:44px;height:44px;flex:0 0 44px}
header #leaveRoomButton{flex-shrink:0}
header{min-height:60px;height:auto}
#entry .entry-logo{font-size:min(11cqi,42px);line-height:1.08;letter-spacing:-.04em;transform:none;padding:10px 12px 12px;margin:0 0 8px;max-width:100%}
.entry-logo span{white-space:nowrap}
.entry-logo span:nth-child(2){letter-spacing:-.04em}
#entry .entry-logo em{max-width:100%;margin-top:4px}
#entryAnimal.entry-group{position:relative;width:100%;height:100%;aspect-ratio:auto;margin:0;isolation:isolate}
.entry-group .entry-character{position:absolute;bottom:8px;width:42%;aspect-ratio:1;z-index:2}
.entry-group [data-character=rat]{left:0;bottom:27px;width:34%;z-index:1}
.entry-group [data-character=rooster]{left:14%}
.entry-group [data-character=toad]{right:14%}
.entry-group [data-character=viper]{right:0;bottom:27px;width:34%;z-index:1}
@media(max-width:599px){header,.in-battle header{height:auto;min-height:60px}}

/* BRAND-08: exact windows into the owner's unchanged 1536x1024 sheet.
   Entry crop x32 y24 w1488 h640; compact x40 y720 w1080 h280.
   Both windows include the original outline; the icon stays outside them. */
.brand-art{position:relative;display:block;overflow:hidden;flex:none}
.brand-art img{position:absolute;display:block;max-width:none;pointer-events:none}
.brand-art--entrance{width:100%;aspect-ratio:1488/640}
.brand-art--entrance img{width:103.225806%;height:160%;left:-2.150538%;top:-3.75%}
.brand .brand-art--compact{width:min(100%,162px);aspect-ratio:1080/280;margin:0 auto}
.brand-art--compact img{width:142.222222%;height:365.714286%;left:-3.703704%;top:-257.142857%}
#entry .entry-logo{display:block;width:100%;max-width:418px;margin:10px auto 16px;padding:0;font-size:0;line-height:0;transform:none;text-shadow:none}
header,.in-battle header{min-height:68px;height:auto}
header .brand{display:flex;flex-direction:column;align-items:center;gap:0}
.brand #modeLabel{font-size:9px;line-height:9px;letter-spacing:.2px;margin:0;color:var(--muted)}

/* PROG-FE: progression is server-owned; experiment remains explicit. */
select{font:inherit;color:inherit;max-width:100%;min-width:0;border:2px solid #dcc39f;border-radius:12px;background:#fffdf5;padding:10px}
select:focus-visible{outline:3px solid #46759b;outline-offset:3px}
.mode-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:900;margin:12px 0 0}
.mode-choice select{flex:1;font-size:13px}
#modeNote{font-size:11px;margin:6px 0}
.progression-context,.experiment-badge{font-size:11px;text-align:center;background:#f6e1ad;border-radius:10px;padding:6px 9px;line-height:1.35}
.experiment-badge{margin:0 0 10px;font-weight:900}
.super-control{width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;text-align:left;border:2px solid #c9953c;border-radius:12px;background:#fff1c8;padding:6px 8px;min-height:38px;font-size:12px;margin:5px 0}
.super-control span{font-size:10px;line-height:1.2;text-align:right}
.super-control[aria-pressed=true]{background:#ffd883;border-color:var(--ink)}
.super-control:disabled{opacity:.7}
.move-locked .super-control{display:none}
.progression-card{background:#f6e5c5;border-radius:18px;padding:12px;margin:12px 0;font-size:13px;line-height:1.4}
.progression-card h2{font-size:21px;margin:0 0 8px}
.progression-card p{margin:6px 0}
.fatality-choices{display:grid;gap:7px}
.fatality-choices button{font-size:14px;text-align:left;min-height:44px}
.chat-progression{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px;flex-shrink:0}
.chat-progression button{flex:1;font-size:11px;padding:6px;min-height:36px}
.leaderboard-rows{padding:0;list-style:none}
.leaderboard-rows li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.leaderboard-rows li>span{overflow-wrap:anywhere}
.leaderboard-rows li.is-own{font-weight:1000;color:var(--green)}
.effect-controls{font-size:12px;margin:10px 0;text-align:center}
.effect-controls p{margin:6px 0}
.effect-controls button{min-height:36px;padding:7px;font-size:11px}
#fatalityDialog .primary{font-size:18px}
#fatalityDialog .secondary{font-size:15px}
.effect-back,.effect-front{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.effect-back{z-index:0}.effect-front{z-index:4}
.result-animals>div:not(.effect-back):not(.effect-front){z-index:2}
.result-animals>.effect-back,.result-animals>.effect-front{width:100%;height:100%;max-width:none}
.result-animals>.effect-back{z-index:0}.result-animals>.effect-front{z-index:4}
@media(max-height:680px) and (max-width:599px){.has-super .arena{--arena-height:100px}.has-super .super-control{min-height:32px;padding:4px 7px}.has-super .super-control b{font-size:11px}}

@media(max-height:680px) and (max-width:599px){
 .has-super .arena{--arena-height:80px;height:var(--arena-height)}
 .has-super .zone-button{min-height:44px;padding:4px 1px}
 .has-super #submitButton{min-height:44px;padding:8px 12px}
 .has-super .guard-details{padding:4px 8px;font-size:10px;margin:4px 0}
 .has-super.urgent-turn .arena{--arena-height:60px}
 .has-super .status-line{margin-bottom:3px}
}