/* Use the existing Leno Block frame and character presentation. */
body[data-mini=arrow] { --accent:#78caff; --surface:#152e50; background:#08152b; }
.mini-shell { min-height:320px; padding:1px 2px max(1px, env(safe-area-inset-bottom)); }
.mini-stage { display:flex; flex-direction:column; border-color:#7aa6c5; border-radius:14px 14px 0 0; }
.mini-hud { position:static; flex-shrink:0; height:44px; padding:0 6px; background:#102a49; pointer-events:auto; }
.mini-hud > span { font-size:13px; }
.mini-hud > span:first-child { min-width:0; border:0; background:none; padding:0; }
#lives { color:#ffb4c5; margin-left:auto; letter-spacing:3px; }
.mini-hud button { width:44px; height:44px; background:#183858; }
.board-wrap { flex:1; min-height:0; display:flex; justify-content:center; align-items:center; padding:6px; }
.arrow-board { position:relative; width:100%; height:100%; overflow:hidden; border:1px solid #7aa6c5; border-radius:12px; background:#e7eff7; }
#board-portrait { position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; pointer-events:none; }
#arrows { position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(8,1fr); }
.arrow { position:relative; min-width:0; min-height:0; margin:2px; padding:0; border:1px solid #557391; border-radius:8px; background:#173959; color:#f4e2b5; touch-action:manipulation; box-shadow:inset 0 1px #ffffff26; }
.arrow svg { display:block; width:100%; height:100%; stroke-width:4; fill:none; stroke:currentColor; }
.arrow.is-blocked { color:#fff; background:#953e50; }
.arrow.is-hint { color:#152e50; background:#ffe1a0; outline:2px solid #b47a21; outline-offset:-3px; }
.arrow.is-leaving { pointer-events:none; animation:arrow-exit .22s ease-in forwards; }
@keyframes arrow-exit { to { transform:translate(var(--exit-x),var(--exit-y)); opacity:0; } }
.board-tools { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; min-height:44px; padding:0 7px; font-size:12px; }
.board-tools button { min-width:72px; min-height:44px; border-radius:8px; background:#f3f4f6; color:#2a2328; box-shadow:none; border:0; }
.mini-buddy { height:54px; border-color:#7aa6c5; background:linear-gradient(110deg,#193658,#0d1e36); border-radius:0 0 14px 14px; }
.buddy-portrait { width:54px; height:54px; margin:0; align-self:center; }
.buddy-talk { border:0; background:none; padding:4px 0; white-space:normal; }
.buddy-badge { font-size:10px; }
.mini-panel { gap:10px; border-radius:12px; background:radial-gradient(ellipse at 50% 0,#264c72,#101e35 78%); }
.mini-play { width:180px; min-height:48px; display:flex; justify-content:center; gap:8px; font-size:14px; border-radius:8px; box-shadow:none; }
.mini-play svg { width:18px; height:18px; }
.mini-next { min-height:44px; background:none; border:0; }
.panel-status { margin:0; font-size:13px; text-align:center; }
.mini-message { font-size:27px; }
.mini-overlay[data-mode=pause] .mini-hero,.mini-overlay[data-mode=result] .mini-hero { height:90px; }
.mini-overlay[data-mode=pause] .panel-portrait,.mini-overlay[data-mode=result] .panel-portrait { width:94px; height:94px; }
.mini-overlay[data-mode=pause] .mini-hero::before,.mini-overlay[data-mode=result] .mini-hero::before { width:78px; height:78px; }
@media(prefers-reduced-motion:reduce) { .arrow.is-leaving { animation:none; visibility:hidden; } }

/* Reference: the official Arrows screenshots use clear ink paths on a dotted,
   light board. The broad transparent buttons retain the full touch area. */
.arrow-board { background-color:#fbfcff; background-image:radial-gradient(circle,#9aafc06b 1px,transparent 1.5px); background-size:calc(100% / 6) calc(100% / 8); }
#board-portrait { opacity:var(--reveal,.2); transition:opacity .22s ease-out; filter:drop-shadow(0 6px 5px #243c5120); }
.arrow { border-color:transparent; background:transparent; color:#173959; box-shadow:none; }
.arrow svg { overflow:visible; filter:drop-shadow(0 2px 0 #1d3b531c); }
.arrow .arrow-halo { stroke:#fff; stroke-width:10; }
.arrow .arrow-ink { stroke:currentColor; stroke-width:4.5; }
.arrow:active { background:#d9e6f56b; }
.arrow.is-blocked { color:#df4268; background:#ffdae359; animation:arrow-bump .24s ease-out; }
.arrow.is-hint { color:#8b5914; background:#ffdb825e; outline:2px solid #d6a44b; }
.arrow.is-leaving { z-index:1; color:#207986; animation:arrow-exit .22s cubic-bezier(.4,0,.8,.4) forwards; }
@keyframes arrow-bump { 40% { transform:translate(calc(var(--exit-x) / 80),calc(var(--exit-y) / 80)); } }
.arrow-board[data-cleared=true] { box-shadow:inset 0 0 25px #f2c66e5c; }
.mini-overlay[data-outcome=win] .mini-hero { height:140px; background:radial-gradient(ellipse,#f6d79855,transparent 68%); }
.mini-overlay[data-outcome=win] .panel-portrait { width:145px; height:145px; animation:cast-welcome .55s ease-out; }
.mini-overlay[data-outcome=win] .mini-hero::before { width:118px; height:118px; border-color:#ffe0a0; box-shadow:0 0 0 8px #f7d68e12,0 0 24px #ffdd8a45; }
.mini-overlay[data-outcome=win] .mini-hero::after { content:'✦'; color:#ffe6a5; right:5px; top:15px; text-shadow:-130px 75px #f5cf82; animation:cast-welcome .65s ease-out; }
@keyframes cast-welcome { 0% { transform:scale(.88) translateY(8px); opacity:.3; } 65% { transform:scale(1.06) translateY(-3px); } 100% { transform:none; opacity:1; } }
@media(prefers-reduced-motion:reduce) { #board-portrait { transition:none; } .arrow svg { filter:none; } }
@media(max-height:600px) { .mini-overlay[data-outcome=win] .mini-hero { height:100px; } .mini-overlay[data-outcome=win] .panel-portrait { width:110px; height:110px; } .mini-overlay[data-outcome=win] .mini-hero::before { width:92px; height:92px; } }

.buddy-copy { min-width:0; flex:1; max-height:48px; display:flex; flex-direction:column; gap:2px; }
.buddy-name { display:block; color:#bdd1e4; font-size:10px; line-height:12px; }
.buddy-copy .buddy-talk { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:16px; padding:0; margin:0; overflow:hidden; white-space:normal; }