/* HOLESHOT · layar judul di atas adegan senja: wordmark krom miring, menu teks besar ala game (kursor = 2 bohlam staging),
   kartu teknis di kanan, panel gelap hangat. Aksen: merah balap + amber lampu tree. */
.tt {
  --cream: #fff3e6; --cream-2: rgba(255, 236, 216, 0.72); --cream-3: rgba(255, 228, 206, 0.5);
  --glass: rgba(18, 12, 14, 0.66); --glass-2: rgba(22, 15, 17, 0.9); --rim: rgba(255, 214, 180, 0.16);
  --chrome: linear-gradient(180deg, #ffffff 0%, #f1f3f6 30%, #b9c0c9 47%, #4b535e 50%, #8d96a2 58%, #e7ebf0 82%, #ffffff 100%);
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; user-select: none; -webkit-user-select: none; color: var(--cream);
}
.tt button, .tt a, .tt-panel, .tt-card { pointer-events: auto; }
.tt kbd { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border: 1px solid rgba(255, 230, 205, 0.35); border-bottom-width: 2px; border-radius: 3px; background: rgba(20, 10, 12, 0.55); font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.06em; color: var(--cream); }

/* bayangan kiri & bawah supaya teks terbaca di atas langit terang */
.tt-shade { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s; background: linear-gradient(90deg, rgba(14, 6, 8, 0.72) 0%, rgba(14, 6, 8, 0.42) 28%, transparent 52%), linear-gradient(0deg, rgba(14, 6, 8, 0.55), transparent 26%); }
.tt[data-phase="menu"] .tt-shade { opacity: 1; }
.tt[data-mode="tree"] .tt-shade, .tt[data-mode="garage"] .tt-shade { opacity: 0.55; }

/* bilah sinema + kilat */
.tt-bars i { position: absolute; left: 0; right: 0; height: 11vh; background: #050304; transition: transform 0.9s cubic-bezier(.7, 0, .2, 1); }
.tt-bars i:first-child { top: 0; } .tt-bars i:last-child { bottom: 0; }
.tt.slammed .tt-bars i:first-child { transform: translateY(-100%); } .tt.slammed .tt-bars i:last-child { transform: translateY(100%); }
.tt.quick .tt-bars { display: none; }
.tt-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(255, 244, 228, 0.85), rgba(255, 170, 110, 0.25) 60%, transparent); opacity: 0; }
.tt.slam-big .tt-flash { animation: ttFlash 0.65s ease-out 0.1s both; }
@keyframes ttFlash { 0% { opacity: 0; } 10% { opacity: 0.7; } 100% { opacity: 0; } }
.tt-loc { position: absolute; left: clamp(16px, 4vw, 56px); bottom: calc(11vh + 22px); display: grid; gap: 6px; padding: 10px 14px; border-left: 2px solid var(--red); background: rgba(14, 8, 10, 0.6); opacity: 0; transition: opacity 0.25s; }
.tt.on[data-phase="intro"] .tt-loc { transition: opacity 0.8s 1.2s; }
.tt.on[data-phase="intro"] .tt-loc { opacity: 1; }
.tt-loc b { font: 700 13px/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.22em; text-transform: uppercase; }
.tt-loc span { font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-2); }
.tt-skip { position: absolute; right: clamp(16px, 4vw, 56px); bottom: calc(11vh + 22px); display: flex; align-items: center; gap: 8px; padding: 8px 4px; border: 0; background: none; font: 600 11px/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-2); opacity: 0; transition: opacity 0.25s; }
.tt.on[data-phase="intro"] .tt-skip { opacity: 1; transition: opacity 0.6s 0.8s; }

