/* Tenbob XRP live price (v16 card look, same as the stream overlay v16). Responsive: desktop, TV, tablet, phone. */
:root{
  --bg:#03070a; --card:#03070a; --bd:#1b2a35; --box:#0a1218; --txt:#e6f1ee; --mute:#93a7a3;
  --ng:#22f08a; --nr:#ff4d5e; --amber:#ffcf4d; --gold:#ffd23f; --accent:#23c4ff;
  --font:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","Consolas","JetBrains Mono",ui-monospace,"SFMono-Regular","Menlo","DejaVu Sans Mono","Liberation Mono",monospace;
  --k:1;            /* layout scale, set by app.js (1 = 1920 wide) */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--font);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{background:
  linear-gradient(rgba(34,240,138,.035) 1px,transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg,rgba(34,240,138,.035) 1px,transparent 1px) 0 0/64px 64px,
  radial-gradient(1200px 760px at 50% 42%,#071017 0%,rgba(7,16,23,0) 70%),var(--bg)}
a{color:var(--accent)}
button,input{font-family:inherit}

#app{position:fixed;inset:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  padding:max(8px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  gap:10px}

/* ---- top row: small Home button tucked in the corner + rotating coin bar ---- */
#topRow{display:flex;align-items:center;gap:10px;flex:0 0 auto;position:relative;z-index:8;height:clamp(40px,5.4vh,60px)}
#homeBtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px 0 9px;border-radius:999px;
  background:rgba(8,12,22,.9);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;
  font:800 13px/1 system-ui,-apple-system,sans-serif}
#homeBtn svg{display:block}
#homeBtn:hover{color:#34d399;border-color:rgba(52,211,153,.75)}
#homeBtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
html:fullscreen #homeBtn,html:-webkit-full-screen #homeBtn,body.isfs #homeBtn{display:none}

#coins{position:relative;flex:1 1 auto;height:100%;min-width:0;overflow:hidden;font-weight:700;white-space:nowrap;contain:layout paint;
  font-size:calc(28px * var(--k))}
#coins .cpage{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:calc(48px * var(--k));opacity:0;
  transition:opacity .6s ease;transform:translate(-50%,-50%);transform-origin:50% 50%}
#coins .cpage.on{opacity:1}
#coins .ci{display:inline-flex;align-items:baseline;gap:.32em;padding:.2em .5em;letter-spacing:-.3px;border-radius:14px;
  background:rgba(8,12,22,.78);border:1px solid rgba(255,255,255,.12);font-variant-numeric:tabular-nums;white-space:nowrap}
#coins .ci b{font-weight:900;color:#fff}
#coins .ci .cp{color:#e8eef8}
#coins .ci .up{color:#19f08f}#coins .ci .dn{color:#ff4d5e}#coins .ci .na{color:#8a96a8}
#coins .ctag{font-size:.64em;font-weight:900;letter-spacing:1px;color:#8a96a8}

/* ---- the card ---- */
#card{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  background:var(--card);border:2px solid var(--bd);border-radius:calc(30px * var(--k) + 6px);
  padding:calc(50px * var(--k)) calc(56px * var(--k)) calc(40px * var(--k))}
#head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex:0 0 auto;z-index:6}
#hero{min-width:0}
#pair{font-family:var(--mono);font-size:calc(32px * var(--k));line-height:1.75;font-weight:800;letter-spacing:.13em;color:#fff;white-space:nowrap}
#price{--pc:var(--ng);--pg:34,240,138;font-family:var(--mono);font-weight:800;line-height:1;letter-spacing:0;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--pc);font-size:150px;margin-top:calc(14px * var(--k));
  text-shadow:0 0 calc(38px * var(--k)) rgba(var(--pg),.55),0 0 calc(100px * var(--k)) rgba(var(--pg),.25)}
