/* =======================================================================
   austin.css — AUSTIN MUSIC (austin.html). The Frost ice skin: the owner
   picked "Keep the Frost sci-fi look" on 2026-10-22. Tokens are
   css/tonight.css's own, same names, so the two pages read as one site.
   No underline bars anywhere (a picked tab is just the bright one).
   ======================================================================= */
:root{
  --ice-deep:#05131f; --ice-deep2:#0a2740; --ice-mid:#0e4a6e;
  --ice-bright:#38e6ff; --ice-light:#b8ecff; --ice-white:#eafcff;
  --frost-3:#6bb8dd; --frost-4:#2b6f96; --warm:#ff2d95; --line:#4bb4d8;
  --gold:#4ddbff; --gold-deep:#0688a8;
  --display:"Anton","Impact","Haettenschweiler",sans-serif;
  --pixel:"VT323","Courier New",monospace;
  --body:"Space Grotesk",Verdana,Geneva,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ice-deep);color:var(--ice-white);font-family:var(--body)}
body{overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

.am{position:relative;height:100dvh;display:flex;flex-direction:column;max-width:760px;margin:0 auto;
  background:radial-gradient(120% 60% at 50% 0%,var(--ice-deep2) 0%,var(--ice-deep) 70%);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}

.am-head{display:flex;align-items:center;gap:10px;padding:12px 16px 6px}
.am-brand{font-family:var(--display);font-size:18px;letter-spacing:2px;color:var(--ice-bright)}
.am-brand span{margin-left:3px}
.am-head h1{flex:1;margin:0;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:1px;
  color:var(--ice-white);text-shadow:0 0 14px rgba(56,230,255,.45)}
.am-game{font-family:var(--pixel);font-size:20px;color:var(--ice-light);border:1px solid var(--line);
  border-radius:8px;padding:2px 10px}

.am-tabs{display:flex;gap:6px;padding:6px 16px 10px}
.am-tab{flex:1;background:transparent;border:1px solid var(--frost-4);border-radius:10px;padding:8px 0;
  font-family:var(--pixel);font-size:21px;letter-spacing:1px;color:var(--frost-3)}
.am-tab.is-on{background:var(--ice-bright);border-color:var(--ice-bright);color:var(--ice-deep)}
.am-tabs--four .am-tab{font-size:18px;letter-spacing:0}
.am-tabs[hidden],.am-find[hidden],.am-scroll[hidden]{display:none}

/* the search and the three other screens, one row */
.am-find{display:flex;align-items:center;gap:6px;padding:0 16px 10px}
.am-q{position:relative;flex:1;min-width:0}
.am-q input{width:100%;-webkit-appearance:none;appearance:none;background:rgba(5,20,34,.6);color:var(--ice-white);
  border:1px solid var(--frost-4);border-radius:10px;padding:7px 30px 7px 10px;font:inherit;font-size:15px}
.am-q input::placeholder{color:var(--frost-3)}
.am-q input:focus{outline:none;border-color:var(--ice-bright)}
.am-q input::-webkit-search-cancel-button{display:none}
.am-qx{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;
  background:var(--frost-4);color:var(--ice-white);font-size:15px;line-height:1;padding:0}
.am-qx[hidden]{display:none}
.am-go{flex:0 0 auto;background:transparent;border:0;padding:6px 3px;font-family:var(--pixel);font-size:19px;letter-spacing:1px;color:var(--ice-light)}
.am-go[hidden]{display:none}
.am-go--live{color:var(--warm)}

/* the gold PLAN MY NIGHT and the radio, side by side */
.am-top{display:flex;gap:8px;padding:0 16px 10px;align-items:stretch}
.am-top .am-mix{flex:1;width:auto;margin:0}
.am-planrow{flex:1;display:flex}
.am-planrow>*{flex:1}
.am-gifts{padding:0 16px}
.am-kinds{display:flex;gap:6px;padding:0 16px 8px}
.am-kind{background:transparent;border:1px solid var(--frost-4);border-radius:999px;padding:3px 12px;
  font-family:var(--pixel);font-size:17px;letter-spacing:1px;color:var(--frost-3)}
.am-kind span{color:var(--ice-light);margin-left:2px}
.am-kind.is-on{border-color:var(--ice-bright);color:var(--ice-bright)}
.am-src{margin:10px 16px 0;font-size:11px;line-height:1.5;color:var(--frost-3)}
.am-src:empty{display:none}
.am-src a{color:var(--frost-3)}

/* the other screens: each takes the space under the header, pans inside itself,
   and has one way back, its ✕ */
.am-pane{flex:1;min-height:0;display:flex;flex-direction:column}
.am-pane[hidden]{display:none}
.am-panehead{display:flex;align-items:center;gap:10px;padding:4px 16px 8px}
.am-panehead h2{flex:1;margin:0;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:1px;color:var(--ice-bright)}
.am-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ice-white);font-size:20px;line-height:1;padding:0}
.am-panebody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px}
.am-when{font-family:var(--pixel);font-size:17px;color:var(--frost-3);margin:0 0 8px}
.am-map{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.am-word{background:transparent;border:1px solid var(--line);border-radius:8px;padding:4px 12px;font-family:var(--pixel);font-size:18px;color:var(--ice-light)}

/* VENUES (js/venue-dir.js's rows) */
.dsearch{width:100%;-webkit-appearance:none;appearance:none;margin:0 0 8px;padding:9px 12px;background:rgba(5,20,34,.6);
  color:var(--ice-white);border:1px solid var(--frost-4);border-radius:10px;font:inherit;font-size:15px}
.dsearch::placeholder{color:var(--frost-3)}
.dsearch:focus{outline:none;border-color:var(--ice-bright)}
.shead{margin:14px 0 4px;font-family:var(--pixel);font-weight:400;font-size:18px;letter-spacing:2px;color:var(--frost-3)}
.dir__row{display:flex;gap:10px;align-items:baseline;padding:10px 2px;border-top:1px solid rgba(75,180,216,.16)}
.dir__name{flex:1 1 auto;min-width:0;font-weight:700;font-size:15px}
.dir__st{color:var(--frost-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.badge{flex:0 0 auto;font-family:var(--pixel);font-size:15px;padding:0 6px;border-radius:5px}
.badge--tonight{border:1px solid var(--ice-bright);color:var(--ice-bright)}
.badge--on{background:var(--ice-bright);color:var(--ice-deep)}
.empty{padding:24px 0;color:var(--frost-3)}

/* LIVE (js/stream-player.js's cards) */
.room{border-top:1px solid rgba(75,180,216,.16);padding:12px 0}
.rhead{display:flex;gap:10px;align-items:baseline}
.rname{margin:0;font-size:17px;font-weight:700}
.sp-mount{margin:8px 0 0}
.sp-box{border:1px solid var(--frost-4);border-radius:10px;overflow:hidden}
.sp-box.sp-live{border-color:var(--warm)}
.sp-video,.sp-frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.sp-cap{padding:6px 10px;font-size:13px}
.sp-head{font-family:var(--pixel);font-size:17px;letter-spacing:1px}
.sp-live .sp-head{color:var(--warm)}
.sp-note{font-size:13px;color:var(--frost-3)}
.sp-bill{margin:8px 0 0;font-size:14px}
.onair,.soon{font-family:var(--pixel);font-size:15px;padding:0 6px;border-radius:5px;margin-right:6px}
.onair{background:var(--warm);color:#fff}
.soon{border:1px solid var(--ice-bright);color:var(--ice-bright)}

.am-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 0 12px;-webkit-overflow-scrolling:touch}

.am-mix{display:block;width:calc(100% - 32px);margin:0 16px 12px;padding:10px 8px;border:0;border-radius:12px;
  background:linear-gradient(180deg,var(--ice-bright),#17b5d6);color:var(--ice-deep);
  font-family:var(--display);font-size:16px;letter-spacing:1px;box-shadow:0 0 18px rgba(56,230,255,.35)}
.am-mix:disabled{opacity:.35;box-shadow:none}

.am-h{margin:6px 16px 8px;font-family:var(--pixel);font-weight:400;font-size:20px;letter-spacing:2px;color:var(--frost-3)}
.am-h span{color:var(--ice-light);margin-left:6px}

.am-picks{display:flex;gap:10px;overflow-x:auto;padding:0 16px 12px;scroll-snap-type:x mandatory}
.am-pick{position:relative;flex:0 0 46%;max-width:200px;scroll-snap-align:start;background:var(--ice-deep2);
  border:1px solid var(--frost-4);border-radius:12px;overflow:hidden;padding-bottom:8px}
.am-pick--friend{border-color:var(--warm)}
.am-pick canvas{display:block;width:100%;height:auto;background:#020a12}
.am-pick__act{margin:7px 9px 0;font-weight:700;font-size:15px;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:34px}
.am-pick__where{margin:3px 46px 0 9px;font-size:12px;color:var(--frost-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-pick .am-play{position:absolute;right:7px;bottom:8px}
.am-tag{position:absolute;top:6px;left:6px;background:var(--warm);color:#fff;font-family:var(--pixel);
  font-size:15px;padding:0 6px;border-radius:5px}

.am-list{list-style:none;margin:0;padding:0}
.am-day{padding:12px 16px 4px;font-family:var(--display);font-size:18px;letter-spacing:1px;color:var(--ice-bright)}
.am-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid rgba(75,180,216,.16)}
.am-row--friend{background:rgba(255,45,149,.08)}
.am-row{cursor:pointer}
.am-row.is-open{background:rgba(56,230,255,.12)}
.am-row--dark{opacity:.7}
.am-row--dark time{color:var(--frost-4)}
.am-pick{cursor:pointer}
.am-row time{flex:0 0 52px;font-family:var(--pixel);font-size:20px;color:var(--ice-bright)}
.am-row__txt{flex:1;min-width:0}
.am-row__txt b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-row__txt span{display:block;font-size:13px;color:var(--frost-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-row__txt em{font-style:normal;color:var(--ice-bright)}
.am-row__txt em.am-gift{color:var(--ice-deep);background:var(--gold);padding:0 4px;border-radius:4px;font-size:11px;font-weight:700}
.am-empty{padding:30px 16px;color:var(--frost-3);text-align:center}

.am-play{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--ice-bright);
  background:rgba(56,230,255,.12);display:grid;place-items:center;padding:0}
.am-play svg{width:16px;height:16px;fill:var(--ice-bright)}
.am-play.is-on{background:var(--ice-bright)}
.am-play.is-on svg{fill:var(--ice-deep)}
.am-play--none{border:0;background:none}

.am-bar{position:relative;display:flex;align-items:center;gap:10px;padding:8px 16px;
  background:var(--ice-deep2);border-top:1px solid var(--line)}
.am-bar[hidden]{display:none}
.am-bar__btn{width:40px;height:40px;border-radius:50%;border:0;background:var(--ice-bright);color:var(--ice-deep);font-size:16px}
.am-bar__now{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the Spotify embed lives here, off the reading line: StageSound needs a
   real iframe to sound, and it is the record's own player */
.am-bar{flex-wrap:wrap}
.am-dock{flex:0 0 100%;order:-1;height:80px;border-radius:10px;overflow:hidden}
.am-dock iframe{width:100%;height:80px;border:0}

.am-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ice-white);color:var(--ice-deep);
  padding:8px 14px;border-radius:10px;font-size:14px;font-weight:700;max-width:90vw;text-align:center;z-index:5}
.am-toast[hidden]{display:none}

/* the two big buttons share one row and one height */
.am-top .am-mix{font-size:15px;line-height:1.15;padding:6px 8px;min-height:48px}
.am-planrow .tn__planbtn{padding:5px 10px 6px;min-height:48px}
.am-planrow .tn__planbtn b{font-size:17px}
.am-planrow .tn__planbtn small{font-size:12px}