/* ---------------------------------------------------------------- wordmark krom miring */
.tt-logo { position: absolute; left: 0; right: 0; top: 14vh; text-align: center; transition: top 0.7s cubic-bezier(.2, .8, .2, 1), left 0.7s cubic-bezier(.2, .8, .2, 1), opacity 0.4s; }
.tt-shake { display: inline-block; text-align: left; }
.tt-word {
  position: relative; margin: 0; line-height: 0; width: clamp(300px, 56vw, 860px);
  filter: drop-shadow(0 14px 26px rgba(10, 4, 6, 0.55)); opacity: 0; transition: width 0.7s cubic-bezier(.2, .8, .2, 1);
}
.tt-word img { width: 100%; height: auto; display: block; }
/* kilau menyapu: lapisan putih dimasker bentuk logo */
.tt-word::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 49%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: url(../brand/logo-s.webp) center / 100% 100% no-repeat; mask: url(../brand/logo-s.webp) center / 100% 100% no-repeat; mix-blend-mode: screen; }
.tt.slammed .tt-word { opacity: 1; } .tt.slammed .tt-word::after { animation: ttSheen 1.4s cubic-bezier(.4, 0, .2, 1) 0.5s both; }
@keyframes ttSheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.tt.slam-big .tt-shake { animation: ttSlam 0.5s cubic-bezier(.55, 0, .9, .35) both, ttShake 0.45s linear 0.15s; }
.tt.quick .tt-shake { animation: ttSlamLite 0.35s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes ttSlam { 0% { transform: scale(3); opacity: 0; } 30% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.2, 1.6, .4, 1); } 45% { transform: scale(0.965); } 100% { transform: none; opacity: 1; } }
@keyframes ttSlamLite { 0% { transform: scale(1.08); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ttShake { 0% { translate: 0 0; } 12% { translate: -10px 7px; } 24% { translate: 9px -5px; } 36% { translate: -6px -4px; } 50% { translate: 5px 4px; } 64% { translate: -3px 2px; } 80% { translate: 2px -1px; } 100% { translate: 0 0; } }
.tt-tag { display: flex; align-items: center; gap: 14px; margin: 0.8em 0 0 0.3em; font: 700 clamp(11px, 1.2vw, 15px)/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.42em; text-transform: uppercase; color: var(--cream); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); opacity: 0; }
.tt-tag i { width: 34px; height: 3px; background: var(--red); box-shadow: 0 0 10px rgba(224, 55, 42, 0.7); transform: skewX(-30deg); }
.tt.slam-big .tt-tag { animation: ttTag 0.8s ease 0.55s both; }
.tt.quick .tt-tag, .tt[data-phase="menu"] .tt-tag { opacity: 1; }
@keyframes ttTag { from { opacity: 0; letter-spacing: 0.9em; } to { opacity: 1; letter-spacing: 0.42em; } }
.tt[data-phase="menu"] .tt-logo { top: clamp(22px, 5vh, 52px); left: clamp(28px, 5vw, 92px); text-align: left; }
.tt[data-phase="menu"] .tt-word { width: clamp(220px, 25vw, 400px); }
.tt[data-phase="menu"] .tt-tag { letter-spacing: 0.32em; font-size: 12px; }
.tt[data-mode="tree"] .tt-logo, .tt[data-mode="garage"] .tt-logo { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- pil atas kanan */
.tt-top { position: absolute; top: clamp(16px, 3.4vh, 32px); right: clamp(16px, 3.5vw, 56px); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.5s 0.4s; }
.tt[data-phase="menu"][data-mode="menu"] .tt-top { opacity: 1; }
.tt-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border-radius: 99px; background: var(--glass); border: 1px solid var(--rim); font: 600 11px/1 var(--f-mono); letter-spacing: 0.12em; color: var(--cream-2); backdrop-filter: blur(6px); white-space: nowrap; }
.tt-pill b { color: var(--cream); } .tt-pill em { font-style: normal; color: var(--cream); }
.tt-pill small { font: 600 9px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); }
.tt-pill > i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.tt-clock > i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.tt-feed > i { background: var(--cream-3); box-shadow: none; }
.tt-feed[data-dir="up"] > i { background: var(--up); box-shadow: 0 0 8px var(--up); } .tt-feed[data-dir="dn"] > i { background: var(--down); box-shadow: 0 0 8px var(--down); }
.tt-feed[data-dir="up"] em { color: var(--up); } .tt-feed[data-dir="dn"] em { color: var(--down); }
.tt-class { cursor: pointer; color: var(--amber); font-weight: 700; display: none; }
.tt-snd { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 11px; border-radius: 99px; border: 1px solid var(--rim); background: var(--glass); font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.16em; color: var(--cream); }
.tt-snd svg { width: 15px; height: 15px; } .tt-snd.off .w { display: none; } .tt-snd.off { color: var(--cream-3); }