#price.neg{--pc:var(--nr);--pg:255,77,94}
#price.up{animation:nFlashUp .45s steps(2,end)} #price.down{animation:nFlashDown .45s steps(2,end)}
@keyframes nFlashUp{0%,20%{color:#9dffcb}100%{color:var(--pc)}}
@keyframes nFlashDown{0%,20%{color:#ff9aa4}100%{color:var(--pc)}}

/* ---- the crew: leopard, Uga, cyborg + the frog, all facing the price; same moods and reactions ---- */
#crew{position:relative;display:flex;align-items:flex-end;gap:var(--cg,14px);flex:0 0 auto;
  --ma:crewBob 4s ease-in-out infinite;--ja:none}
#crew .cw{position:relative;flex:0 0 auto;height:var(--ch,200px);transform-origin:50% 100%;animation:var(--ma),var(--ja)}
#crew .cw.frog{height:var(--fh,240px)}
#crew .cw>img{position:absolute;display:block;pointer-events:none;user-select:none}
#crew .cw>img.tint{opacity:0;transition:opacity .4s}
#crew.m-down .cw>img.tint{opacity:.12}
#crew.dip .cw>img.tint{opacity:.22}
#crew .fx{position:absolute;opacity:0;background:center/contain no-repeat;pointer-events:none}
#crew .fx.sw{width:13%;aspect-ratio:26/34;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2026%2034%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23bfe8ff%22/%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%235cb6ff%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231f7fe0%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M13%201.5C13%201.5%202.5%2015%202.5%2022.2a10.5%2010.5%200%200%200%2021%200C23.5%2015%2013%201.5%2013%201.5Z%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%230d4d97%22%20stroke-width%3D%221.6%22/%3E%3Cellipse%20cx%3D%228.6%22%20cy%3D%2222%22%20rx%3D%222.6%22%20ry%3D%224.6%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%20transform%3D%22rotate%2818%208.6%2022%29%22/%3E%3C/svg%3E")}
#crew .fx.sp{width:12%;aspect-ratio:1;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M15%201C16.2%2010.5%2019.5%2013.8%2029%2015C19.5%2016.2%2016.2%2019.5%2015%2029C13.8%2019.5%2010.5%2016.2%201%2015C10.5%2013.8%2013.8%2010.5%2015%201Z%22%20fill%3D%22%23ffe36b%22%20stroke%3D%22%23c98a00%22%20stroke-width%3D%221.2%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%223.2%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E")}
#crew .fx.sp3{width:11%;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M15%201.8L18.9%2010.6L28.4%2011.4L21.2%2017.7L23.4%2027.1L15%2022.1L6.6%2027.1L8.8%2017.7L1.6%2011.4L11.1%2010.6Z%22%20fill%3D%22%23ffd23f%22%20stroke%3D%22%23e08a00%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")}
#crew.m-up .fx.sp{animation:cSpark 2.6s ease-out infinite}
#crew.m-up .fx.sp2{animation-delay:.9s} #crew.m-up .fx.sp3{animation-delay:1.8s}
#crew.m-big .fx.sp,#crew.pump .fx.sp{animation:cSpark 1.4s ease-out infinite}
#crew.m-big .fx.sp2,#crew.pump .fx.sp2{animation-delay:.45s} #crew.m-big .fx.sp3,#crew.pump .fx.sp3{animation-delay:.9s}
#crew.m-down .fx.sw{animation:cSweat 2.2s ease-in infinite}
#crew.dip .fx.sw{animation:cSweat 1.6s ease-in infinite}
/* moods (from the 24H % and the 15 min move) and events (pump / dip / level) */
#crew.m-up{--ma:cHappy 1.6s ease-in-out infinite}
#crew.m-big{--ma:cBounce .7s ease-in-out infinite}
#crew.m-down{--ma:cDroop 3s ease-in-out infinite}
#crew.pump{--ma:cBounce .6s ease-in-out infinite}
#crew.dip{--ma:cShake .5s linear infinite}
#crew.mile{--ma:cHop .5s ease-out 3}
#crew.jump{--ja:cJump .7s cubic-bezier(.3,.7,.4,1) 3}
#crew.m-down .cw>img.art{filter:saturate(.8) brightness(.9)}
#crew.dip .cw>img.art{filter:saturate(.8)}
@keyframes crewBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5%)}}
@keyframes cHappy{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6%) rotate(-2deg)}60%{transform:translateY(0) rotate(1deg)}}
@keyframes cBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9%)}}
@keyframes cDroop{0%,100%{transform:translateY(3%) rotate(-3deg)}8%{transform:translate(-2%,3%) rotate(-4.5deg)}16%{transform:translate(2%,3%) rotate(-1.5deg)}24%{transform:translateY(3%) rotate(-3deg)}}
@keyframes cShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2.5%) rotate(-1.5deg)}75%{transform:translateX(2.5%) rotate(1.5deg)}}
@keyframes cHop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-12%) rotate(-5deg)}}
@keyframes cJump{0%,100%{translate:0 0}45%{translate:0 -20%}}
@keyframes cSweat{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(160%)}}
@keyframes cSpark{0%{opacity:0;transform:translateY(0) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translateY(-150%) scale(1.2)}}
/* frog speech bubble, above the frog */
#bub{position:absolute;right:0;bottom:calc(100% + var(--bgap,40px));white-space:nowrap;font:900 var(--bf,39px)/1 "Inter",system-ui,sans-serif;letter-spacing:1px;
  color:#000;background:#cfe6ff;border:calc(var(--bf,39px) * .11) solid #000;border-radius:.56em;padding:.3em .48em;opacity:0;
  transform:scale(.6);transform-origin:80% 100%;transition:opacity .25s,transform .25s;z-index:12;animation:none}
#bub:after{content:"";position:absolute;right:1.2em;bottom:-.6em;border:.3em solid transparent;border-top:.48em solid #000;border-bottom:0}
#crew.say #bub{opacity:1;transform:scale(1)}
#crew.m-up #bub,#crew.m-big #bub,#crew.pump #bub{background:#19f08f}
#crew.m-down #bub,#crew.dip #bub{background:#ffd0d4}
#crew.mile #bub{background:#ffd23f}

/* ---- 24H / HIGH / LOW ---- */
#hl{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(28px * var(--k));flex:0 0 auto;margin-top:calc(34px * var(--k));position:relative;z-index:5}
#hl .box{display:flex;flex-direction:column;justify-content:flex-start;gap:calc(24px * var(--k));min-width:0;
  padding:calc(36px * var(--k)) 0 calc(30px * var(--k)) calc(30px * var(--k));border:2px solid var(--bd);border-radius:calc(20px * var(--k) + 4px);
  background:var(--box);font-family:var(--mono)}
#hl .k{font-family:var(--mono);font-size:calc(28px * var(--k));line-height:1;font-weight:700;color:var(--txt)}
#hl .v{font-family:var(--mono);font-size:calc(36px * var(--k));line-height:1;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
#change.up .v{color:var(--ng)} #change.down .v{color:var(--nr)}
#hlHigh.flash{animation:nBoxHi 1.1s ease-in-out 5} #hlLow.flash{animation:nBoxLo 1.1s ease-in-out 5}
@keyframes nBoxHi{0%,100%{transform:scale(1);border-color:var(--bd)}45%{transform:scale(1.05);border-color:var(--ng)}}
@keyframes nBoxLo{0%,100%{transform:scale(1);border-color:var(--bd)}45%{transform:scale(1.05);border-color:var(--nr)}}

/* ---- chart + alerts ---- */
#chartWrap{position:relative;flex:1 1 auto;min-height:80px;margin-top:calc(30px * var(--k))}
#chart{position:absolute;inset:0;width:100%;height:100%;display:block}
#maCross{position:absolute;left:0;bottom:4px;z-index:6;pointer-events:none;padding:.25em .75em;border-radius:999px;font:900 calc(24px * var(--k) + 4px)/1.2 var(--mono);
  letter-spacing:1px;white-space:nowrap;background:rgba(5,8,16,.86);border:2px solid currentColor;opacity:0;transition:opacity .5s}
#maCross.on{opacity:1} #maCross.gold{color:var(--amber)} #maCross.death{color:#c48bff}
#banner,#flash{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;pointer-events:none;z-index:20}
#banner.show,#flash.show{display:flex}
#banner .band{font-family:var(--mono);padding:.17em .66em;border-radius:16px;font-size:clamp(20px,calc(84px * var(--k)),84px);font-weight:900;letter-spacing:0;white-space:nowrap;color:#fff;
  border:4px solid rgba(255,255,255,.6);box-shadow:0 16px 60px rgba(0,0,0,.7);max-width:100%}
#banner.show .band{animation:bannerIn 8s ease forwards}
#banner.mile .band{background:linear-gradient(90deg,#c48a00,#ffd23f,#c48a00);color:#1a1300}
#banner.high .band{background:linear-gradient(90deg,#ff3fa4,#ffd23f,#19f08f,#23c4ff,#a45bff);text-shadow:0 4px 0 #000,0 0 18px rgba(0,0,0,.6)}
#banner.low .band{background:linear-gradient(90deg,#0e1f3d,#26508f,#0e1f3d);color:#cfe0ff;border-color:rgba(140,180,255,.45);text-shadow:0 4px 0 #050b18}
@keyframes bannerIn{0%{opacity:0;transform:translateY(-40px) scale(.4)}6%{opacity:1;transform:translateY(0) scale(1.1)}10%{transform:scale(1)}
  50%{transform:scale(1.04)}88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.9)}}
