:where(#twwin, #tw-hud, #tw-banner, #tw-say, #tw-result, #tw-fail) { --dg: #e8c870; --dg-lo: #5a4420; --dga: #f0d080; }
[data-tw="1"] { --dga: #a8c87a; } [data-tw="2"] { --dga: #7fd0c8; } [data-tw="3"] { --dga: #e0b060; } [data-tw="4"] { --dga: #ff9a5a; } [data-tw="5"] { --dga: #c0a0ff; }
[data-tw="6"] { --dga: #a8dcff; } [data-tw="7"] { --dga: #c890ff; } [data-tw="8"] { --dga: #ffe070; } [data-tw="9"] { --dga: #b080ff; } [data-tw="10"] { --dga: #ffd890; }
#tw-hud { position: absolute; z-index: 3; left: 50%; top: calc(1.6rem + var(--sat)); transform: translateX(-50%); width: max-content; max-width: 96vw; }
#tw-hud.hidden, #tw-banner.hidden, #tw-say.hidden, #tw-result.hidden, #tw-fail.hidden { display: none; }
body.patch-pending #tw-hud { top: calc(var(--patch-h, 0px) + 1rem + var(--sat)); }
#tw-hud .vy-isle { color: #ffe9e0; }
#tw-hud[data-st="done"] .vy-isle { color: var(--teal); }
#tw-hud .vy-s small { font: 600 max(9px, 1.05rem) var(--sans); color: var(--ink3); }
#tw-hud .vy-s.ph { color: #7fe0ff; } #tw-hud .vy-s.ph b { color: #fff; }
#tw-hud .vy-s.bk { color: #ff9d8a; } #tw-hud .vy-s.bk b { color: #ffd0c4; }
#tw-hud.low .vy-s.time, #tw-hud.low .vy-s.time b { color: #ff6a52; }
#hud #tw-hud .vy-leave { border-left-color: rgba(255,138,106,.3); }
#tw-banner { position: absolute; z-index: 3; left: 50%; top: calc(13rem + var(--sat)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: max-content; max-width: 92vw; pointer-events: none; text-align: center; }
#tw-banner.show { animation: vy-banner var(--ms, 3600ms) ease-out both; }
#tw-banner small { font: 600 max(11px, 1.5rem)/1.3 var(--sans); letter-spacing: .25em; color: #ffd8cc; text-shadow: 0 1px 2px #000; }
#tw-banner small u { text-decoration: none; opacity: .6; }
#tw-banner .vb-name { padding: 0 6rem; font: 600 max(26px, 5.2rem)/1.2 var(--serif); letter-spacing: .08em; color: #fff0ea; text-shadow: 0 .3rem 0 #000, 0 0 2.4rem rgba(255,110,80,.75), 0 0 .6rem #000;
background: linear-gradient(90deg, transparent, rgba(18,4,2,.65) 22%, rgba(18,4,2,.65) 78%, transparent); border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(255,138,106,.75), transparent) 1; }
#tw-banner .vb-goal { font-size: max(12px, 1.7rem); letter-spacing: .04em; font-weight: 400; color: #fff; } #tw-banner .vb-goal b { color: #ff9d8a; font-weight: 600; }
#tw-say { position: absolute; z-index: 4; left: 50%; top: calc(17rem + var(--sat)); transform: translateX(-50%); max-width: min(90vw, 90rem); padding: .6rem 4rem; pointer-events: none; text-align: center;
font: 700 max(15px, 2.4rem)/1.35 var(--serif); letter-spacing: .03em; color: #ffe2d8; text-shadow: 0 .2rem 0 #000, 0 0 1.4rem rgba(255,60,30,.8);
background: linear-gradient(90deg, transparent, rgba(30,4,2,.75) 18%, rgba(30,4,2,.75) 82%, transparent); }
#tw-say.show { animation: tw-say 3.4s ease-out both; }
#tw-result { position: absolute; z-index: 5; left: 50%; top: calc(13.4rem + var(--sat)); transform: translateX(-50%); box-sizing: border-box; width: 50rem; max-width: 94vw; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.2rem 2.4rem 2rem; text-align: center; pointer-events: auto;
border: 0 solid transparent; border-image: url(../assets/ui/dark/panel.png) 64 / 3.2rem; background: #0e1116 url(../assets/ui/dark/panel_fill.png) 0 0 / 25.6rem 25.6rem; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.6), 0 0 4rem rgba(255,110,80,.22); animation: vy-pop .35s ease-out both; }
#tw-result h3 { margin: 0; font: 600 max(20px, 3.2rem)/1.2 var(--serif); letter-spacing: .08em; color: #fff0ea; text-shadow: 0 .2rem 0 #000, 0 0 1.8rem rgba(255,110,80,.6); }
#tw-result p { margin: 0; font-size: max(12px, 1.4rem); line-height: 1.5; color: var(--ink2); }
#tw-result p b { color: var(--ink); } #tw-result p u { text-decoration: none; color: var(--ink3); }
#tw-result .vr-isle b:first-child { color: #ff9d8a !important; }
#hud #tw-result button { min-height: 3.8rem; min-width: 11rem; padding: 0 1.6rem; border: 1rem solid transparent; border-image: url(../assets/ui/dark/btn.png) 20 fill / 1rem; font: 700 max(12px, 1.35rem)/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
#tw-fail { position: fixed; z-index: 9100; left: 50%; top: 30%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; width: max-content; max-width: 92vw; padding: 1.4rem 7rem 1.6rem; text-align: center; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(14,2,2,.92) 14%, rgba(14,2,2,.92) 86%, transparent); border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(224,68,58,.8), transparent) 1; transition: opacity .45s; animation: vy-pop .35s ease-out both; }
#tw-fail.out { opacity: 0; }
#tw-fail b { font: 700 max(24px, 4.4rem)/1.2 var(--serif); letter-spacing: .06em; color: #e0443a; text-shadow: 0 .3rem 1.4rem #000; }
#tw-fail span { font: 600 max(12px, 1.6rem)/1.5 var(--sans); color: var(--ink); text-shadow: 0 1px 2px #000; }
#tw-fail small { font: 400 max(11px, 1.3rem)/1.5 var(--sans); color: var(--ink2); text-shadow: 0 1px 2px #000; }
#dead em.tw-dead { display: none; font-style: normal; }
body.in-tower #dead b { visibility: visible; }
body.in-tower #dead em.tw-dead { display: block; padding: .3rem 1.8rem; font: 600 max(13px, 1.7rem)/1.5 var(--sans); color: #ffd8cc; text-shadow: 0 1px 3px #000, 0 0 .8rem #000; border: .8rem solid transparent; border-image: url(../assets/ui/dark/glass.png) 16 fill / .8rem; }
body.touch #tw-hud { top: calc(.8rem + var(--sat)); left: calc((100vw + var(--sal) - var(--sar)) / 2 + 1.5rem); max-width: 46rem; }
body.touch #tw-banner { top: calc(6.2rem + var(--sat)); left: calc((100vw + var(--sal) - var(--sar)) / 2 + 1.5rem); gap: .2rem; }
body.touch #tw-banner small { font-size: max(10px, 1.15rem); letter-spacing: .12em; }
body.touch #tw-banner .vb-name { font-size: max(20px, 3rem); padding: 0 4rem; }
body.touch #tw-say { top: calc(11.5rem + var(--sat)); left: calc((100vw + var(--sal) - var(--sar)) / 2 + 1.5rem); font-size: max(13px, 1.7rem); padding: .4rem 2.4rem; }
body.touch #tw-result { top: calc(6rem + var(--sat)); width: 48rem; padding: 1.2rem 2rem; gap: .2rem; }
body.touch #tw-result h3 { font-size: max(16px, 2.2rem); }
body.touch #tw-result p { font-size: max(11px, 1.2rem); line-height: 1.4; }
body.touch #tw-fail { top: 24%; padding: 1rem 3rem 1.2rem; } body.touch #tw-fail b { font-size: max(20px, 3rem); }
#twwin { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 124rem; max-width: calc(100vw - 1.6rem); max-height: calc(100vh - 1.6rem); z-index: 8; display: flex; flex-direction: column; }
#twwin.hidden { display: none; }
#twwin header .dg-sub { margin-left: 1rem; font: 400 max(10px, 1.2rem) var(--sans); letter-spacing: .08em; color: var(--dg); order: 1; }
#twwin .tw-body { flex: 1; min-height: 0; display: flex; flex-direction: row; gap: 1.6rem; }
#twwin .tw-left { flex: 0 0 52rem; overflow-y: auto; overscroll-behavior: contain; }
.tw-me { flex: none; display: flex; gap: .4rem 2.2rem; padding: .5rem 1.4rem; background: linear-gradient(90deg, rgba(232,200,112,.14), rgba(232,200,112,.03)); border: 1px solid rgba(232,200,112,.35); }
.tw-me > span { display: flex; flex-direction: column; line-height: 1.25; }
.tw-me i { font: 400 max(9px, 1.05rem) var(--sans); font-style: normal; color: var(--ink3); white-space: nowrap; }
.tw-me b { font: 600 max(14px, 2rem) var(--serif); color: #fff3cf; white-space: nowrap; font-variant-numeric: tabular-nums; } .tw-me b small { font: 400 max(10px, 1.15rem) var(--sans); color: var(--ink3); }
.tw-me b.tw-reset { font-size: max(12px, 1.5rem); }
.tw-skip { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; padding: .6rem 1rem; background: linear-gradient(90deg, rgba(127,224,196,.13), rgba(127,224,196,.02)); border: 1px solid rgba(127,224,196,.42); }
.tw-skip > span { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.tw-skip > span > b { font: 600 max(12px, 1.4rem) var(--serif); color: #dff8ef; } .tw-skip u { text-decoration: none; color: var(--ink3); } .tw-skip .tw-nw { font-style: normal; white-space: nowrap; }
.tw-skip small { font: 400 max(10px, 1.1rem)/1.4 var(--sans); color: var(--ink2); } .tw-skip small b { color: #fff3cf; font-variant-numeric: tabular-nums; } .tw-skip small .bad { color: #ff9d8a; }
#twwin .tw-skipgo { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 24rem; min-height: 4rem; padding: 0 1.4rem; font-size: max(12px, 1.4rem); }
#twwin .tw-skipgo svg { width: 2rem; height: 2rem; flex: none; }
#twwin .tw-skipgo.armed { animation: tw-pulse 1.2s ease-in-out infinite; }
.tw-skip.done { background: linear-gradient(90deg, rgba(232,200,112,.2), rgba(232,200,112,.04)); border-color: rgba(232,200,112,.6); }
.tw-skip.done > span > b { color: #fff3cf; }
#twwin .tw-skip.done .ghost { flex: none; min-width: 10rem; min-height: 3.4rem; }
#twwin .tw-skipgo.armed { box-shadow: 0 0 0 2px #7fe0c4, 0 0 1.4rem rgba(127,224,196,.55); }
.tw-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .3rem 0 0; font: 600 max(12px, 1.4rem) var(--serif); color: var(--dg); }
.tw-h small { font: 400 max(9px, 1.05rem)/1.35 var(--sans); color: var(--ink3); text-align: right; }
.tw-starts { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.tw-start { position: relative; min-height: 3.1rem; padding: 0; display: flex; align-items: center; justify-content: center; border: 0 solid transparent; border-image: url(../assets/ui/dark/btn.png) 20 fill / .8rem; color: var(--ink); cursor: pointer; }
.tw-start b { font: 700 max(12px, 1.5rem) var(--serif); }
.tw-start.sel { border-image-source: url(../assets/ui/dark/btn_primary.png); color: #1a1206; box-shadow: 0 0 0 1px var(--dga); }
.tw-start.locked { opacity: .45; cursor: default; } .tw-start.locked svg { position: absolute; right: .3rem; top: .3rem; width: 1.2rem; height: 1.2rem; color: var(--ink3); }
.tw-top { background: radial-gradient(ellipse at 15% 50%, color-mix(in srgb, var(--dga) 22%, transparent), transparent 70%); }
.tw-rules { padding-top: .2rem; } .tw-rules li { color: var(--ink2); }
#twwin .tw-join { flex: none; min-width: 11rem; }
#twwin footer { margin-top: auto; display: flex; align-items: center; gap: 1rem; }
#twwin footer .dg-note { flex: 1; text-align: left; font-size: max(10px, 1.1rem); line-height: 1.4; color: var(--ink3); }
#twwin footer .dg-note .bad, #twwin footer .dg-note .bad b { color: #ff8f80; }
#twwin .tw-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-width: 22rem; min-height: 4.6rem; font-size: max(13px, 1.6rem); }
#twwin .tw-go svg, .tw-up svg, .tw-rup svg { width: 2.4rem; height: 2.4rem; flex: none; }
.tw-tabs { flex: none; display: flex; gap: .4rem; }
.tw-bands { flex: 0 0 auto; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .4rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.win .row.tw-band { position: relative; justify-content: flex-start; gap: .8rem; min-height: 5.6rem; padding: .2rem .8rem .2rem .3rem; cursor: pointer; }
.win .row.tw-band::before { content: ''; position: absolute; left: .4rem; top: .5rem; bottom: .5rem; width: .3rem; background: var(--dga); }
.win .row.tw-band.sel { border-image-source: url(../assets/ui/dark/row_on.png); box-shadow: inset 0 0 0 1px var(--dga); }
.tw-band .dg-face { width: 4.6rem; height: 4.6rem; margin-left: .5rem; }
.tw-band .dg-rt > b { color: var(--dga); font-size: max(12px, 1.4rem); }
.tw-bosses { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .6rem .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.tw-bosses h5 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; font: 600 max(12px, 1.45rem) var(--serif); color: var(--dga); }
.tw-bosses h5 small { font: 400 max(9px, 1.05rem) var(--sans); color: var(--ink3); }
.tw-bgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.tw-boss { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem .2rem .4rem; text-align: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.tw-boss.big { background: color-mix(in srgb, var(--dga) 12%, transparent); border-color: color-mix(in srgb, var(--dga) 50%, transparent); }
.tw-boss .dg-face { width: 6.4rem; height: 6.4rem; }
.tw-boss b { position: absolute; left: .4rem; top: .2rem; font: 700 max(11px, 1.3rem)/1 var(--serif); color: #fff; text-shadow: 0 1px 0 #000, 0 0 .4rem #000; }
.tw-boss small { font: 600 max(9px, 1.05rem)/1.25 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.tw-boss em { font: 400 max(8px, .95rem)/1.2 var(--sans); font-style: normal; color: var(--ink3); }
.tw-boards { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tw-boards > div { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .6rem .8rem; border: 0 solid transparent; border-image: url(../assets/ui/dark/inset.png) 16 fill / .8rem; }
.tw-boards h5 { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin: 0 0 .4rem; font: 600 max(12px, 1.45rem) var(--serif); color: var(--dg); }
.tw-boards h5 small { font: 400 max(9px, 1rem) var(--sans); color: var(--ink3); }
.tw-boards ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.tw-boards li { display: flex; align-items: center; gap: .8rem; padding: .3rem .6rem; font-size: max(11px, 1.3rem); background: rgba(255,255,255,.03); }
.tw-boards li.me { background: rgba(232,200,112,.14); box-shadow: inset 0 0 0 1px rgba(232,200,112,.45); }
.tw-boards li u { flex: none; width: 2.4rem; text-decoration: none; font: 700 max(11px, 1.3rem) var(--serif); color: var(--dg); text-align: right; }
.tw-boards li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.tw-boards li em { flex: none; font-style: normal; color: #fff3cf; font-variant-numeric: tabular-nums; }
.tw-boards li.none { color: var(--ink3); }
.tw-num small:first-child { font: 600 max(8px, .9rem)/1 var(--sans); letter-spacing: .12em; color: var(--ink3); }
#tw-hud .tw-soon { color: var(--ink3); }
#tw-hud .tw-near { color: #ffb08a; animation: tw-blink 1s ease-in-out infinite; }
#tw-hud .vy-s.wave { color: #d9cfc0; gap: .3rem; } #tw-hud .vy-s.wave > span { font: 600 max(9px, 1.05rem) var(--sans); color: var(--ink3); }
#tw-hud .vy-s.hold { color: #7fe0c4; font: 600 max(10px, 1.15rem) var(--sans); animation: tw-blink 1.6s ease-in-out infinite; }
#tw-banner .tw-hint { color: #7fe0c4; }
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
#hud #tw-hud .tw-up { flex: none; display: inline-flex; align-items: center; gap: .6rem; margin: .4rem .2rem .4rem .6rem; padding: 0 1.4rem; min-height: 3.6rem; border: .8rem solid transparent; border-image: url(../assets/ui/dark/btn_primary.png) 20 fill / .8rem; color: #1a1206; font: 700 max(12px, 1.35rem)/1 var(--sans); cursor: pointer; animation: tw-pulse 1.6s ease-in-out infinite; }
#hud #tw-hud .tw-up.hidden { display: none; }
@keyframes tw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,208,128,.0); } 50% { box-shadow: 0 0 1.4rem .2rem rgba(240,208,128,.55); } }
#hud #tw-result .tw-rup { display: inline-flex; align-items: center; gap: .6rem; border-image-source: url(../assets/ui/dark/btn_primary.png); color: #1a1206; }
@keyframes tw-say { 0% { opacity: 0; transform: translateX(-50%) scale(1.25); } 8% { opacity: 1; transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
body.touch #twwin { left: calc(.8rem + var(--sal)); right: calc(.8rem + var(--sar)); top: calc(.8rem + var(--sat)); bottom: calc(.8rem + var(--sab)); width: auto; height: auto; max-width: none; max-height: none; transform: none; }
body.touch #twwin .tw-left { flex: 0 0 40rem; }
body.touch .tw-rules { display: none; }
body.touch .tw-start { min-height: 2.8rem; } body.touch .tw-start b { font-size: max(10px, 1.2rem); }
body.touch .tw-me b { font-size: max(12px, 1.5rem); }
body.touch .tw-skip { flex-wrap: nowrap; padding: .3rem .6rem; gap: .6rem; } body.touch .tw-skip > span { flex: 1 1 auto; } body.touch .tw-skip:not(.done) small:nth-of-type(1) { display: none; }
body.touch #twwin .tw-skipgo { min-width: 13rem; min-height: 3.4rem; padding: 0 .8rem; font-size: max(10px, 1.1rem); }
body.touch #tw-hud .vy-s.hold { font-size: max(9px, 1rem); }
body.touch .tw-bands { max-height: 15rem; grid-template-columns: 1fr; }
body.touch .win .row.tw-band { min-height: 4.4rem; } body.touch .tw-band .dg-face { width: 3.6rem; height: 3.6rem; }
body.touch .tw-bgrid { grid-template-columns: repeat(5, 1fr); gap: .3rem; } body.touch .tw-boss .dg-face { width: 4.6rem; height: 4.6rem; } body.touch .tw-boss small, body.touch .tw-boss em { display: none; }
body.touch #twwin .tw-go { min-width: 15rem; min-height: 4.2rem; }
body.touch #tw-hud { transform: translateX(-50%) scale(.8); transform-origin: 50% 0; }
body.touch #tw-banner { top: calc(50% + 2.4rem); }
body.touch #tw-banner small { font-size: max(8px, .9rem); letter-spacing: .06em; }
body.touch #tw-banner .vb-name { font-size: max(14px, 2rem); padding: 0 2.4rem; letter-spacing: .04em; }
body.touch #tw-banner .vb-goal { font-size: max(9px, 1rem); letter-spacing: 0; }