/* ---------------------------------------------------------------- menu kiri: teks besar, kursor bohlam staging */
.tt-menu { position: absolute; left: clamp(28px, 5vw, 92px); top: clamp(170px, 28vh, 270px); width: min(470px, 38vw); display: grid; padding: 6px 0; opacity: 0; transform: translateX(-24px); pointer-events: none; transition: opacity 0.5s 0.15s, transform 0.6s cubic-bezier(.2, .8, .2, 1) 0.15s; }
.tt[data-phase="menu"][data-mode="menu"] .tt-menu { opacity: 1; transform: none; pointer-events: auto; }
.tt-menu::before { content: ''; position: absolute; left: 0; top: 0; bottom: 58px; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 190, 140, 0.45) 12%, rgba(255, 190, 140, 0.45) 88%, transparent); }
.tt-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: clamp(44px, 6.2vh, 54px); padding: 0 12px 0 62px; border: 0; background: none; text-align: left; font: 800 clamp(24px, 3.4vh, 32px)/1 var(--f-head); font-stretch: 75%; letter-spacing: 0.05em; color: var(--cream-3); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); transition: color 0.15s, letter-spacing 0.25s cubic-bezier(.2, .8, .2, 1); }
.tt-lbl { display: inline-block; transform: skewX(-8deg); }
.tt-item.on { color: #fffaf3; letter-spacing: 0.08em; text-shadow: 0 0 1px #fff, 0 0 14px rgba(255, 150, 90, 0.55), 0 2px 8px rgba(0, 0, 0, 0.7); }
.tt-item.soon { color: rgba(255, 228, 206, 0.28); } .tt-item.soon.on { color: rgba(255, 240, 228, 0.6); }
.tt-item em { font: 600 9.5px/1 var(--f-mono); font-style: normal; letter-spacing: 0.2em; padding: 5px 7px 5px 9px; border: 1px solid rgba(255, 178, 30, 0.6); border-radius: 3px; color: var(--amber); text-shadow: none; }
.tt-item.nope { animation: ttNope 0.35s linear; }
@keyframes ttNope { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.tt-hl { position: absolute; left: 0; right: 0; top: 0; height: clamp(44px, 6.2vh, 54px); pointer-events: none; transition: transform 0.22s cubic-bezier(.3, 1.35, .5, 1); background: linear-gradient(90deg, rgba(224, 55, 42, 0.55), rgba(224, 55, 42, 0.18) 55%, transparent 92%); }
.tt-hl::before, .tt-hl::after { content: ''; position: absolute; left: 0; right: 12%; height: 1px; background: linear-gradient(90deg, rgba(255, 170, 140, 0.9), transparent); }
.tt-hl::before { top: 0; } .tt-hl::after { bottom: 0; }
.tt-hl.soon { background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 80%); }
.tt-bulbs { position: absolute; left: 16px; top: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; transform: translateY(-50%); padding: 5px; border-radius: 5px; background: #120b0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.5); }
.tt-bulbs i { width: 10px; height: 10px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px #ffb21e, 0 0 2px #fff inset; }
.tt-hl.soon .tt-bulbs i { background: #3a3236; box-shadow: none; }
.tt.going .tt-bulbs i { animation: ttGreen 0.2s steps(1) 0.46s forwards; }
@keyframes ttGreen { to { background: #6dffb0; box-shadow: 0 0 14px var(--up), 0 0 2px #fff inset; } }
.tt.going .tt-item.on { animation: ttGo 0.25s steps(2) 3; }
@keyframes ttGo { 50% { color: #ffd27a; } }
.tt-desc { min-height: 48px; margin-top: 10px; padding-left: 62px; font: 500 15px/1.4 var(--f-head); color: var(--cream-2); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
.tt-desc.in span { display: inline-block; animation: ttDesc 0.35s ease both; }
@keyframes ttDesc { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- kartu teknis (kanan) — stiker inspeksi */
.tt-card { position: absolute; right: clamp(16px, 3.5vw, 56px); top: clamp(76px, 12vh, 112px); width: 250px; padding: 0 0 12px; border-radius: 6px; background: #f4ecdf; color: #1d1416; box-shadow: 0 18px 40px rgba(10, 4, 4, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2); transform: rotate(2.2deg); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.5s 0.35s, transform 0.25s;
  background-image: repeating-linear-gradient(0deg, transparent 0 23px, rgba(29, 20, 22, 0.06) 23px 24px); }
.tt-card:hover { transform: rotate(0.6deg) translateY(-2px); }
.tt[data-phase="menu"][data-mode="menu"] .tt-card { opacity: 1; pointer-events: auto; }
.tt-card::before { content: ''; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6d38a, #9c6a1d); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); }
.tc-h { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px 10px; border-radius: 6px 6px 0 0; background: #c3261b; color: #fff4ea; }
.tc-h b { font: 900 17px/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.08em; }
.tc-h span { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.14em; opacity: 0.85; }
.tc-cls { display: grid; gap: 3px; padding: 12px 14px 10px; border-bottom: 1.5px solid #1d1416; }
.tc-cls small, .tc-grid dt { font: 600 8.5px/1 var(--f-mono); letter-spacing: 0.18em; color: #6b5b58; }
.tc-cls b { font: 900 25px/1 var(--f-head); font-stretch: 75%; letter-spacing: 0.04em; }
.tc-cls span { font: 500 11px/1.2 var(--f-head); color: #5a4b48; }
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.tc-grid div { padding: 9px 14px 8px; border-bottom: 1px dashed rgba(29, 20, 22, 0.25); }
.tc-grid div:nth-child(odd) { border-right: 1px dashed rgba(29, 20, 22, 0.25); }
.tc-grid dd { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font: 600 15px/1 var(--f-mono); }
.tc-grid dd i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.tc-f { padding: 9px 14px 0; font: 500 9.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #6b5b58; }
.tc-stamp { position: absolute; right: 10px; bottom: 5px; padding: 3px 7px; border: 2px solid #1f8a4c; border-radius: 4px; color: #1f8a4c; font: 900 12px/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.1em; transform: rotate(-11deg); opacity: 0.85; mix-blend-mode: multiply; }

.tt-keys { position: absolute; left: clamp(28px, 5vw, 92px); bottom: clamp(18px, 3.4vh, 32px); display: flex; gap: 18px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-3); opacity: 0; transition: opacity 0.5s 0.6s; }
.tt-keys span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tt[data-phase="menu"][data-mode="menu"] .tt-keys { opacity: 1; }
.tt-free { position: absolute; right: clamp(16px, 3.5vw, 56px); bottom: clamp(18px, 3.4vh, 32px); font: 600 10px/1 var(--f-mono); letter-spacing: 0.3em; color: var(--cream-3); opacity: 0; transition: opacity 0.5s 0.6s; }
.tt[data-phase="menu"][data-mode="menu"] .tt-free { opacity: 1; }
@media (pointer: coarse) { .tt-keys { display: none; } }

/* ---------------------------------------------------------------- mode dalam lobby: tree trainer & garasi */
.tt-mode { position: absolute; inset: 0; pointer-events: auto; animation: ttFade 0.4s ease both; }
@keyframes ttFade { from { opacity: 0; } }
.md-h { position: absolute; left: clamp(16px, 4vw, 56px); right: clamp(16px, 4vw, 56px); top: clamp(16px, 3.4vh, 32px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.md-h h2 { margin: 0; font: 900 clamp(26px, 3.4vw, 44px)/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.04em; transform: skewX(-8deg); text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6); }
.md-back { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; border-radius: 99px; border: 1px solid var(--rim); background: var(--glass); font: 600 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.tr-seg { margin-left: auto; display: flex; padding: 3px; border-radius: 99px; background: var(--glass); border: 1px solid var(--rim); }
.tr-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 99px; background: none; font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.14em; color: var(--cream-2); }
.tr-seg button.on { background: var(--cream); color: #1d1416; }
.tr-read { position: absolute; left: 62%; bottom: clamp(56px, 12vh, 120px); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; min-width: 300px; padding: 16px 28px 18px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--rim); text-align: center; }
.tr-read small { font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-3); }
.tr-read b { font: 600 clamp(46px, 7vw, 76px)/1 var(--f-mono); letter-spacing: -0.02em; color: var(--cream); } .tr-read b.dim { color: var(--cream-3); }
.tr-read span { min-height: 16px; font: 900 16px/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.14em; }
.tr[data-res="perfect"] .tr-read b, .tr[data-res="good"] .tr-read b, .tr[data-res="perfect"] .tr-read span, .tr[data-res="good"] .tr-read span { color: var(--up); }
.tr[data-res="red"] .tr-read b, .tr[data-res="red"] .tr-read span { color: var(--down); }
.tr[data-res="late"] .tr-read span { color: var(--amber); }
.tr-side { position: absolute; right: clamp(16px, 4vw, 56px); top: 50%; transform: translateY(-50%); width: 190px; padding: 14px; border-radius: 8px; background: var(--glass); border: 1px solid var(--rim); }
.tr-best small { font: 600 9px/1 var(--f-mono); letter-spacing: 0.2em; color: var(--cream-3); } .tr-best b { display: block; margin-top: 6px; font: 600 30px/1 var(--f-mono); color: var(--amber); }
.tr-last { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rim); list-style: none; display: grid; gap: 6px; font: 500 13px/1 var(--f-mono); color: var(--cream-2); }
.tr-last li.good { color: var(--up); } .tr-last li.red { color: var(--down); } .tr-last li.nil { color: var(--cream-3); font-size: 11px; }
.tr-hint { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); transform: translateX(-50%); font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); text-align: center; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.gr-panel { position: absolute; left: clamp(16px, 4vw, 56px); bottom: clamp(70px, 12vh, 120px); width: min(360px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 18px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--rim); }
.gr-panel small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.22em; color: var(--cream-3); }
.gr-sw { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.gr-sw button { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 38%), var(--c); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.gr-sw button.on { border-color: var(--cream); transform: scale(1.12); box-shadow: 0 0 0 3px rgba(224, 55, 42, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.35); }
.gr-panel b { font: 900 22px/1 var(--f-head); font-stretch: 75%; letter-spacing: 0.04em; } .gr-panel > span { font: 400 13px/1.4 var(--f-head); color: var(--cream-2); }

/* ---------------------------------------------------------------- panel dalam-game */
.tt-pwrap { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity 0.22s; }
.tt-pwrap.on { opacity: 1; }
.tt-scrim { position: absolute; inset: 0; background: rgba(10, 4, 6, 0.5); backdrop-filter: blur(4px); pointer-events: auto; }
.tt-panel { position: relative; width: min(660px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto 1fr auto; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--rim); color: var(--cream); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); transform: translateY(10px); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
.tt-pwrap.on .tt-panel { transform: none; }
.tt-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; } .tt-panel > * { min-width: 0; }   /* isi panjang tidak boleh melebarkan panel */
.tk-ca code { overflow-wrap: anywhere; }
.tp-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--rim); }
.tp-h h2 { margin: 0; font: 900 24px/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.04em; transform: skewX(-8deg); }
.tp-tag { font: 600 10px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--amber); }
.tp-live { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--up); } .tp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.tp-x { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 5px; background: rgba(255, 255, 255, 0.04); font: 600 12px/1 var(--f-mono); color: var(--cream-2); }
.tp-b { overflow: auto; padding: 16px 18px; }
.tp-how ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font: 400 14px/1.5 var(--f-head); color: var(--cream-2); }
.tp-how li b { color: var(--cream); font-weight: 700; } .tp-how em { font-style: normal; font-weight: 700; } .tp-how em.u { color: var(--up); } .tp-how em.d { color: var(--down); }
.tp-note { margin: 14px 0 0; font: 500 11.5px/1.45 var(--f-mono); letter-spacing: 0.03em; color: var(--amber); }
.tp-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--rim); font: 400 12px/1.3 var(--f-head); color: var(--cream-3); }
.tp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tp-stat { padding: 12px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rim); display: grid; gap: 4px; }
.tp-stat small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); }
.tp-stat b { font: 600 26px/1 var(--f-mono); color: var(--amber); } .tp-stat span { font: 400 12px/1.3 var(--f-head); color: var(--cream-2); }
.tp-last { margin-top: 10px; padding: 12px 14px; border-radius: 6px; border: 1px dashed var(--rim); display: grid; gap: 4px; }
.tp-last small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); } .tp-last b { font: 800 18px/1 var(--f-head); font-stretch: 125%; } .tp-last span { font: 500 12px/1.3 var(--f-mono); color: var(--cream-2); }
.tp-token p { margin: 14px 0 0; font: 400 14px/1.5 var(--f-head); color: var(--cream-2); } .tp-token p:first-child { margin-top: 0; }
.tk-ca { display: grid; gap: 8px; padding: 14px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--rim); }
.tk-ca small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); display: flex; gap: 8px; align-items: center; }
.tk-ca em { font-style: normal; padding: 3px 6px; border: 1px solid var(--amber); border-radius: 3px; color: var(--amber); font-size: 9px; } .tk-ca em.live { border-color: var(--up); color: var(--up); }
.tk-ca code { font: 500 13px/1.4 var(--f-mono); word-break: break-all; color: var(--cream); }
.tk-act { display: flex; gap: 8px; margin-top: 16px; } .tk-act .btn { flex: 1; }
.btn.off { background: transparent; border: 1.5px solid var(--red); color: var(--cream); }
.bd-list { display: grid; gap: 6px; }
.bd-row { display: grid; grid-template-columns: 90px 1fr 120px 70px 80px; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--rim); background: rgba(255, 255, 255, 0.03); color: var(--cream); text-align: left; }
.bd-row:hover { background: rgba(255, 255, 255, 0.07); } .bd-row.on { border-color: rgba(224, 55, 42, 0.8); background: rgba(224, 55, 42, 0.12); }
.bd-row b { display: block; font: 600 15px/1 var(--f-mono); } .bd-t b { font: 900 18px/1 var(--f-head); font-stretch: 125%; }
.bd-row small { display: block; margin-top: 4px; font: 500 10.5px/1 var(--f-mono); color: var(--cream-3); } .bd-row small.up { color: var(--up); } .bd-row small.dn { color: var(--down); }
.bd-sp { width: 100%; height: 32px; } .bd-sp polyline { fill: none; stroke: var(--cream-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .bd-sp.up polyline { stroke: var(--up); } .bd-sp.dn polyline { stroke: var(--down); }
.bd-p, .bd-r { text-align: right; }
.bd-pick { justify-self: end; padding: 6px 9px; border-radius: 4px; border: 1px solid var(--rim); font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.14em; color: var(--cream-2); } .bd-row.on .bd-pick { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------------------------------------------------------------- bar token (index.html): kanan bawah di lobby, tengah di layar muat */
.tokenbar { position: fixed; right: clamp(16px, 3.5vw, 56px); bottom: calc(clamp(18px, 3.4vh, 32px) + 24px); z-index: 55; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.5s 0.6s; }
body[data-mode="boot"] .tokenbar, body[data-mode="title"][data-title="menu"] .tokenbar { opacity: 1; pointer-events: auto; }
.tb-ca { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 9px; border-radius: 8px; border: 1px solid rgba(255, 214, 180, 0.2); background: rgba(18, 12, 14, 0.78); color: #fff3e6; backdrop-filter: blur(6px); }
.tb-ca.live { border-color: var(--up); }
.tb-logo { width: 24px; height: 24px; }
.tb-tk { font: 900 14px/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.06em; color: var(--amber); }
.tb-addr { font: 500 11px/1 var(--f-mono); letter-spacing: 0.06em; color: rgba(255, 236, 216, 0.72); }
.tb-copy { width: 15px; height: 15px; opacity: 0.6; }
.tb-buy { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 8px; background: var(--red); color: #fff; text-decoration: none; font: 800 12px/1 var(--f-head); font-stretch: 125%; letter-spacing: 0.1em; text-transform: uppercase; }
.tb-buy.off { background: rgba(18, 12, 14, 0.78); border: 1.5px solid var(--red); color: #fff3e6; }
.tb-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; border: 1px solid rgba(255, 214, 180, 0.2); background: rgba(18, 12, 14, 0.78); color: #fff3e6; }
.tb-ic svg { width: 16px; height: 16px; }
body[data-mode="boot"] .tokenbar { right: 50%; transform: translateX(50%); bottom: clamp(20px, 5vh, 48px); }
body[data-mode="boot"] .tokenbar { transition: opacity 0.8s 1.4s; }

/* pose OG */
.tt.og .tt-top, .tt.og .tt-menu, .tt.og .tt-keys, .tt.og .tt-bars, .tt.og .tt-loc, .tt.og .tt-skip, .tt.og .tt-card, .tt.og .tt-free, .tt.og .tt-shade { display: none; }
.tt.og .tt-logo { top: 9vh; } .tt.og .tt-tag { opacity: 1; justify-content: center; }

@media (max-width: 1100px) { .tt-card { display: none; } .tt-class { display: inline-flex; } }
@media (max-width: 760px) {
  .tt-shade { background: linear-gradient(0deg, rgba(14, 6, 8, 0.82) 0%, rgba(14, 6, 8, 0.5) 45%, transparent 70%); }
  .tt-logo { top: 12vh; }
  .tt[data-phase="menu"] .tt-logo { top: 18px; left: 16px; }
  .tt[data-phase="menu"] .tt-word { width: min(62vw, 260px); }
  .tt[data-phase="menu"] .tt-tag { font-size: 9px; letter-spacing: 0.2em; gap: 8px; } .tt-tag i { width: 18px; }
  .tt-top { top: auto; bottom: calc(env(safe-area-inset-bottom) + 112px + 7 * 42px + 72px); left: 16px; right: 16px; justify-content: flex-start; flex-wrap: wrap; }
  .tt-clock, .tt-snd span { display: none; } .tt-snd { padding: 0 9px; }
  .tt-menu { left: 16px; right: 16px; top: auto; width: auto; bottom: calc(env(safe-area-inset-bottom) + 112px); }
  .tt-menu::before { bottom: 50px; }
  .tt-item, .tt-hl { height: 42px; } .tt-item { font-size: 23px; padding-left: 56px; }
  .tt-desc { min-height: 40px; padding-left: 56px; font-size: 13px; margin-top: 6px; }
  .tt-free { display: none; }
  .tokenbar { left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 14px); display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
  .tb-ca { grid-column: 1 / -1; min-width: 0; } .tb-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-buy { padding: 0 12px; font-size: 11px; justify-content: center; }
  body[data-mode="boot"] .tokenbar { left: 16px; right: 16px; transform: none; bottom: calc(env(safe-area-inset-bottom) + 18px); }
  .tr-seg { margin-left: 0; } .tr-side { top: auto; bottom: calc(clamp(56px, 12vh, 120px) + 150px); right: 16px; left: 16px; width: auto; transform: none; display: flex; gap: 16px; align-items: center; }
  .tr-last { margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--rim); grid-auto-flow: column; grid-template-rows: repeat(2, auto); }
  .tr-read { min-width: 0; width: calc(100vw - 32px); left: 50%; } .tr-hint { white-space: normal; width: calc(100vw - 32px); }
  .gr-panel { bottom: calc(env(safe-area-inset-bottom) + 20px); }
  .tp-grid { grid-template-columns: 1fr 1fr; } .tp-stat b { font-size: 20px; }
  .tp-h { flex-wrap: wrap; row-gap: 8px; padding: 14px 14px 12px; } .tp-h h2 { font-size: 20px; } .tp-tag { order: 3; flex-basis: 100%; letter-spacing: 0.12em; }
  .tt-panel .tp-b { padding-left: 14px; padding-right: 14px; }
  .tp-f { flex-direction: column; align-items: stretch; text-align: center; }
  .bd-row { grid-template-columns: 70px 1fr 100px; } .bd-r, .bd-pick { display: none; }
}

/* HP miring / layar pendek: semua harus muat dalam ±390 px tinggi */
@media (max-height: 520px) and (orientation: landscape) {
  .tt-logo { top: 10vh; } .tt-word { width: min(46vw, 420px); }
  .tt[data-phase="menu"] .tt-logo { top: 12px; left: 20px; } .tt[data-phase="menu"] .tt-word { width: 170px; }
  .tt[data-phase="menu"] .tt-tag { font-size: 9px; letter-spacing: 0.22em; margin-top: 0.5em; }
  .tt-top { top: 12px; right: 16px; }
  .tt-menu { left: 20px; top: 108px; width: min(360px, 44vw); padding: 0; }
  .tt-menu::before { bottom: 0; }
  .tt-item, .tt-hl { height: 31px; } .tt-item { font-size: 19px; padding-left: 52px; }
  .tt-desc, .tt-keys, .tt-free { display: none; }
  .tokenbar { bottom: 12px; right: 16px; } .tb-ca, .tb-buy, .tb-ic { height: 38px; }
  .tb-addr { white-space: nowrap; }
  .tt-pwrap { padding: 10px; } .tt-panel { max-height: calc(100vh - 20px); }
  .tp-h { padding: 10px 14px; } .tp-h h2 { font-size: 19px; } .tp-b { padding: 10px 14px; } .tp-f { padding-top: 8px; padding-bottom: 8px; }
}

/* panel terbuka → bar token minggir (isi CA sudah ada di panel); jangan menutupi tombol panel */
body:has(.tt-pwrap.on) .tokenbar { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s; }

/* ---------- THE POT: Pot mingguan + papan waktu resmi ---------- */
.tt-pot { cursor: pointer; } .tt-pot > i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.tt-pot b { color: var(--amber); }
.pt { display: grid; gap: 12px; }
.pt-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; }
.pt-amt { display: grid; gap: 6px; align-content: center; padding: 14px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--rim); }
.pt-amt small, .pt-split small, .pt-you small, .pt-bh small, .pt-prev small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); }
.pt-amt b { font: 600 26px/1 var(--f-mono); color: var(--amber); } .pt-amt span { font: 400 12px/1.35 var(--f-head); color: var(--cream-2); }
.pt-split { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pt-split li { display: grid; gap: 6px; align-content: center; padding: 10px; border-radius: 6px; border: 1px solid var(--rim); background: rgba(255, 255, 255, 0.04); }
.pt-split li:first-child { border-color: rgba(255, 178, 30, 0.55); }
.pt-split b { font: 900 20px/1 var(--f-head); font-stretch: 125%; } .pt-split span { font: 500 10.5px/1.2 var(--f-mono); color: var(--cream-2); overflow-wrap: anywhere; }
.pt-you { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(51, 224, 138, 0.4); background: rgba(51, 224, 138, 0.06); }
.pt-you > div { display: grid; gap: 5px; min-width: 0; } .pt-you b { font: 600 13px/1.2 var(--f-mono); color: var(--cream); overflow-wrap: anywhere; }
.pt-out { height: 30px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 5px; background: none; font: 600 10px/1 var(--f-mono); letter-spacing: 0.12em; color: var(--cream-2); text-transform: uppercase; }
.pt-in { padding: 12px 14px; border-radius: 6px; border: 1px dashed var(--rim); }
.pt-in p { margin: 0; font: 400 13px/1.45 var(--f-head); color: var(--cream-2); }
.pt-ws { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .pt-ws .btn { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.pt-ws a.btn { color: var(--cream); } .pt-ws img { width: 18px; height: 18px; border-radius: 4px; } .pt-ws .btn[disabled] { opacity: 0.5; }
.pt-err { margin-top: 8px !important; font: 500 11.5px/1.4 var(--f-mono) !important; color: var(--down) !important; }
.pt-board { padding: 12px 14px; border-radius: 6px; border: 1px solid var(--rim); background: rgba(255, 255, 255, 0.03); }
.pt-bh { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rim); }
.pt-board ol { margin: 0; padding: 0; list-style: none; }
.pt-board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 110px; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255, 230, 205, 0.08); font: 500 13px/1 var(--f-mono); color: var(--cream-2); }
.pt-board li b { font: 900 15px/1 var(--f-head); font-stretch: 125%; color: var(--cream); } .pt-board li:nth-child(-n+3) b { color: var(--amber); }
.pt-board li em { font-style: normal; font-weight: 600; color: var(--cream); } .pt-board li small { text-align: right; font-size: 10.5px; color: var(--cream-3); }
.pt-board li.me { color: var(--up); } .pt-board li.me em { color: var(--up); }
.pt-empty { margin: 10px 0 2px; font: 400 13px/1.45 var(--f-head); color: var(--cream-3); }
.pt-prev { margin-top: 10px; }
.pt-rules { border-radius: 6px; border: 1px solid var(--rim); padding: 0 14px; }
.pt-rules summary { cursor: pointer; padding: 12px 0; font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.pt-rules ol { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 8px; font: 400 13px/1.5 var(--f-head); color: var(--cream-2); } .pt-rules li b { color: var(--cream); }
.pt-addr { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0 14px; border-top: 1px solid var(--rim); font: 500 11px/1.3 var(--f-mono); color: var(--cream-3); }
.pt-addr a { color: var(--cream); }
.tp-tag b { color: var(--cream); font-weight: 600; }
@media (max-width: 760px) {
  .pt-top { grid-template-columns: minmax(0, 1fr); }
  .pt-you { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pt-out { grid-column: 1 / -1; }
  .pt-board li { grid-template-columns: 24px minmax(0, 1fr) auto; } .pt-board li small { display: none; } .pt-bh small + small { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) { .tt-pot small { display: none; } }
.pt-paid { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rim); font: 500 11.5px/1.3 var(--f-mono); color: var(--cream-2); }
.pt-paid small { flex-basis: 100%; font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--up); }
.pt-paid a { color: var(--cream); }

.pt-hold { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 230, 205, 0.1); font: 400 12.5px/1.45 var(--f-head); color: var(--amber); }
.pt-hold.ok { color: var(--up); } .pt-hold.no { color: var(--down); } .pt-hold b { color: var(--cream); } .pt-hold a { color: var(--cream); margin-left: 4px; }
.pt-in p b { color: var(--amber); }
.pt-board li[data-run] { cursor: pointer; } .pt-board li[data-run]:hover em, .pt-board li[data-run]:focus em { text-decoration: underline; }
.pt-board li span i { margin-left: 8px; font-style: normal; font-size: 11px; } .pt-board li span i.ok { color: var(--up); } .pt-board li span i.no { color: var(--cream-3); }
.pt-pv { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rim); font: 500 11.5px/1.35 var(--f-mono); color: var(--cream-2); }
.pt-pv small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--amber); } .pt-pv b { color: var(--amber); font-weight: 600; margin-right: 6px; }
.pt-pv em { font-style: normal; font-size: 10.5px; color: var(--cream-3); }
/* verifikasi lari */
.vf-hit { display: grid; gap: 6px; padding: 16px; border-radius: 6px; text-align: center; border: 1px solid var(--rim); background: rgba(0, 0, 0, 0.35); }
.vf-hit small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); } .vf-hit b { font: 600 38px/1 var(--f-mono); }
.vf-hit span { font: 500 12px/1.3 var(--f-mono); } .vf-hit.ok { border-color: rgba(51, 224, 138, 0.5); } .vf-hit.ok b, .vf-hit.ok span { color: var(--up); } .vf-hit.no span { color: var(--down); }
.vf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.vf-grid div { padding: 10px; border-radius: 6px; border: 1px solid var(--rim); background: rgba(255, 255, 255, 0.03); min-width: 0; }
.vf-grid dt { font: 600 9px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); } .vf-grid dd { margin: 6px 0 0; font: 600 13px/1.3 var(--f-mono); overflow-wrap: anywhere; }
.tp-f .btn { text-decoration: none; }
/* roadmap */
.rm ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rm li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--rim); background: rgba(255, 255, 255, 0.03); }
.rm li em { align-self: start; justify-self: start; padding: 5px 7px; border-radius: 3px; border: 1px solid currentColor; font: 700 9.5px/1 var(--f-mono); font-style: normal; letter-spacing: 0.18em; }
.rm li b { font: 800 16px/1.2 var(--f-head); font-stretch: 112%; } .rm li p { margin: 5px 0 0; font: 400 13px/1.5 var(--f-head); color: var(--cream-2); }
.rm-live em { color: var(--up); } .rm-ready em { color: var(--amber); } .rm-next em { color: var(--cream); } .rm-later em { color: var(--cream-3); }
.rm-live, .rm-ready { border-color: rgba(255, 178, 30, 0.45) !important; }
.rm-lock { margin-top: 12px; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(224, 55, 42, 0.6); background: rgba(224, 55, 42, 0.08); }
.rm-lock small { font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--red); } .rm-lock p { margin: 6px 0 0; font: 400 13px/1.5 var(--f-head); color: var(--cream); }
/* papan lari resmi terbaru di lobby */
.tt-live { position: absolute; right: clamp(16px, 3.5vw, 56px); bottom: 96px; width: 250px; padding: 10px 12px 8px; border-radius: 6px; background: var(--glass); border: 1px solid var(--rim); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.5s 0.5s; }
.tt[data-phase="menu"][data-mode="menu"] .tt-live { opacity: 1; pointer-events: auto; }
.tt-live header { display: flex; align-items: center; gap: 8px; font: 600 9.5px/1 var(--f-mono); letter-spacing: 0.18em; color: var(--cream-3); }
.tt-live header i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); animation: liveDot 1.6s ease-in-out infinite; }
@keyframes liveDot { 50% { opacity: 0.35; } }
.tt-live ol { margin: 8px 0 0; padding: 0; list-style: none; }
.tt-live li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid rgba(255, 230, 205, 0.08); font: 500 11.5px/1 var(--f-mono); color: var(--cream-2); cursor: pointer; }
.tt-live li b { color: var(--cream); font-weight: 600; } .tt-live li small { font-size: 9.5px; color: var(--cream-3); }
.tt-live li:hover b { color: var(--amber); }
@media (max-width: 1100px), (max-height: 760px) { .tt-live { display: none; } }
@media (max-width: 760px) { .vf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rm li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }