:root{
    --night-barn:#1f2a24;
    --night-barn-2:#182119;
    --barn-wood:#4a3323;
    --barn-wood-light:#5c4230;
    --barn-wood-dark:#33221677;
    --hay-gold:#e3a857;
    --hay-gold-bright:#f2c47e;
    --pasture-green:#7a9b57;
    --pasture-green-dark:#5c7a3f;
    --cream-paper:#f1e4c8;
    --cream-paper-dim:#d9c9a3;
    --barn-red:#b5482f;
    --barn-red-bright:#d15a3d;
    --sky-dusk:#3a4a52;
    --shadow-deep: 0 10px 30px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    background:
      radial-gradient(ellipse at 20% -10%, rgba(227,168,87,.10), transparent 55%),
      radial-gradient(ellipse at 100% 110%, rgba(122,155,87,.12), transparent 55%),
      var(--night-barn);
    font-family:'Nunito Sans', sans-serif;
    color:var(--cream-paper);
    padding:18px;
  }
  h1,h2,h3,.display{font-family:'Baloo 2', sans-serif;}
  ::selection{background:var(--hay-gold); color:#222;}

  .wrap{max-width:1180px; margin:0 auto;}

  /* ---------- Header ---------- */
  header.top{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap;
    background:linear-gradient(180deg, var(--barn-wood-light), var(--barn-wood));
    border:1px solid #00000040;
    border-radius:18px;
    padding:14px 20px;
    box-shadow:var(--shadow-deep);
    margin-bottom:16px;
    position:relative;
    overflow:hidden;
  }
  header.top::after{
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 38px);
    pointer-events:none;
  }
  .brand{display:flex; align-items:center; gap:12px; position:relative;}
  .brand .lantern{
    width:42px;height:42px; border-radius:50%;
    background:radial-gradient(circle at 40% 35%, var(--hay-gold-bright), var(--hay-gold) 55%, #a5762f 100%);
    box-shadow:0 0 22px 6px rgba(227,168,87,.55);
    flex:none;
  }
  .brand h1{margin:0; font-size:26px; letter-spacing:.5px; color:var(--cream-paper); text-shadow:0 2px 0 rgba(0,0,0,.35);}
  .brand p{margin:0; font-size:12.5px; color:var(--cream-paper-dim); font-weight:600;}

  .hud{display:flex; gap:10px; flex-wrap:wrap; position:relative;}
  .hud .pill{
    display:flex; align-items:center; gap:7px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:7px 12px;
    font-weight:800;
    font-size:14px;
  }
  .hud .pill .ico{font-size:16px;}
  .xpbar-wrap{width:110px; height:8px; background:rgba(0,0,0,.4); border-radius:6px; overflow:hidden;}
  .xpbar{height:100%; background:linear-gradient(90deg, var(--pasture-green-dark), var(--pasture-green)); width:0%; transition:width .4s;}

  /* ---------- Layout ---------- */
  .layout{
    display:grid;
    grid-template-columns: 260px 1fr 270px;
    gap:16px;
    align-items:start;
  }
  @media (max-width: 980px){
    .layout{grid-template-columns:1fr;}
  }

  .panel{
    background:linear-gradient(180deg, rgba(74,51,35,.55), rgba(31,42,36,.75));
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:14px;
    box-shadow:var(--shadow-deep);
  }
  .panel h2{
    font-size:15px; margin:0 0 10px 0; color:var(--hay-gold-bright);
    text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; gap:6px;
  }

  /* ---------- Stable list ---------- */
  .stable-list{display:flex; flex-direction:column; gap:8px; max-height:520px; overflow-y:auto; padding-right:2px;}
  .horse-card-mini{
    display:flex; align-items:center; gap:10px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    padding:8px;
    cursor:pointer;
    transition:transform .15s, border-color .15s;
  }
  .horse-card-mini:hover{transform:translateY(-1px); border-color:var(--hay-gold);}
  .horse-card-mini.active{border-color:var(--hay-gold-bright); background:rgba(227,168,87,.14);}
  .horse-card-mini .mini-avatar{width:42px; height:42px; border-radius:50%; background:var(--night-barn-2); flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid rgba(255,255,255,.1);}
  .horse-card-mini .mini-avatar svg{width:56px; height:56px; transform:translateY(4px);}
  .horse-card-mini .mini-info{flex:1; min-width:0;}
  .horse-card-mini .mini-info .name{font-weight:800; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .horse-card-mini .mini-info .sub{font-size:11px; color:var(--cream-paper-dim);}
  .mood-emoji{font-size:16px;}

  .capacity-note{font-size:11.5px; color:var(--cream-paper-dim); text-align:center; margin:8px 0;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(180deg, var(--hay-gold-bright), var(--hay-gold));
    color:#3a2712; border:none; border-radius:11px;
    padding:9px 14px; font-weight:800; font-size:13.5px;
    cursor:pointer; font-family:inherit;
    box-shadow:0 3px 0 #a5762f, 0 6px 14px rgba(0,0,0,.35);
    transition:transform .1s, box-shadow .1s;
  }
  .btn:active{transform:translateY(2px); box-shadow:0 1px 0 #a5762f, 0 3px 8px rgba(0,0,0,.3);}
  .btn.secondary{background:linear-gradient(180deg, #6f8a52, var(--pasture-green-dark)); color:#f4f8ee; box-shadow:0 3px 0 #435a2c, 0 6px 14px rgba(0,0,0,.35);}
  .btn.danger{background:linear-gradient(180deg, var(--barn-red-bright), var(--barn-red)); color:#fff0ea; box-shadow:0 3px 0 #7c2f1c, 0 6px 14px rgba(0,0,0,.35);}
  .btn:disabled{filter:grayscale(.6); opacity:.5; cursor:not-allowed; box-shadow:none; transform:none;}
  .btn.block{width:100%;}
  .btn.small{padding:6px 10px; font-size:12px; border-radius:9px;}

  /* ---------- Main stage ---------- */
  .stage-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 20px; gap:14px;}
  .stage-empty p{color:var(--cream-paper-dim); max-width:320px; margin:0;}

  .stall{
    position:relative;
    border-radius:20px;
    background:
      radial-gradient(circle at 50% 20%, rgba(227,168,87,.22), transparent 60%),
      linear-gradient(180deg, var(--sky-dusk), #263b34 70%);
    padding:18px;
    border:6px solid var(--barn-wood);
    box-shadow: inset 0 0 40px rgba(0,0,0,.4), var(--shadow-deep);
  }
  .stall-window{
    position:relative;
    margin:0 auto;
    width:min(320px, 80%);
    aspect-ratio:1/1.05;
    border-radius:50% 50% 46% 46%;
    background:radial-gradient(circle at 50% 38%, rgba(242,196,126,.28), transparent 65%);
    border:5px solid var(--barn-wood-light);
    box-shadow:inset 0 0 30px rgba(0,0,0,.35), 0 0 0 4px var(--night-barn-2);
    display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  }
  .stall-window svg{width:100%; height:100%;}

  .horse-headline{text-align:center; margin-top:12px;}
  .horse-headline h2{font-size:24px; margin:2px 0; color:var(--cream-paper); text-transform:none; letter-spacing:.3px;}
  .horse-headline .tag{
    display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:center;
    font-size:12px; color:var(--cream-paper-dim); font-weight:700;
  }
  .horse-headline .tag span{background:rgba(0,0,0,.25); padding:3px 9px; border-radius:8px;}

  .status-flags{display:flex; gap:8px; justify-content:center; margin-top:6px; flex-wrap:wrap;}
  .flag{font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:20px;}
  .flag.sick{background:rgba(181,72,47,.28); color:#ffb7a3; border:1px solid rgba(181,72,47,.6);}
  .flag.sleep{background:rgba(122,155,87,.2); color:#cfe3b6; border:1px solid rgba(122,155,87,.5);}

  /* ---------- Stat bars ---------- */
  .stats{margin-top:18px; display:flex; flex-direction:column; gap:10px;}
  .stat-row{display:flex; align-items:center; gap:10px;}
  .stat-row .label{width:112px; font-size:12.5px; font-weight:800; display:flex; align-items:center; gap:6px; color:var(--cream-paper-dim);}
  .stat-track{flex:1; height:14px; border-radius:8px; background:rgba(0,0,0,.35); overflow:hidden; border:1px solid rgba(255,255,255,.08); position:relative;}
  .stat-fill{height:100%; border-radius:8px; transition:width .5s ease;}
  .stat-fill.hunger{background:linear-gradient(90deg,#c98a2e,#f2c47e);}
  .stat-fill.clean{background:linear-gradient(90deg,#3f7fa6,#7fc4e8);}
  .stat-fill.happy{background:linear-gradient(90deg,#c94f7f,#f28cb1);}
  .stat-fill.energy{background:linear-gradient(90deg,#5c7a3f,#a3cc6e);}
  .stat-fill.health{background:linear-gradient(90deg,#b5482f,#e88a6a);}
  .stat-val{width:32px; text-align:right; font-size:11.5px; font-weight:800; color:var(--cream-paper-dim);}

  /* ---------- Actions ---------- */
  .actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:18px;}
  .food-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .food-chip{
    display:flex; align-items:center; gap:6px;
    background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; padding:6px 10px; font-size:12.5px; font-weight:700; cursor:pointer;
  }
  .food-chip:hover{border-color:var(--hay-gold);}
  .food-chip.disabled{opacity:.4; cursor:not-allowed;}
  .food-chip .count{background:var(--hay-gold); color:#3a2712; border-radius:6px; padding:0 5px; font-size:11px;}

  /* ---------- Log ---------- */
  .log-list{display:flex; flex-direction:column-reverse; gap:8px; max-height:260px; overflow-y:auto; padding-right:2px;}
  .log-item{font-size:12.5px; background:rgba(0,0,0,.2); border-radius:10px; padding:7px 10px; line-height:1.4;}
  .log-item .day{color:var(--hay-gold-bright); font-weight:800; margin-right:5px;}

  .ach-list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
  .ach{display:flex; gap:8px; align-items:center; padding:7px 8px; border-radius:10px; background:rgba(0,0,0,.18); font-size:12px;}
  .ach.locked{opacity:.35;}
  .ach .ico{font-size:18px;}

  /* ---------- Modal ---------- */
  .modal-bg{
    position:fixed; inset:0; background:rgba(10,12,10,.72);
    display:none; align-items:center; justify-content:center; z-index:50; padding:16px;
    backdrop-filter:blur(2px);
  }
  .modal-bg.show{display:flex;}
  .modal{
    background:linear-gradient(180deg, var(--barn-wood-light), var(--barn-wood));
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px; padding:20px; max-width:460px; width:100%;
    box-shadow:var(--shadow-deep); max-height:86vh; overflow-y:auto;
  }
  .modal h3{margin-top:0; color:var(--hay-gold-bright);}
  .modal-close{float:right; background:none; border:none; color:var(--cream-paper); font-size:20px; cursor:pointer; line-height:1;}
  .shop-item{display:flex; align-items:center; justify-content:between; gap:10px; background:rgba(0,0,0,.22); border-radius:12px; padding:10px 12px; margin-bottom:8px;}
  .shop-item .info{flex:1;}
  .shop-item .info b{display:block; font-size:14px;}
  .shop-item .info span{font-size:11.5px; color:var(--cream-paper-dim);}
  .field{margin-bottom:12px;}
  .field label{display:block; font-size:12.5px; font-weight:800; margin-bottom:5px; color:var(--cream-paper-dim);}
  .field input, .field select{
    width:100%; padding:9px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.15);
    background:rgba(0,0,0,.3); color:var(--cream-paper); font-family:inherit; font-size:14px;
  }
  .swatches{display:flex; gap:8px; flex-wrap:wrap;}
  .swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;}
  .swatch.sel{border-color:var(--hay-gold-bright);}

  .toast-wrap{position:fixed; top:14px; right:14px; display:flex; flex-direction:column; gap:8px; z-index:80;}
  .toast{background:var(--night-barn-2); border:1px solid var(--hay-gold); color:var(--cream-paper); padding:10px 16px; border-radius:10px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow-deep); animation:slidein .25s ease;}
  @keyframes slidein{from{transform:translateX(30px); opacity:0;} to{transform:translateX(0); opacity:1;}}

  footer{text-align:center; margin-top:18px; color:var(--cream-paper-dim); font-size:11.5px;}
  footer button{background:none; border:none; color:var(--cream-paper-dim); text-decoration:underline; cursor:pointer; font-size:11.5px; font-family:inherit;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }