/* Game chrome shared by the stable and its rooms. The world stays full frame. */
:root {
  --game-cream:#f6e9c9; --game-ink:#293a37; --game-rim:#b4a783;
  --game-highlight:#fff6df; --game-active:#e2c582; --game-shadow:#655e4c;
  --panel:var(--game-cream); --panel-solid:var(--game-cream);
  --ink:var(--game-ink); --bright:#243530; --dim:#59645a;
  --line:#b4a78366; --line-2:#ab9e7d; --current:var(--game-ink);
  --current-bg:#e5d1a2; --sel:#6b684f; --sel-bg:#e5d1a2; --sel-bd:#736342;
  --primary-bg:#e2c582; --primary-bd:#988255; --oats:#735622; --danger:#a13333;
  --bta-bg:var(--game-cream); --bta-fg:var(--game-ink); --bta-muted:var(--dim);
  --bta-border:var(--game-rim); --bta-active:#e5d1a2;
  color-scheme:light;
}
body { font:500 15px/1.4 'Trebuchet MS',Verdana,sans-serif; }
button, .back-link { min-height:44px; white-space:normal; }
button { background:var(--game-cream); border:2px solid var(--game-rim); border-top-color:var(--game-highlight);
  border-left-color:var(--game-highlight); border-radius:15px; box-shadow:0 4px 0 var(--game-shadow),0 6px 11px #07141633;
  padding:8px 12px; }
button:hover, button.primary:hover { background:var(--game-highlight); color:var(--game-ink); }
button:active { box-shadow:0 1px 0 var(--game-shadow); }
button[aria-disabled=true] { opacity:.55; cursor:wait; }
button.primary { color:var(--game-ink); font-weight:500; }
:focus-visible { outline:3px solid #e2c582; outline-offset:4px; }
.game-popover :focus-visible, #panel :focus-visible { outline-color:#645236; }
svg { vertical-align:middle; }
#top { height:62px; background:none; border:0; pointer-events:none; padding:12px 18px; }
#top > *, #top button { pointer-events:auto; }
.brand { color:#fff4d6; font-weight:500; }
body[data-view=stable] .brand { display:none; }
.account-bar { gap:8px; }
#who { max-width:180px; min-height:36px; padding:6px 10px; color:var(--game-ink); background:var(--game-cream); border:1px solid var(--game-rim); border-radius:16px; }
#balance { color:var(--game-ink); padding:7px 10px; border-radius:16px; background:var(--game-cream); font-size:12px; }
#account-menu { background:var(--game-cream); }
#world { touch-action:none; }
body[data-view=stable] #world { inset:0; width:100vw; height:100dvh; }
body[data-view=stable] #panel { display:none; }
#stable-utilities { position:fixed; top:18px; left:18px; z-index:21; display:flex; gap:9px; }
#stable-utilities button { position:static; min-width:44px; width:44px; height:44px; min-height:44px; border-radius:50%; padding:8px; background:var(--game-cream); backdrop-filter:none; }
#stable-utilities svg { width:24px; height:24px; }
#new-animal { position:fixed; z-index:14; right:20px; top:80px; font-size:13px; border-radius:18px; }
#stable-ui { position:fixed; inset:0; z-index:12; pointer-events:none; }
#stable-ui button, #stable-ui aside, #animal-menu { pointer-events:auto; }
#stable-ui .world-horse { pointer-events:none; position:absolute; opacity:0; padding:0; min-width:44px; min-height:44px; background:none; box-shadow:none; border:0; }
#stable-ui .world-horse:focus-visible { opacity:1; outline:2px solid #fff4d6; border-radius:30%; }
.animal-marker { position:absolute; height:17px; translate:-50% -50%; border:2px solid #eed79c; border-radius:50%; background:#eed79c0c; }
#drop-marker { border-width:3px; background:#eed79c33; }
.game-popover { position:absolute; width:280px; max-width:calc(100vw - 28px); padding:15px 14px 13px; color:var(--game-ink); background:var(--game-cream);
  border:2px solid var(--game-rim); border-top-color:var(--game-highlight); border-radius:23px; box-shadow:0 5px 0 var(--game-shadow),0 12px 20px #06141644; }
.game-popover h2 { font-size:19px; font-weight:500; margin:0; padding-right:30px; overflow-wrap:anywhere; }
#animal-menu { translate:-50% 0; }
#animal-menu::after { content:''; position:absolute; left:calc(50% - 11px); bottom:-16px; border-left:11px solid transparent; border-right:11px solid transparent; border-top:17px solid var(--game-cream); }
.game-close { position:absolute; right:4px; top:4px; width:40px; height:40px; min-height:40px; border:0; box-shadow:none; padding:0; border-radius:50%; background:none; font-size:24px; }
.animal-actions { display:flex; gap:7px; margin-top:14px; }
.animal-actions button { flex:1; box-shadow:none; border:1px solid #ab9e7d; background:#e6d7b4; border-radius:11px; font-size:13px; }
.game-back { margin-top:10px; border:0; box-shadow:none; background:none; text-decoration:underline; }
.worn-items { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.worn-items .worn-item { display:flex; align-items:center; gap:7px; min-height:30px; padding:4px 8px; border:1px solid #b9a67b; border-radius:20px; background:#eadbb7; box-shadow:none; font-size:11px; }
.worn-item span:first-child { overflow-wrap:anywhere; }
.worn-item span:last-child { font-size:17px; }
#inventory { top:136px; left:50%; translate:-50% 0; width:410px; z-index:2; }
#inventory h2 { margin-bottom:12px; }
.inventory-items { display:grid; grid-template-columns:repeat(var(--inventory-columns,4),minmax(0,1fr)); gap:7px; max-height:28dvh; overflow-y:auto; padding:2px; }
.inventory-items button { min-width:0; min-height:96px; padding:5px 4px 7px; display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:none; border:1px solid #b7a37c; background:#ecddbb; border-radius:12px; font-size:11px; touch-action:none; overflow-wrap:anywhere; }
.inventory-items button[aria-pressed=true] { border:2px solid #645236; background:#e4cc95; padding:4px 3px 6px; }
.inventory-items canvas { width:100%; height:43px; object-fit:contain; pointer-events:none; }
.inventory-hint { margin:9px 0 0; min-height:18px; font-size:12px; }
#item-ghost { position:fixed; z-index:40; pointer-events:none; width:84px; height:64px; translate:-50% -50%; filter:drop-shadow(0 5px 3px #0005); }
#item-ghost canvas { width:100%; height:100%; object-fit:contain; }
#dock { bottom:max(25px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); gap:16px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
body[data-view=stable] #dock, body[data-view=room] #dock { display:flex; }
#dock a, #dock button { position:relative; width:82px; height:79px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:8px; border:2px solid var(--game-rim); border-top-color:var(--game-highlight); border-left-color:var(--game-highlight); border-radius:24px;
  background:var(--game-cream); color:var(--game-ink); box-shadow:0 4px 0 var(--game-shadow),0 6px 11px #07141633; }
#dock a:hover { background:var(--game-highlight); text-decoration:none; }
#dock b { color:inherit; font-size:13px; font-weight:500; }
#dock .ic { display:block; height:26px; }
#dock .ic svg { width:26px; height:26px; }
#dock a[aria-current=page], #dock button[aria-expanded=true] { background:var(--game-active); box-shadow:0 4px 0 var(--game-shadow); }
#dock a[aria-current=page] b { font-weight:500; }
#dock .dot { background:#645236; }
body[data-view=stable] #hero { top:28%; left:50%; width:min(360px,calc(100vw - 28px)); }
.hero-card, #panel, #toast { backdrop-filter:none; border-radius:23px; border:2px solid var(--game-rim); border-top-color:var(--game-highlight); box-shadow:0 5px 0 var(--game-shadow),0 12px 20px #06141644; }
#toast { top:74px; color:var(--game-ink); }
body[data-view=room] #panel { top:76px; bottom:126px; border-radius:23px; background:var(--game-cream); }
body[data-view=room] { background:var(--bg); }
.page-heading .eyebrow { display:none; }
.page-heading p.sub { font-style:normal; }
.back-link { display:inline-flex; align-items:center; border:0; padding:0; color:var(--game-ink); }
.back-link:hover { color:var(--game-ink); }
.tile, .box, .card { background:#eadbb755; }
.tile canvas { background:none; }
.tile .tag { background:var(--game-cream); color:var(--ink); border:1px solid var(--line-2); }   /* the old dark badge hid the new dark ink */
button.tile:hover { background:#eadbb7; border-color:var(--game-rim); }
.tile.selected::before, .chips button.on::before, .result-list .you::before { color:var(--game-cream); background:#645236; }
.tabs button { color:var(--dim); box-shadow:none; font-size:13px; }
.tabs button.on { color:var(--game-ink); }
.league-animals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.league-animals .tile { padding:5px; text-align:center; box-shadow:none; font-size:11px; }
.league-animals canvas { width:100%; height:55px; }
#store-preview { width:100%; height:180px; object-fit:contain; }
.store-items .tile { box-shadow:none; }
.store-items .tile canvas { height:72px; }
.store-items small { font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:720px) {
  #top { padding:12px; }
  #who { max-width:110px; font-size:11px; }
  #balance { font-size:11px; padding:7px; }
  #stable-utilities { top:14px; left:12px; }
  body[data-view=stable] #top { top:66px; height:auto; }
  body[data-view=stable] #new-animal { top:124px; right:14px; font-size:12px; }
  #inventory { top:180px; padding:13px 11px 10px; }
  #inventory .inventory-items { grid-template-columns:repeat(var(--inventory-mobile-columns,4),minmax(0,1fr)); gap:5px; max-height:25dvh; }
  #dock { left:50%; right:auto; bottom:max(24px,env(safe-area-inset-bottom)); gap:13px; }
  #dock a, #dock button { width:76px; height:74px; }
  #dock b { font-size:12px; }
  #stable-ui .game-close { width:44px; height:44px; min-height:44px; }
  .worn-items .worn-item { min-height:44px; }
  body[data-view=room] #panel { top:70px; bottom:122px; display:flex; overflow-y:auto; }
  body[data-view=room] #heading { flex:none; }
  body[data-view=room] #content { flex:none; overflow:visible; padding:4px 15px 16px; }
  body[data-view=room] #side { flex:none; overflow:visible; padding:15px; border-top:1px solid var(--line); border-left:0; }
  body[data-view=room] .page-heading { padding:10px 15px; }
  .tabs { flex-wrap:wrap; }
  .tabs button { min-width:75px; padding:8px 5px; }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:379px) { #inventory .inventory-items { grid-template-columns:repeat(var(--inventory-small-columns,3),minmax(0,1fr)); } }
/* Touch uses tap-to-apply so the owned-item grid can still scroll naturally. */
@media(pointer:coarse) { .inventory-items button { touch-action:pan-y; } }
@media(max-height:620px) and (min-width:721px) { #inventory { top:95px; } #new-animal { top:68px; } }