/* The battle controls share the title screen's dark stone and warm brass. */
#side{background:#14262a;border:1px solid #8d7854;border-top:1px solid #d6b476;border-radius:0;padding:10px;box-shadow:0 8px 22px #0007;color:#e7e6d6;scrollbar-color:#a18a60 #14262a}
#side h1{font-size:16px;text-align:left;color:#d6b476;text-shadow:none;margin:0 0 10px}
#side h3{display:none}
#side button{background:#263c3d;border:1px solid #617369;border-radius:3px;box-shadow:none;text-shadow:none;color:#e6eadb;transition:background .12s,border-color .12s,transform .12s}
#side button:not(:disabled):hover{background:#354c47;filter:none;box-shadow:none;transform:translateY(-1px)}
#side button:not(:disabled):active{transform:translateY(1px)}
#side button:focus-visible{outline:3px solid #fff0bc;outline-offset:2px;z-index:3}
#side .hud{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:0;margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid #536056}
#side .stat{background:none;border-radius:0;padding:2px 8px;gap:3px;display:flex;flex-direction:column;align-items:flex-start;font:11px Georgia,serif;color:#b9cabb;min-width:0}
#side .stat:first-child{padding-left:0}
#side .stat:nth-child(2){border-left:1px solid #536056;border-right:1px solid #536056}
#side .stat:nth-child(5){grid-column:3;grid-row:1}
#side .stat:nth-child(3){grid-column:1;grid-row:2;padding:5px 0 0;font-size:0}
#side .stat:nth-child(4){grid-column:2/4;grid-row:2;padding:5px 8px 0;font-size:0}
#side .stat b{font:700 16px/1.15 Cinzel,Georgia,serif;letter-spacing:-.02em;white-space:nowrap}
#side #gold{color:#f0c77e}
#side #hp{color:#e7b0a1}
#side #round{color:#e7e6d6}
#side .dchip{font:11px Georgia,serif;border:0!important;color:#bdcdbe!important;margin:0;padding:0;border-radius:0}
#side #wave{display:flex;justify-content:center;min-height:48px;margin:0 0 7px;padding:10px;font:700 16px Cinzel,Georgia,serif;background:#d6a15b;border:1px solid #f0c77e;color:#21190d;grid-column:auto}
#side #wave:hover:not(:disabled){background:#edbc72}
#side #wave.live,#side #wave.live:disabled{color:#fff0ce;opacity:1;border-color:#aa8b59;background:linear-gradient(90deg,#79572f var(--p,0%),#273d3b var(--p,0%));font-size:14px}
#side #build-tabs{display:flex;gap:0;margin:0 0 8px;overflow-x:auto;touch-action:pan-x;border-bottom:1px solid #536056;scrollbar-width:thin}
#side #build-tabs button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;flex:1;min-width:0;min-height:38px;margin:0;padding:7px 2px;font:10px Cinzel,Georgia,serif;color:#b9cabb;white-space:nowrap;box-shadow:none}
#side #build-tabs button[aria-pressed=true]{color:#ffe1a3;border-bottom-color:#e6b970;background:#203638}
#wrap:not(.compact) #side #build-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#wrap:not(.compact) #side #build-tabs button{min-height:32px}
#side #build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:2px 0 8px}
#side #build .cat{display:none}
#side #build button.card{--element:#b8bca4;display:flex;flex-direction:column;gap:0;min-height:104px;width:auto;min-width:0;padding:5px 2px 7px;margin:0;background:linear-gradient(180deg,#31443f 0%,#192d30 70%);border:1px solid #57665b;border-top:2px solid var(--element);border-radius:3px;color:#f0e9d3;overflow:visible;opacity:1!important}
#side #build button.card[data-k=fire]{--element:#e5a077}
#side #build button.card[data-k=frost],#side #build button.card[data-k=skyspear]{--element:#91c9dc}
#side #build button.card[data-k=poison]{--element:#abc47d}
#side #build button.card[data-k=mage]{--element:#c4a3df}
#side #build button.card[data-k=lightning],#side #build button.card[data-k=mine],#side #build button.card[data-k=totem]{--element:#e2be78}
#side #build button.card canvas{width:52px!important;height:52px!important;background:none;box-shadow:none;border-radius:0;margin:0 0 2px;filter:drop-shadow(0 4px 3px #0006);flex:none}
#side #build button.card .nm{font:600 10px/1.25 Cinzel,Georgia,serif!important;letter-spacing:0!important;max-width:100%;text-overflow:ellipsis;color:#f0e9d3}
#side #build button.card .card-role{font:10px/1.4 Georgia,serif;color:#b9cabb}
#side #build button.card .cost{font:700 12px/1.2 Georgia,serif;color:#f0c77e;margin:3px 0 0;text-shadow:none}
#side #build button.card .hk{top:3px;left:4px;font:9px Georgia,serif;color:#b9cabb;opacity:1;background:none;border:0}
#side #build button.card.sel{background:linear-gradient(180deg,#5c6246,#30423a);border-color:#edcb86;box-shadow:inset 0 0 0 1px #edcb86;transform:translateY(-2px)}
#side #build button.card.unaffordable .cost{color:#eeafa0}
#side #build button.card.unaffordable canvas{filter:grayscale(.7) opacity(.6)}
#side #build button.card:disabled{opacity:.45!important}
#side #build .card.cat-hidden{display:none}
#side #undo,#side #repair,#side #empower{min-height:40px;font:11px Cinzel,Georgia,serif;padding:7px;margin:4px 0;background:#203436;border-color:#52665d}
#side .hk{color:#c3cdb9;border-color:#6a7766}
#side .row{border-top:1px solid #536056;padding-top:7px;margin-top:8px;gap:5px}
#side .row button{min-height:38px;background:none;border:1px solid #52665d;font-size:14px}
#side #info,#side #next{background:#102025;border:0;border-radius:2px;padding:10px;margin-top:8px;font:12px/1.5 Georgia,serif;color:#cbd7c5;min-height:0}
#side #info b,#side #next>b{color:#f0d5a0}
#side .chip{background:#273e3d;color:#dae0cc;border:1px solid #5f7162;border-radius:2px;line-height:20px}
.compact #side{padding:9px 10px!important}
.compact #side>div:first-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,25%);gap:0 10px}
.compact #side .hud{grid-column:1;grid-row:1}
.compact #side #wave{grid-column:2;grid-row:1;align-self:start;min-height:60px;font-size:13px;padding:8px}
.compact #side #build-tabs,.compact #side #build{grid-column:1/-1}
.compact #side .hud{grid-template-columns:1fr 1fr 1fr;margin-bottom:7px}
.compact #side .stat b{font-size:19px}
.compact #side #build-tabs button{min-height:44px!important;padding:7px 3px!important;font:11px Cinzel,Georgia,serif!important}
.compact #side #build{display:flex;overflow-x:auto;gap:8px;padding:3px 1px 9px;scroll-snap-type:x proximity;scrollbar-color:#a18a60 #102025;scrollbar-width:thin}
.compact #side #build button.card{flex:0 0 79px;min-height:107px;scroll-snap-align:start;padding:5px 3px 6px;flex-wrap:nowrap}
.compact #side #build .card .hk{display:none!important}
.compact #side #build .card .nm{font-size:10px!important}
.compact #side #build .card .cost{font-size:12px}
.compact #side>div:nth-child(2){gap:5px}
.compact #side #undo,.compact #side #repair,.compact #side #empower{margin:2px 0;min-height:44px;font-size:10px;gap:3px;padding:5px}
.compact #side .row{margin-top:3px;padding-top:6px}
.compact #side .row button{min-height:44px}
@media(max-width:450px){.compact #side .stat{padding-left:5px;padding-right:5px}.compact #side .stat b{font-size:16px}.compact #side .stat:nth-child(3){padding-left:0}.compact #side .dchip{font-size:10px}.compact #side>div:first-child{gap:0 7px}.compact #side #wave{font-size:12px}}
@media(max-width:300px){.compact #side>div:first-child{grid-template-columns:1fr}.compact #side #wave{grid-column:1;grid-row:2;min-height:44px}.compact #side #build-tabs{grid-row:3}.compact #side #build{grid-row:4}}
@media(prefers-reduced-motion:reduce){#side button{transition:none;transform:none!important}}