/* Shared Zibbles visual identity, with the arena's readable game layout. */
.games-link { color:#d2f879; font-size:13px; white-space:nowrap; text-decoration:none; }
.games-link:hover { text-decoration:underline; }
@media(max-width:800px) { .games-link { display:none; } }
.header-actions { flex-wrap:wrap; justify-content:flex-end; }
#tutorial-toggle[aria-pressed="true"] { border-color:var(--lime); color:var(--lime); }
#tutorial-dialog { max-width:560px; border:2px solid var(--gold); }
#tutorial-text { font-size:17px; line-height:1.7; color:var(--text); }
.tutorial-actions { display:flex; gap:12px; flex-wrap:wrap; }
.tutorial-note { color:var(--muted); font-size:12px; line-height:1.5; }
.tutorial-invite { padding:12px 16px; border-left:3px solid var(--gold); background:#132019; line-height:1.6; }
:root { --bg:#030605; --panel:#101b12; --line:#665d37; --text:#f4f2df; --muted:#c4cbb8; --lime:#a5eb35; --teal:#b6df7c; --gold:#d5b65d; }
body { background:linear-gradient(#030605b8,#030605ed),url("../assets/zibbles-clean-bg.png") top center / cover fixed; font-family:Arial,Helvetica,sans-serif; }
header { background:#080e0cee; border-color:var(--gold); gap:18px; }
.brand { display:block; flex-shrink:0; width:180px; }
.brand img { display:block; width:100%; }
.brand span { text-align:center; color:var(--gold); margin-top:0; }
h1,h2,h3 { font-family:"Bahnschrift Condensed","Arial Narrow",Arial,sans-serif; }
.primary { color:#fff; border-color:var(--gold); background:linear-gradient(#65a92b,#173916); box-shadow:inset 0 0 0 2px #c2f55b24,0 0 22px #6dc62324; }
.setup,.arena { background:linear-gradient(130deg,#20331df5,#080f0df5); border-color:#d5b65d77; }
.inspector,dialog { background:#101b12; }
.starter,.creature,.hand-card,button { background-color:#132019; }
.art { background-color:#132019; }
footer a { color:var(--lime); text-underline-offset:3px; }
@media(max-width:480px) { .brand { width:120px; } header { flex-wrap:wrap; } .header-actions { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { button { transition:none; } }

/* Whole printed cards: no cropping, zooming or badges covering the artwork. */
.starter .art, .creature .art, .hand-card .art {
  display:block; width:100%; height:auto; aspect-ratio:5 / 7;
  object-fit:contain; padding:5px; background:#07110d;
}
.starters { grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); }
.starter, .creature, .hand-card { border-width:2px; }
.starter.selected, .creature.selected, .hand-card.selected {
  outline:2px solid var(--lime); outline-offset:3px;
  box-shadow:0 0 24px #a5eb3550;
}
.click-hint { display:block; padding:8px 9px; color:var(--lime); font-size:12px; font-weight:700; border-top:1px solid #a5eb3533; }
.creature .click-hint { padding-inline:0; margin-top:8px; }
.creature .state-tag { position:static; display:block; margin:6px 8px; width:fit-content; }
.hand-card .cost { position:static; margin:6px 9px; }
.hand-card { flex-basis:185px; }
.board { gap:18px; align-items:stretch; }
.board > * { border:2px solid #83b856; box-shadow:inset 0 0 22px #a5eb3514,0 0 15px #a5eb3529; border-radius:12px; }
#enemy-board > * { border-color:#ba9e51; box-shadow:inset 0 0 22px #d5b65d14,0 0 15px #d5b65d29; }
.lane-caption { display:block; padding:8px; color:var(--gold); text-align:center; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; }
.lane-labels { color:var(--gold); font-weight:800; padding:17px 0; }
.lane-labels span { border-top:1px solid #d5b65d88; border-bottom:1px solid #a5eb3566; padding:8px 0; margin:0 9px; }
.empty { min-height:280px; padding:10px; text-align:center; }
.empty small { font-size:12px; }
.play-guide { border-left:4px solid var(--lime); background:#182b16; padding:14px 18px; color:var(--text); line-height:1.6; border-radius:0 8px 8px 0; }
.game-layout > aside { min-width:0; }
.inspector { position:sticky; top:16px; z-index:2; border:2px solid var(--gold); box-shadow:0 0 22px #d5b65d25; scroll-margin:16px; }
.selection-prompt { color:var(--lime) !important; font-weight:700; }
#actions { max-height:none; }
#actions.has-selection button { border-color:#a5eb3580; background:#223b1d; min-height:48px; }
.starter:hover, .creature:hover, .hand-card:hover { box-shadow:0 0 22px #a5eb3555; }
.setup-bottom { padding:14px; background:#101b12f5; border:1px solid var(--line); border-radius:10px; }
@media(max-width:800px) {
  .inspector { position:static; }
  .board { gap:8px; }
  .empty { min-height:200px; }
  .lane-caption { padding:6px 2px; font-size:10px; letter-spacing:0; }
  .creature .info { padding:6px; }
}
@media(max-width:480px) {
  .starters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creature .art { padding:2px; }
  .creature .click-hint { font-size:10px; }
  .hand-card { flex-basis:160px; }
  .setup-bottom { align-items:stretch; padding:10px; }
  .setup-bottom button { white-space:normal; }
}
.starter-filter { display:block; margin:18px 0; color:var(--cream); }
.starter-filter input { display:block; width:min(100%,460px); box-sizing:border-box; margin-top:8px; padding:12px 14px; border:1px solid #a5eb3570; border-radius:8px; background:#101b12; color:#f4f1d9; font:inherit; }
.starter-filter input:focus { outline:2px solid #a5eb35; outline-offset:2px; }