/* Hard · 倚天II 2004 — il sito di yt2.com.cn dell'ottobre 2004, rifatto senza tabelle.
 *
 * Tutte le misure sono quelle delle tabelle originali (index.asp e content.asp):
 * colonne a pixel fissi, un corpo di 827 e il menu che galleggia a 838. Dove il 2004
 * usava un'immagine che nessun archivio ha salvato si mette il colore che si vedeva
 * (quasi sempre nero); dove l'immagine aveva una scritta cinese c'e' la versione
 * ripulita in img/t/ con la scritta tradotta sopra (templatetags/yitian.py).
 */

:root {
  --a: #D0BFB5;
  --a-sopra: #EFEFEF;
  --text: #E9E1DC;
  --red1: #BC9A7E;
  --pink: #B82D7C;
  --red2: #FE0000;
  --red3: #FE5500;
  --largered: #FF6131;
  --yellow: #FFA033;
  --scuro: #120000;
  --cornice: #992100;
  --vuoto: #5C4D48;
  /* 宋体 9pt: il browser di allora mostrava i caratteri latini in un tondo con grazie */
  --font: "Times New Roman", SimSun, "Songti SC", serif;
  /* solo titoli, tasti e animazioni: il testo da leggere resta su --font */
  --pennello: "Prime Tokyo", var(--font);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: #000; }
body {
  margin: 0;
  min-width: 1004px;
  background: #000;
  color: var(--text);
  font: 12px/1.2 var(--font);
}
img { display: block; border: 0; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1, h2, figure { margin: 0; }
h1, h2 { font-size: inherit; font-weight: inherit; }
button { font: inherit; }

/* ------------------------------------------------ le classi di style_main.css */
a { color: var(--a); text-decoration: none; }
a:hover { color: var(--a-sopra); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px dotted var(--yellow); outline-offset: 1px; }
.text { color: var(--text); line-height: 120%; }
.white { color: #fff; }
.red1, a.red1 { color: var(--red1); }
.pink { color: var(--pink); }
.red2, a.red2 { color: var(--red2); }
.red3 { color: var(--red3); }
.largered { font-size: 10pt; color: var(--largered); }
.yellow { color: var(--yellow); }
.haor { color: #C1C1C1; }
.boximg {
  background: #FF4F03;
  border: 1px solid #7B1C08;
  color: #fff;
  font-size: 9pt;
  padding: 2px 3px 0;
  cursor: pointer;
}

.yt-salta { position: absolute; left: -9999px; top: 0; z-index: 20000; background: #000; color: #fff; padding: 4px 8px; }
.yt-salta:focus { left: 8px; }
.yt-nascosto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.yt-nascosto a:focus { position: fixed; left: 8px; top: 8px; z-index: 20000; background: #000; padding: 4px 8px; }

/* ------------------------------------------------ fasce a tutta larghezza
 * La pagina del 2004 era larga 1004 e a destra lasciava il nero. Qui sta al centro e le
 * due fasce (testata e menu) proseguono fino ai bordi con i tile ricavati dai loro
 * margini: a sinistra si allinea a destra, a destra parte dal bordo sinistro, cosi' la
 * cucitura cade sempre sul bordo del disegno. */
.yt-c { width: 1004px; margin: 0 auto; position: relative; }
.yt-fascia { position: relative; background: #000; }
.yt-fascia::before, .yt-fascia::after { content: ""; position: absolute; top: 0; bottom: 0; }
.yt-fascia::before { left: 0; right: calc(50% + 502px); background-position: right top; background-repeat: repeat-x; }
.yt-fascia::after { right: 0; background-position: left top; background-repeat: repeat-x; }
.yt-fascia-top::before { background-image: url(../img/fascia_top_sx.jpg); }
.yt-fascia-top::after { left: calc(50% + 502px); background-image: url(../img/fascia_top_dx.jpg); }
.yt-fascia-nav::before { background-image: url(../img/fascia_nav_sx.jpg); }
/* il menu e' 832 + bk_2_right 113 = 945: da li' in poi il tile */
.yt-fascia-nav::after { left: calc(50% + 443px); background-image: url(../img/fascia_nav_dx.jpg); }
.yt-top, .yt-nav { display: flex; z-index: 1; }
.yt-top { height: 207px; }
.yt-nav { height: 70px; }

.yt-scena { display: block; height: auto; }
.yt-top .yt-scena { width: 557px; }
.yt-nav .yt-scena { width: 832px; }

/* ------------------------------------------------ corpo */
.yt-corpo { min-height: 400px; }
.yt-827 { width: 827px; }
.yt-riga { display: flex; }
.yt-principale { align-items: stretch; }
.yt-bordo { flex: 0 0 5px; width: 5px; background: var(--bg) left top repeat-y; }
.yt-bordo-3 { flex-basis: 3px; width: 3px; }
.yt-scuro { background: var(--scuro); }

/* ------------------------------------------------ testate con la scritta tradotta */
.yt-testata {
  display: block; position: relative; flex: none;
  background-repeat: no-repeat; overflow: hidden;
}
.yt-scritta {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  max-width: var(--spazio);
  font-family: var(--pennello);
  line-height: 1;
  letter-spacing: .04em;
  /* il pennello del 2004 aveva un filo scuro attorno: tiene la scritta leggibile sul fregio */
  text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 1px rgba(0, 0, 0, .8);
}
.yt-testata-v .yt-scritta { writing-mode: vertical-rl; text-orientation: mixed; max-width: none; max-height: var(--spazio); }
.yt-testata-semplice .yt-scritta { font-family: var(--font); font-size: 12px !important; letter-spacing: 0; text-shadow: 0 1px 0 #7a1c00; }
a.yt-testata:hover .yt-scritta { color: #fff !important; }

/* ================================================= HOME */

/* colonna sinistra 188 */
.yt-sx { width: 188px; flex: none; background: #000; display: flex; flex-direction: column; }
.yt-pulsanti { margin-top: 4px; padding: 10px 10px 0; display: grid; gap: 6px; }
.yt-pulsante {
  position: relative; display: block; width: 168px; height: 50px;
  background-repeat: no-repeat;
}
.yt-pulsante .yt-scritta {
  left: 74.5px; top: 24px; --spazio: 137px;
  font-family: var(--pennello); font-size: 14.7px; letter-spacing: .06em;
  color: #fc9429; text-shadow: none;
}
.yt-pulsante:hover .yt-scritta { color: #ffd08a; }
.yt-pulsanti + img { margin-top: 6px; }

.yt-cornici { padding-top: 4px; }
.yt-cornice { width: 179px; margin: 0 auto; }
.yt-cornice a img { width: 149px; height: 112px; object-fit: cover; }
.yt-cornici-piede { height: 20px; align-items: center; }
.yt-cornici-link { width: 128px; display: flex; justify-content: space-around; }

.yt-sondaggio { width: 180px; margin: 4px auto 0; }
.yt-sondaggio > p.red3 { min-height: 35px; display: flex; align-items: center; justify-content: center; text-align: center; }
.yt-sondaggio label { display: flex; align-items: center; min-height: 20px; cursor: pointer; }
.yt-sondaggio input[type=radio] { margin: 0 3px 0 4px; accent-color: #FF4F03; }
.yt-sondaggio-pulsanti { display: flex; justify-content: center; gap: 6px; padding: 15px 0 6px; }
.yt-sondaggio-grazie { text-align: center; padding-bottom: 6px; color: var(--yellow); }

.yt-servizio { width: 150px; min-height: 150px; margin: 4px auto 0; padding-top: 6px; }
.yt-servizio li { display: flex; align-items: center; gap: 4px; min-height: 20px; }
.yt-sx > img:last-child { margin-top: auto; }

/* centro 624 */
.yt-centro { width: 624px; flex: none; }
.yt-357 { width: 357px; flex: none; }
.yt-262 { width: 262px; flex: none; }
.yt-132 { width: 132px; display: flex; flex-direction: column; }

.yt-newsflash { height: 90px; display: flex; align-items: center; justify-content: center; }
.yt-newsflash a { display: block; width: 347px; height: 82px; border: 1px solid var(--cornice); background: var(--vuoto); }
.yt-newsflash .yt-scena { width: 345px; }

.yt-lista { width: 345px; margin: 0 auto; }
.yt-lista li {
  height: 20px; display: flex; align-items: center; white-space: nowrap; overflow: hidden;
  padding-left: 20px; background: url(../img/yt2_dot_01.gif) 5.5px center no-repeat;
}
.yt-lista li a { overflow: hidden; text-overflow: ellipsis; }
.yt-lista li .pink { flex: none; }
.yt-lista:not(.yt-lista-175) { height: 184px; padding-top: 12px; }
.yt-lista-175 { height: 160px; }
.yt-altro { display: flex; align-items: center; width: 345px; height: 15px; margin: 0 auto; }
.yt-altro::before { content: ""; width: 200px; height: 2px; background: url(../img/yt2_m_line_01.jpg); }
.yt-altro::after { content: ""; width: 50px; height: 2px; background: url(../img/yt2_m_line_02.jpg); }
.yt-altro a { width: 95px; flex: none; text-align: center; white-space: nowrap; }

.yt-guida {
  height: 223px; width: 130px; margin: 0 auto;
  display: grid; grid-template-columns: 65px 65px; grid-auto-rows: 22px; align-content: center;
}
.yt-guida li { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
/* min-width 0: senza, il flex non stringe il link e "Background" invadeva la colonna accanto;
   se la traduzione non ci sta la stringe data-adatta (yitian.js), niente puntini */
.yt-guida a { min-width: 0; overflow: hidden; }

/* la fascia del tramonto: Flash la mostrava in showAll, centrata sul bianco del filmato */
.yt-mflash { height: 111px; background: #fff; display: flex; align-items: center; }
.yt-mflash .yt-scena { width: 624px; }

.yt-raccolta { width: 240px; margin: 0 auto; }
.yt-raccolta li { height: 43px; display: flex; align-items: center; }
.yt-mini { flex: 0 0 105px; }
.yt-mini img { border: 1px solid var(--cornice); background: var(--vuoto); width: 98px; height: 37px; object-fit: cover; }
.yt-raccolta li > a:last-child { width: 135px; }

.yt-262 { display: flex; flex-direction: column; }
.yt-262.yt-riga { flex-direction: row; }
.yt-eroi { display: flex; justify-content: center; gap: 2px; padding-top: 4px; }
/* photo_frame_01..04 non sono mai stati archiviati: la cornice e' un bordo del loro rosso */
.yt-eroe { display: block; border: solid #3a0400; border-width: 9px 12px 8px 11px; background: #000; }
.yt-eroe img { width: 105px; height: 131px; object-fit: cover; }
.yt-eroi-piede { margin-top: auto; height: 20px; align-items: center; }
.yt-eroi-piede a:nth-of-type(1) { width: 54px; flex: none; text-align: center; white-space: nowrap; }
.yt-eroi-piede a:nth-of-type(2) { width: 55px; flex: none; text-align: center; white-space: nowrap; }

.yt-grandi { background: #0a0000; }
.yt-grandi > .yt-riga { height: 116px; }
.yt-grandi-foto { width: 556px; padding-right: 0; display: flex; justify-content: space-around; align-items: center; margin-right: 18px; }
.yt-grandi-foto li { width: 132px; text-align: center; }
.yt-grande { display: block; border: 1px solid #B83C00; background: var(--vuoto); margin-bottom: 3px; }
.yt-grande img { width: 130px; height: 90px; object-fit: cover; }
.yt-grandi-foto li > a:last-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.yt-articoli { align-items: stretch; }
.yt-258 { width: 258px; flex: none; }
.yt-articolo-testa { height: 30px; display: flex; align-items: center; }
.yt-articolo-box { margin: 3px; background: #320001; }
.yt-articolo-box ul { height: 120px; }
.yt-articolo-box li { height: 20px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.yt-articolo-box li img { margin: 0 4px 0 4px; flex: none; }
.yt-articolo-box li a { overflow: hidden; text-overflow: ellipsis; }
.yt-articolo-box li .pink { flex: none; }
.yt-articolo-piede { display: flex; align-items: center; height: 19px; }
.yt-articolo-piede a { width: 55px; flex: none; text-align: center; white-space: nowrap; }

.yt-partner { width: 100px; flex: none; }
.yt-partner ul { padding-top: 5px; }
.yt-partner li { height: 37px; display: flex; align-items: center; justify-content: center; }
/* i bottoni 88x31 dei siti amici, come si facevano allora: rilievo, bordo, due righe */
.yt-logo {
  width: 88px; height: 31px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #7B1C08; outline: 1px solid #2a0000;
  background: linear-gradient(#5a1200, #2a0400 60%, #1a0200);
  color: #ffcf8a; font: bold 11px/1 Verdana, Tahoma, sans-serif; letter-spacing: .02em;
  text-shadow: 0 1px 0 #000; overflow: hidden; white-space: nowrap;
}
.yt-logo:hover { color: #fff; background: linear-gradient(#7a1a00, #3a0600 60%, #200200); }
.yt-partner-tutti { display: flex; height: 20px; align-items: center; justify-content: center; white-space: nowrap; }

/* ================================================= PAGINE INTERNE (content.asp) */

.yt-briciole { height: 37px; }
.yt-briciole-mezzo { width: 387px; flex: none; }
.yt-briciole-mezzo nav { height: 24px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; background: #000 url(../img/content_05.jpg) left top no-repeat; }

/* 5 + 612 + 5 + 200 + 5 = 827 (nel 2004 la cella era 613 e la tabella sforava di un pixel) */
.yt-612 { width: 612px; flex: none; padding: 15px 0 20px; }
.yt-559 { width: 559px; margin: 0 auto; }
/* content_bg.gif (recuperata dalla Wayback Machine, 1/10/2026): sono i due fianchi della
   cornice. Senza, fra il cappello largo 559 e la testata larga 528 restavano 15px di
   nero per parte e il foglio sembrava piu' stretto del suo cappello. */
.yt-foglio { min-height: 575px; width: 559px; padding: 0 14.5px; box-sizing: border-box;
  background: url(../img/content_bg.gif) left top repeat-y; }
.yt-foglio .yt-testata { margin: 0 auto; }
.yt-foglio h1 { min-height: 20px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; }
.yt-data { height: 20px; display: flex; align-items: center; justify-content: center; }
.yt-linea { height: 10px; background: url(../img/contentline.gif) center top no-repeat; }
.yt-linea-20 { height: 20px; background-position: center 9px; }
.yt-testo { line-height: 1.5; }
/* i paragrafi del 2004 cominciavano con due spazi ideografici 　　 */
.yt-testo p { text-indent: 2em; margin: 0 0 1.2em; }
.yt-testo .yt-titoletto { color: var(--yellow); font-weight: bold; margin: 1.4em 0 .5em; scroll-margin-top: 20px; }
.yt-testo .yt-vai { text-indent: 2em; }
.yt-testo .yt-vai a { color: var(--red3); }
.yt-testo .yt-vai a:hover { color: var(--a-sopra); }
.yt-commenti { height: 25px; display: flex; align-items: center; justify-content: center; }
.yt-foglio-fondo { height: 21px; background: url(../img/content_08.gif) left top no-repeat; }

.yt-elenco li { min-height: 22px; display: flex; align-items: center; gap: 6px; border-bottom: 1px dashed #4a1200; }
.yt-elenco li img { flex: none; }

.yt-200 { width: 200px; flex: none; padding-bottom: 20px; }
.yt-185 { width: 185px; margin: 0 auto; padding-top: 15px; }
.yt-correlati { width: 183px; margin: 0 auto; background: #620000; padding: 0 4px; }
.yt-correlati li { padding-top: 2px; }
.yt-correlati li::after {
  content: ""; display: block; height: 1px; margin: 2px 0 3px;
  background: url(../img/contentline_2.gif) repeat-x;
}
.yt-correlati li img { display: inline-block; vertical-align: middle; }
/* la data va a capo tutta intera: "[2026-9-" da una parte e "28]" dall'altra non si legge */
.yt-intero { white-space: nowrap; }
.yt-50 { height: 50px; background: url(../img/content_11.jpg) left top no-repeat; }
.yt-eflash { width: 172px; margin: 0 auto; border: 1px solid var(--cornice); background: #fff; }
.yt-eflash .yt-scena { width: 170px; }

/* ================================================= LE ALTRE IMPAGINAZIONI DEL 2005
   Fino al 1/10/2026 ogni pagina interna usciva dallo stampo dell'articolo (content.asp).
   Il sito vero aveva un corpo diverso per famiglia: i pezzi vengono dallo specchio della
   Wayback Machine di yt2.catv.net. Tutte stanno in 5 + 817 + 5. */
.yt-817 { width: 817px; flex: none; padding-bottom: 20px; }
.yt-qui .yt-scritta { color: var(--yellow) !important; }

/* --- download/*.asp: fregio col titolo, schede, elenco nella cornice 751 */
.yt-dl-testa { height: 71px; display: flex; justify-content: center; background: url(../img/download_02.jpg) repeat-x; }
.yt-dl-schede { width: 751px; height: 48px; margin: 0 auto; display: flex; }
.yt-dl-schede > span { display: block; }
/* le targhe delle schede non erano scritte a pennello ma in 黑体 dritto */
/* e sono strette (79px): il pennello, rimpicciolito per starci, non si leggeva piu' */
.yt-dl-schede .yt-scritta, .yt-faq-box .yt-scritta, .yt-cs-pulsanti .yt-scritta { font-family: Tahoma, Verdana, Arial, sans-serif; font-weight: bold; letter-spacing: 0; text-shadow: 0 1px 0 #000; }
.yt-dl-corpo { width: 751px; margin: 0 auto; min-height: 350px; padding: 6px 0 20px; background: url(../img/download_10.jpg) repeat-y; }
.yt-520 { width: 520px; margin: 0 auto; line-height: 1.5; }
.yt-dl-titolo { min-height: 20px; margin: 10px 0 4px; font-weight: normal; scroll-margin-top: 20px; }
.yt-dl-riga { display: grid; grid-template-columns: 12px 1fr; align-items: baseline; padding: 3px 0 5px; background: url(../img/contentline_2.gif) left bottom repeat-x; }
.yt-dl-riga img { align-self: center; justify-self: center; }
.yt-dl-riga a { grid-column: 2; }
/* client.asp del 2004: titolo a sinistra e conto delle pagine a destra, il file con la sua impronta, le frecce in fondo */
.yt-dl-capo { display: flex; justify-content: space-between; align-items: baseline; }
.yt-dl-capo .red { color: #f00; }
.yt-dl-sha { grid-column: 2; font-size: 11px; opacity: .8; }
.yt-dl-sha code { font-family: Consolas, "Courier New", monospace; font-size: 10px; word-break: break-all; }
.yt-dl-pagine { width: 350px; margin: 24px auto 0; display: flex; justify-content: space-around; align-items: center; }
.yt-dl-fondo { width: 751px; height: 38px; margin: 0 auto; background: url(../img/download_11.jpg) no-repeat; }

/* --- faq/default.asp: riquadri 363 + 19 + 363 */
.yt-faq-griglia { width: 751px; margin: 12px auto 0; display: grid; grid-template-columns: 363px 363px; column-gap: 25px; row-gap: 18px; align-items: start; }
.yt-faq-corpo { min-height: 150px; padding: 4px 32px 8px; background: url(../img/FAQ_04.gif) repeat-y; line-height: 1.5; }
.yt-faq-corpo summary { min-height: 20px; cursor: pointer; }
.yt-faq-corpo summary:hover, .yt-faq-corpo details[open] summary { color: var(--yellow); }
.yt-faq-corpo details p { margin: 2px 0 8px 14px; }
.yt-faq-voce { min-height: 20px; }
.yt-faq-fondo { height: 32px; background: url(../img/FAQ_07.jpg) no-repeat; }

/* --- cs/*.asp: il servizio clienti */
.yt-cs-barra { height: 34px; }
.yt-cs-pulsanti { width: 615px; flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 13px; padding-right: 7px; box-sizing: border-box; background: url(../img/cs_02.jpg); }
.yt-cs-pulsanti > span { display: block; }
.yt-cs-sx { width: 69px; flex: none; background: #000 url(../img/cs_10-.jpg) repeat-y; }
.yt-cs-sx img { display: block; }
.yt-cs-corpo { width: 748px; flex: none; min-height: 400px; }
.yt-cs-titolo { height: 50px; display: flex; justify-content: center; background: url(../img/cs_11-.jpg) repeat-x; }
.yt-650 { width: 650px; margin: 14px auto 0; line-height: 1.6; }
.yt-650 h1 { font-weight: bold; margin-bottom: 4px; }
.yt-650 h2 { margin: 1.2em 0 .4em; font-weight: normal; scroll-margin-top: 20px; }
.yt-650 p { margin: 0 0 .9em; }
.yt-650 .yt-vai a { color: var(--red3); }
.yt-650 .yt-vai a:hover { color: var(--a-sopra); }

/* --- newslist.asp: 5 + 188 (pulsanti delle sezioni) + 5 + 624 (elenco) + 5 */
.yt-ls-briciole { width: 521px; flex: none; }
.yt-ls-briciole nav { height: 25px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; background: #3a0000 url(../img/newslist_05.jpg) left top no-repeat; }
.yt-ls-sx { width: 188px; flex: none; min-height: 440px; background: #1C0000; display: flex; flex-direction: column; align-items: center; }
.yt-ls-sx > span { display: block; }
.yt-ls-dx { width: 624px; flex: none; padding-bottom: 24px; }
.yt-ls-dx h1 { margin: 0 1px; }
.yt-ls-tabella { width: 571px; margin: 10px auto 0; }
.yt-ls-vuoto { width: 6px; flex: none; }
.yt-ls-tabella .yt-scritta { font-family: Tahoma, Verdana, Arial, sans-serif; font-weight: bold; letter-spacing: .3em; }
.yt-ls-tabella ul { margin-top: 6px; }
/* righe alternate come nel 2005 (#311001 / #4B1803); la data stava nella colonna da 195 */
.yt-ls-tabella li { min-height: 25px; display: grid; grid-template-columns: 20px 1fr 195px; align-items: center; background: #311001; }
.yt-ls-tabella li:nth-child(even) { background: #4B1803; }
.yt-ls-tabella li img { justify-self: center; }
.yt-ls-tabella li span { text-align: center; }

/* --- introduce/*.asp: la guida. 5 + 188 (un pulsante 180x28 per capitolo) + 5 + 624 + 5 */
.yt-gd-sx { width: 188px; flex: none; min-height: 440px; padding-top: 5px; display: flex; flex-direction: column; align-items: center; }
.yt-gd-sx::before { content: ""; width: 180px; height: 10px; background: #400000; }
.yt-gd-sx > span { display: block; }
.yt-gd-sx .yt-scritta { font-family: Tahoma, Verdana, Arial, sans-serif; font-weight: bold; letter-spacing: 0; }
.yt-gd-coda { width: 180px; height: 80px; background: url(../img/intro_07.jpg) repeat-x; }
.yt-gd-testa { min-height: 96px; }
.yt-gd-testa > img { flex: none; }
.yt-gd-indice { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 8px 20px; }
.yt-gd-indice h1 { font-weight: bold; text-align: center; }
.yt-gd-indice ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; }
.yt-gd-indice li { min-height: 24px; display: flex; align-items: center; gap: 7px; }
.yt-gd-linea { display: block; margin: 0 auto 20px; }
.yt-560 { width: 560px; margin: 0 auto; line-height: 1.6; }
.yt-560 h2 { margin: 1.3em 0 .4em; font-weight: normal; scroll-margin-top: 20px; }
.yt-560 p { margin: 0 0 .9em; }
.yt-560 .yt-vai a { color: var(--red3); }
.yt-560 .yt-vai a:hover { color: var(--a-sopra); }

/* stato dei server (serverstatus/servers.asp). Il fondo server_03.jpg e la fascia
   servtt_01.jpg non sono sopravvissuti sulla Wayback: il fondo e' il bruno #280E00
   campionato dentro server_01/02, con i due montanti rossi rifatti a bordo; la fascia
   e' una sfumatura dello stesso rosso dei fregi */
.yt-st { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 20px 0 30px; }
.yt-st h1 { margin: 0; }
.yt-st > img { display: block; }
.yt-st-corpo { width: 631px; min-height: 300px; box-sizing: border-box; padding: 14px 0 18px; background: #280E00; border: solid #000; border-width: 0 12px; box-shadow: inset 6px 0 0 #7a1010, inset -6px 0 0 #7a1010; }
.yt-st-gruppo { width: 584px; margin: 0 auto; }
.yt-st-fascia { height: 22px; line-height: 22px; margin: 0; text-align: center; font-size: 12px; font-weight: normal; color: #fff; background: linear-gradient(90deg, #280E00, #8c0c0c 30%, #8c0c0c 70%, #280E00); }
.yt-st-gruppo ul { width: 500px; margin: 10px auto; }
.yt-st-gruppo li, .yt-st-legenda li { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.yt-st-testo { width: 500px; margin: 18px auto; line-height: 1.6; }
.yt-st-testo p { margin: 0 0 .9em; }
.yt-st-testo .yt-vai a { color: var(--red3); }
.yt-st-testo .yt-vai a:hover { color: var(--a-sopra); }
.yt-st-legenda { width: 500px; margin: 0 auto; display: flex; gap: 28px; padding-top: 10px; border-top: 1px solid #4B1803; }

/* ------------------------------------------------ piede */
.yt-piede { background: #140001; }
.yt-piede-riga { display: flex; height: 152px; }
.yt-piede-testo { width: 755px; display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: center; padding: 0 30px; }

/* ------------------------------------------------ STATICMENU */
/* 838,278 della pagina = 838,1 del corpo (sopra ci sono 207 + 70 di fasce) */
.yt-fluttuante { position: absolute; left: 838px; top: 1px; width: 150px; z-index: 10; will-change: transform; }
.yt-fluttuante li {
  height: 27px; display: flex; align-items: center; justify-content: center;
  /* back_1.gif e zhi_N.jpg non ci sono piu': fondo rosso scuro e la scritta bianca a
     contorno rosso delle etichette originali */
  background: linear-gradient(90deg, #1a0000, #3b0600 50%, #1a0000);
  border-bottom: 1px solid #000;
}
.yt-fluttuante li a {
  /* peso normale: Prime Tokyo e' gia' nero, il grassetto sintetico lo impasta */
  color: #fff; font: 13px/1 var(--pennello); letter-spacing: .06em; white-space: nowrap;
  text-shadow: -1px 0 #9a0a00, 1px 0 #9a0a00, 0 -1px #9a0a00, 0 1px #9a0a00;
}
.yt-fluttuante li a:hover { color: #ffd08a; }
.yt-fluttuante-fondo { height: 232px; background: linear-gradient(#2a0300, #0d0000); }
.yt-fluttuante-fondo img { width: 150px; height: 232px; }
.yt-lingue { display: flex; gap: 5px; padding-top: 7px; justify-content: center; }
/* bandierine al posto delle sigle EN/IT/TR/PT: la lingua attiva ha il bordo arancio */
.yt-lingue button {
  width: 30px; height: 20px; padding: 0; border: 1px solid #7B1C08; background: #2a0400;
  cursor: pointer; opacity: .6; line-height: 0;
}
.yt-lingue button img { width: 28px; height: 18px; display: block; object-fit: cover; }
.yt-lingue button:hover { opacity: 1; }
.yt-lingue button[aria-current] { opacity: 1; border-color: #FF4F03; box-shadow: 0 0 0 1px #FF4F03; }

@media (prefers-reduced-motion: reduce) {
  .yt-fluttuante { will-change: auto; }
}

/* --- cataloghi della guida (introduce/bugbear.asp, weapon.asp...): targa 231x38 col tipo
   aperto, tabella a griglia grigia (#666, 1px fra le celle) con le righe alternate
   #311001 / #4B1803 e la miniatura su fondo nero. Nel 2004 era larga 500: qui 590, perche'
   accanto al nome cinese del client c'e' anche quello latino */
.yt-ct-targa { display: flex; justify-content: center; margin: 4px 0 10px; }
.yt-ct-targa .yt-testata { margin: 0; }
.yt-ct { width: 590px; margin: 0 auto; border-collapse: separate; border-spacing: 1px; background: #666; }
.yt-ct th { height: 25px; padding: 0 4px; background: #311001; color: var(--yellow); font-weight: normal; }
.yt-ct td { height: 52px; padding: 2px 5px; background: #311001; text-align: center; vertical-align: middle; }
/* le fasce vanno a classe: la riga "di sotto" di un oggetto resta del colore della sua */
.yt-ct tr.yt-ct-b > td { background: #4B1803; }
/* la cella dell'immagine NON e' un quadrato: l'icona del client ci sta nelle sue misure
   native (un'armatura e' 32x64, una lancia 32x96) e la riga si alza quanto serve */
.yt-ct td.yt-ct-img, .yt-ct tr.yt-ct-b > td.yt-ct-img { width: 52px; padding: 0; background: #000; line-height: 0; }
.yt-ct-img img { margin: 0 auto; }
.yt-ct-img img.yt-ct-ico { width: auto; max-width: none; margin: 4px auto; }
.yt-ct-senza { line-height: 1; opacity: .5; }
.yt-ct tr.yt-ct-sotto > td { height: auto; padding: 4px 10px 6px; text-align: left; font-size: 11px; }
.yt-ct-sotto p { margin: 2px 0; }
.yt-ct-desc q { color: var(--yellow); margin-right: 6px; }
.yt-ct-nota { opacity: .8; }
.yt-ct-nota::before { content: "※ "; color: var(--yellow); }
.yt-ct-gradi summary { cursor: pointer; color: var(--yellow); }
.yt-ct-gradi table { margin: 4px 0 2px; border-collapse: separate; border-spacing: 1px; background: #666; }
.yt-ct-gradi th, .yt-ct .yt-ct-gradi td { height: 18px; padding: 1px 7px; background: #1d0900; text-align: center; font-weight: normal; }
.yt-ct-gradi th { color: var(--yellow); }
.yt-ct-avviso { width: 590px; margin: 8px auto 0; font-size: 11px; opacity: .8; }
.yt-ct-nome small { display: block; font-size: 11px; opacity: .8; }
.yt-ct td a img { vertical-align: middle; }
.yt-ct-pagine { width: 590px; margin: 10px auto 20px; text-align: right; }
.yt-ct-pagine a, .yt-ct-pagine span { margin-left: 8px; }
.yt-ct-pagine span { opacity: .45; }
.yt-ct-pagine a:hover { color: var(--a-sopra); }
/* le carte di introduce/map.asp */
.yt-mp { margin: 0 auto 20px; width: 343px; text-align: center; }
.yt-mp img { display: block; }
.yt-mp figcaption { padding-top: 8px; }
/* i ritratti 160x200 delle classi accanto al loro paragrafo */
.yt-560 h2 { clear: both; }
.yt-gd-foto { float: left; margin: 0 18px 14px 0; }
.yt-560::after { content: ""; display: block; clear: both; }

/* --- Account_Manage/*.asp (会员管理, ottobre 2004): tabella 734 = colonna 160 + cornice 574 */
.yt-acc { width: 734px; margin: 0 auto; display: flex; align-items: flex-start; }
.yt-acc-sx { width: 160px; flex: none; padding-top: 70px; display: flex; flex-direction: column; }
.yt-acc-sx img { display: block; }
/* left_menuNa.gif -> left_menuNb.gif al passaggio del mouse (nel 2004 era MM_swapImage) */
.yt-acc-voce { display: block; }
.yt-acc-voce a:hover, .yt-acc-voce.yt-qui a { background-image: var(--sopra) !important; }
/* i pulsanti non erano a pennello: 黑体 dritto, e nella colonna partivano da sinistra */
.yt-acc-voce .yt-scritta { font-family: Tahoma, Verdana, Arial, sans-serif; font-weight: bold; letter-spacing: 0; text-shadow: 0 1px 0 #000; }
.yt-acc-dx { width: 574px; flex: none; }
.yt-acc-dx > img { display: block; }
.yt-acc-titolo { height: 66px; display: flex; justify-content: center; }
.yt-acc-corpo { min-height: 400px; padding: 0 40px 10px; background: url(../img/account/account_02.jpg) repeat-y; line-height: 1.5; }
.yt-acc-chi { text-align: right; padding-bottom: 6px; }
.yt-acc-targa { margin: 0 0 14px; display: flex; justify-content: center; }
.yt-acc-grandi { width: 217px; margin: 10px auto 0; }
.yt-acc-grandi img { display: block; }
.yt-acc-modulo, .yt-acc-testo { width: 470px; margin: 0 auto; }
.yt-acc-sopra { margin: 0 0 8px; }
.yt-acc-riga { display: grid; grid-template-columns: 12px 150px 1fr; align-items: center; padding: 4px 0; }
.yt-acc-riga > img { justify-self: start; }
.yt-acc-campo { display: flex; align-items: center; gap: 8px; }
.yt-acc-aiuto { grid-column: 3; font-size: 11px; opacity: .85; padding-top: 2px; }
.boxcolor { background: #000; border: 1px solid #7B1C08; color: #fff; font: 12px var(--font); padding: 2px 3px; }
.yt-acc-captcha { cursor: pointer; border: 1px solid #7B1C08; }
.yt-acc-tasti { text-align: center; margin: 16px 0; }
.yt-acc-tasti .boximg { display: inline-block; margin: 0 6px; padding: 2px 10px 1px; font-family: var(--font); line-height: 1.3; text-decoration: none; }
a.boximg:hover { color: #fff; }
.yt-acc-errori { margin: 0 0 12px; padding: 6px 10px; border: 1px solid #7B1C08; background: #2a0500; color: #ff8a5c; }
.yt-acc-errori li + li { margin-top: 3px; }
.yt-acc-note { margin-top: 10px; padding-left: 16px; list-style: disc; }
.yt-acc-note li + li { margin-top: 4px; }
.yt-acc-sotto { margin-top: 14px; text-align: center; }
.yt-acc-testo p { margin: 0 0 10px; }
.yt-acc-accordo { list-style: decimal; padding-left: 24px; }
.yt-acc-accordo li { margin-bottom: 8px; }

/* Bug e stranezze del client: voci a due colonne (titolo | spiegazione) con un filo fra una
   e l'altra, e i titoli di capitolo con il filo rosso sotto. Prima era una fila di
   paragrafi tutti uguali e non si capiva dove finiva un difetto e cominciava l'altro. */
.yt-650:has(.yt-cs-voce) h2 { margin: 1.8em 0 .3em; padding-bottom: 3px; border-bottom: 1px solid #5a0c0c; font-weight: bold; }
.yt-650:has(.yt-cs-voce) h2 + p { color: #b9a58c; font-style: italic; margin-bottom: .5em; }
.yt-cs-voce { display: flex; gap: 14px; margin: 0; padding: 7px 8px; border-bottom: 1px solid #2a0a0a; }
.yt-cs-voce:nth-of-type(odd) { background: #140404; }
.yt-cs-voce dt { width: 170px; flex: none; }
.yt-cs-voce dd { margin: 0; }
.yt-cs-voce + .yt-vai { margin-top: 1.6em; }

/* ------------------------------------------------ riquadro Account nel menu che scende */
/* 2/10/2026: l'accesso su ogni pagina. Stessi colori delle voci sotto (rosso scuro, scritta
   bianca a contorno rosso) e i campi neri dei moduli del 2004 (.boxcolor / .boximg). */
.yt-fl-acc {
  margin: 0; padding: 6px 8px 8px; text-align: center; border-bottom: 1px solid #000;
  background: linear-gradient(90deg, #1a0000, #3b0600 50%, #1a0000);
}
.yt-fl-acc h2 {
  margin: 0 0 5px; color: #fff; font: 13px/1.3 var(--pennello); letter-spacing: .06em;
  text-shadow: -1px 0 #9a0a00, 1px 0 #9a0a00, 0 -1px #9a0a00, 0 1px #9a0a00;
}
.yt-fl-acc .boxcolor { display: block; width: 100%; box-sizing: border-box; margin: 0 0 4px; }
.yt-fl-acc .boxcolor::placeholder { color: #a08a80; }
.yt-fl-acc .boximg { display: block; width: 100%; box-sizing: border-box; padding: 2px 4px 1px; font-family: var(--font); line-height: 1.3; text-decoration: none; cursor: pointer; }
.yt-fl-nome { margin: 0; color: var(--yellow); font: bold 13px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-fl-stato { margin: 1px 0 6px; font: 11px/1.3 var(--font); }
.yt-fl-si { color: #9fd08a; }
.yt-fl-no { color: var(--red3); }
.yt-fl-sotto { margin: 6px 0 0; font: 11px/1.5 var(--font); }
.yt-fl-sotto a { display: block; color: var(--a); }
.yt-fl-sotto a:hover { color: #ffd08a; }
/* la scheda dei tre passi nella pagina dell'account */
.yt-acc-passi { width: 430px; margin: 0 auto 18px; padding: 0; list-style: none; }
.yt-acc-passi li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 6px; border-bottom: 1px solid #3b0600; opacity: .55; }
.yt-acc-passi li.yt-fatto, .yt-acc-passi li.yt-ora { opacity: 1; }
.yt-acc-segno { flex: none; width: 24px; height: 24px; border: 1px solid var(--cornice); border-radius: 50%; text-align: center; font: bold 14px/24px var(--font); color: var(--a); }
.yt-fatto .yt-acc-segno { background: #2d5a1e; border-color: #9fd08a; color: #fff; }
.yt-ora:not(.yt-fatto) .yt-acc-segno { border-color: #FF4F03; color: #FF4F03; }