#flash .fband{font-family:var(--mono);width:min(100%,1500px);border-radius:16px;border:4px solid rgba(255,255,255,.65);padding:.1em .3em .18em;text-align:center;color:#fff;
  opacity:0;animation:flashIn 5.4s ease forwards}
#flash.up .fband{background:linear-gradient(90deg,rgba(2,110,58,.94),rgba(10,190,105,.96),rgba(2,110,58,.94));text-shadow:0 5px 0 #024a27}
#flash.down .fband{background:linear-gradient(90deg,rgba(130,8,26,.94),rgba(230,50,70,.96),rgba(130,8,26,.94));text-shadow:0 5px 0 #5a0613}
#flash .ftag{display:block;font-size:clamp(13px,calc(38px * var(--k)),38px);font-weight:900;letter-spacing:.16em;line-height:1.1;opacity:.95}
#flash .ftxt{display:block;font-size:clamp(22px,calc(104px * var(--k)),104px);font-weight:900;letter-spacing:1px;line-height:1.02;white-space:nowrap}
@keyframes flashIn{0%{opacity:0;transform:scale(.55)}5%{opacity:1;transform:scale(1.06)}9%{transform:scale(1)}
  50%{transform:scale(1.015)}90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.97)}}
#fx{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:30}

/* ---- stats row ---- */
#stats{position:relative;display:flex;gap:14px;flex:0 0 auto;z-index:5}
.stat{flex:1 1 0;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:.5em 1.1em;border-radius:14px;
  background:rgba(10,18,24,.9);border:1px solid var(--bd);font-family:var(--mono);font-size:clamp(12px,calc(18px * var(--k)),18px)}
.stat .k{color:var(--mute);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:1em}
.stat .v{font-weight:800;color:var(--txt);font-size:1.55em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat.creditStat{flex:0 1 auto;justify-content:center}
#credit{display:flex;align-items:center;font-family:var(--mono);color:var(--mute);font-weight:700;white-space:nowrap;font-size:.92em}
#credit i{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--ng);margin-right:.5em;box-shadow:0 0 10px rgba(34,240,138,.8)}
#credit i.warn{background:var(--gold);box-shadow:none} #credit i.bad{background:var(--nr);box-shadow:none}

/* SUBSCRIBE prompt: slides in over the right of the stats row every 15 min for 10 s */
#subCard{position:absolute;right:0;top:50%;height:clamp(52px,calc(90px * var(--k)),90px);margin-top:calc(clamp(52px,calc(90px * var(--k)),90px) / -2);z-index:22;
  display:none;align-items:center;gap:14px;padding:0 20px;border-radius:14px;background:rgba(5,10,14,.96);border:2px solid rgba(255,60,60,.7);
  text-decoration:none;color:#fff;font-family:var(--font)}
#subCard.show{display:flex;animation:subIn 10s ease forwards}
#subCard .sbtn{display:flex;align-items:center;gap:10px;background:#ff0000;color:#fff;font-size:clamp(16px,calc(38px * var(--k)),38px);font-weight:900;letter-spacing:1px;padding:.26em .58em;border-radius:10px;line-height:1}
#subCard .stxt{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap}
#subCard .stxt b{font-size:clamp(16px,calc(40px * var(--k)),40px);font-weight:900}
#subCard .stxt span{font-size:clamp(11px,calc(24px * var(--k)),24px);font-weight:800;color:var(--mute);letter-spacing:1px}
#subCard .sbell{flex:0 0 auto;transform-origin:50% 8%;animation:bellRing 1.6s ease-in-out .8s 5}
@keyframes subIn{0%{opacity:0;transform:translateX(140px) scale(.9)}5%{opacity:1;transform:translateX(-8px) scale(1.02)}8%{transform:translateX(0) scale(1)}
  94%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(140px)}}
@keyframes bellRing{0%,100%{transform:rotate(0)}10%{transform:rotate(18deg)}20%{transform:rotate(-16deg)}30%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}50%{transform:rotate(0)}}

/* ---- controls ---- */
#controls{position:relative;z-index:40;flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;font-size:14px}
#controls button,#ytBtn{font:inherit;font-weight:800;color:#fff;cursor:pointer;border-radius:.6em;padding:.45em .8em;min-height:40px;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.24);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
#controls button:hover,#ytBtn:hover{background:rgba(255,255,255,.15)}
#sndBtn{background:rgba(34,240,138,.14)!important;border-color:var(--ng)!important;animation:sndPulse 2s infinite}
#sndBtn.on{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.24)!important;animation:none}
@keyframes sndPulse{0%{box-shadow:0 0 0 0 rgba(34,240,138,.5)}70%{box-shadow:0 0 0 8px rgba(34,240,138,0)}100%{box-shadow:0 0 0 0 rgba(34,240,138,0)}}
#musicBtn.on{background:rgba(34,240,138,.16)!important;border-color:var(--ng)!important}
#ytBtn{background:#e0182d;border-color:#ff5a6a}
#ytBtn:hover{background:#ff2d45}
#ytBtn .live{width:.6em;height:.6em;border-radius:50%;background:#fff;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
#volWrap{display:flex;align-items:center;gap:.35em;color:var(--mute);font-weight:800;font-size:13px}
#volume{width:110px;height:40px;accent-color:var(--ng);cursor:pointer}
#trackName{color:var(--mute);font-weight:700;font-size:13px;max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#trackName:empty{display:none}
#controls button:focus-visible,#ytBtn:focus-visible,#volume:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
body.nofs #fsBtn{display:none}
body.isfs.idle{cursor:none}

#foot{position:relative;z-index:5;flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.15em .5em;
  font-size:12px;color:var(--mute);font-weight:600;text-align:center;line-height:1.35}
#foot a{color:#d5deef;font-weight:800;text-decoration:none}
#foot a:hover{color:var(--accent)}
#noscript{position:fixed;inset:auto 0 40% 0;text-align:center;font:700 22px sans-serif;color:#fff}

/* ---- phones and narrow windows ---- */
body.narrow #app{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:7px;overflow-y:auto}
body.narrow #topRow{height:42px}
body.narrow #homeBtn{height:32px;padding:0 9px 0 8px;font-size:12px}
body.narrow #coins{font-size:13px}
body.narrow #coins .cpage{gap:6px}
body.narrow #coins .ci{padding:3px 6px;border-radius:10px}
body.narrow #card{padding:12px 12px 10px;border-radius:18px;flex:1 0 auto;min-height:420px}
body.narrow #head{flex-direction:column;align-items:stretch;gap:0}
body.narrow #pair{font-size:14px;line-height:1.5}
body.narrow #price{margin-top:2px}
body.narrow #crew{align-self:center;margin-top:calc(var(--bf,16px) * 1.9 + 14px)}
body.narrow #hl{gap:7px;margin-top:10px}
body.narrow #hl .box{padding:9px 0 9px 10px;gap:7px;border-radius:12px}
body.narrow #hl .k{font-size:12px}
body.narrow #hl .v{font-size:clamp(13px,4.3vw,18px)}
body.narrow #chartWrap{margin-top:10px;min-height:150px}
body.narrow #banner .band,body.narrow #flash .ftxt{white-space:normal;text-align:center}
body.narrow #banner .band{border-width:3px}
body.narrow #flash .fband{border-width:3px}
body.narrow #stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
body.narrow .stat{flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;border-radius:10px;font-size:11px}
body.narrow .stat .v{font-size:15px}
body.narrow .stat.creditStat{grid-column:1/-1;align-items:center;padding:5px 8px}
body.narrow #subCard{left:0;right:0;justify-content:center;gap:10px;padding:0 10px}
body.narrow #controls{justify-content:center;gap:7px}
body.narrow #controls button,body.narrow #ytBtn{min-height:44px}
body.narrow #ytBtn,body.narrow #sndBtn{flex:1 1 100%;justify-content:center}
body.narrow #volWrap{display:none}            /* phones: use the hardware volume keys */
body.narrow #ticksBtn,body.narrow #musicBtn,body.narrow #fsBtn{flex:1 1 0;justify-content:center;padding-left:.4em;padding-right:.4em}
body.narrow #trackName{flex:1 1 100%;text-align:center;max-width:none}
body.narrow #foot{flex-direction:column;gap:2px;font-size:11px}
body.narrow #foot .sep{display:none}

/* short landscape screens (phones turned sideways) */
body.short #foot{display:none}
body.short #app{gap:6px}

@media (prefers-reduced-motion:reduce){
  #sndBtn,#ytBtn .live,#subCard .sbell{animation:none!important}
  #crew{--ma:none!important;--ja:none!important}
}