/* TikBlock adaptation of the client's OtterSMP reference composition. */
:root { --tb-gold: #e9cb79; --tb-line: rgba(125,211,176,.22); }
.tb-server-address { text-transform: uppercase; }
.tb-selector-icon { width:52px; height:52px; object-fit:contain; flex-shrink:0; }
body { background-color: #071713; }
.triplezone-header { padding-top: 25px; }
.triplezone-header .triplezone-header-g { margin-top: 20px; grid-template-columns: 1fr 1.25fr 1fr; }
.triplezone-header .header-logo { top: 0!important; width: 100%; }
.triplezone-header .header-logo>a { display: block; position: relative; height: 160px; overflow: hidden; }
.triplezone-header .header-logo .header-logo-image { width: 500px; max-width: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.tb-server-address { text-align: center; margin: -4px 0 10px; color: var(--tb-gold); font-size: clamp(21px,2.5vw,35px); font-weight: 900; letter-spacing: .06em; text-shadow: 3px 3px 0 #091e1c,0 0 16px #85c79e55; }
.widget-icon .player-count,.widget-icon #discord-count { white-space: nowrap; width: max-content; min-width: 38px; background: var(--tb-gold)!important; }
.triplezone-header .triplezone-header-g .widget .description-widget .widget-title { color: var(--tb-gold); }
.triplezone-header .triplezone-header-g .widget { padding: 10px 16px; }
.body--with-sidebar { margin-top: 25px!important; gap: 20px; align-items: flex-start; }
.body--with-sidebar .triplezone-main-content { border: 1px solid var(--tb-line); border-radius: 13px; background: rgba(9,29,24,.96); box-shadow: 0 12px 40px #0004,inset 0 1px 0 #b8ffd008; }
.triplezone-main-content .triplezone-body-description { padding: 20px; }
.tb-reference-home .home-splash { display: flex!important; flex-direction: row!important; gap: 20px; align-items: stretch!important; margin-bottom: 22px!important; }
.tb-reference-home .welcome-s { position: relative; flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--tb-line); border-radius: 10px; background: radial-gradient(ellipse at 0 0,#84cd7040,transparent 70%),linear-gradient(130deg,#163728,#071912); box-shadow: inset 0 1px 1px #daffc415,0 0 20px #43a8860d; }
.tb-reference-home .welcome-s::after { content: ''; position: absolute; right: 14px; top: 50%; width: 32px; height: 32px; transform: translateY(-50%) rotate(45deg); border: 1px solid #e9cb7929; box-shadow: 0 0 0 5px #e9cb7910,0 0 0 10px #e9cb7908; border-radius: 9px; }
.tb-reference-home .welcome-s p:first-child { color: var(--tb-gold)!important; font-size: 11px; font-weight: 750; }
.tb-reference-home .welcome-s p:last-child { color: #bce2b1; font-size: 22px; font-weight: 750; letter-spacing: 2px; }
.tb-reference-home .splash__goal,.tb-community-note { width: 38%!important; flex-shrink: 0; border: 1px solid var(--tb-line); border-radius: 10px; background: linear-gradient(130deg,#1c3c2b,#11271e); box-shadow: inset 0 1px 0 #ebffd010; }
.tb-community-note { display: flex; justify-content: center; flex-direction: column; padding: 13px 18px; }
.tb-community-note span { color: #c6d8c3; font-size: 11px; text-transform: uppercase; font-weight: 750; letter-spacing: 1px; }
.tb-community-note strong { color: var(--tb-gold); font-size: 12px; margin-top: 7px; font-weight: 650; }
.splash__goal:not(:has([data-goal-amount]:not(:empty))) { display: none!important; }
.home-splash:has([data-goal-amount]:not(:empty)) .tb-community-note { display: none; }
.splash__goal__footer--progress { background: linear-gradient(90deg,#78b78a,var(--tb-gold))!important; box-shadow: 0 0 20px #c1da6270; }
.tb-store-banner { display: block; width: 100%; height: auto; border: 3px solid #31483a; outline: 1px solid #060f0d; box-shadow: 0 6px 18px #0006; margin: 0 0 26px; }
.tb-copy-section { color: #b9cdc1; font-size: 14px; line-height: 1.65; margin-top: 26px; }
.tb-copy-section h1,.tb-copy-section h2 { font-size: 17px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; margin: 0 0 12px; line-height: 1.4; }
.tb-welcome-copy h1 { color: #ec8ebb; }
.tb-support-copy h2 { color: #79c99b; }
.tb-payment-copy h2 { color: #e88b7e; }
.tb-copy-section p { margin: 0 0 18px; }
.tb-copy-section .tb-signoff { margin-top: 22px; }
.tb-ref-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 23px; border: 1px solid #66947259; border-radius: 9px; color: #e4f4e9!important; font-size: 13px; font-weight: 700; line-height: 1.4; text-transform: uppercase; text-decoration: none!important; background: radial-gradient(ellipse at 50% 0,#79bd6455,transparent 80%),linear-gradient(#173526,#081b13); box-shadow: inset 0 1px 1px #d3f7b315,0 3px 12px #0003; transition: border-color .18s,filter .18s; }
.tb-ref-button:hover { border-color: #ace7b8; filter: brightness(1.16); }
.tb-policy-links { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 20px; }
.triplezone-sidebar [data-modal-toggler="categorySelector"],.triplezone__modules .triplezone__modules__module,.triplezone-sidebar .widget { border: 1px solid var(--tb-line); border-radius: 13px; background: radial-gradient(ellipse at 0 0,#83b87428,transparent 70%),linear-gradient(135deg,#173627e8,#0d241ce8); box-shadow: 0 7px 24px #0003,inset 0 1px 1px #d1f6b015; }
.triplezone-sidebar [data-modal-toggler="categorySelector"] { min-height: 84px; color: #efffee; padding: 16px 20px; background: radial-gradient(ellipse at 35% 10%,#a5c05c38,transparent 75%),linear-gradient(135deg,#264831,#12251d); }
.triplezone-sidebar [data-modal-toggler="categorySelector"]>.mdi { color: var(--tb-gold); border: 1px solid #acd78c30; border-radius: 8px; background: #548c3930; padding: 8px; }
.triplezone-sidebar .triplezone__modules { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.triplezone-sidebar .triplezone__modules>* { width: 100%; margin: 0!important; }
.triplezone-sidebar .triplezone__modules:has(.widget-server-status) .widget-server-status { order: 2; padding: 20px; }
.triplezone-sidebar .tb-patrons-link { display: flex; align-items: center; gap: 14px; margin-top: 20px; min-height: 86px; padding: 16px 20px; border: 1px solid var(--tb-line); border-radius: 13px; color: #e3f2db; font-weight: 750; text-decoration: none; background: radial-gradient(ellipse at 40% 0,#a5b95333,transparent 85%),linear-gradient(135deg,#203e2a,#12281e); }
.tb-patrons-link img { width: 45px; height: 45px; object-fit: contain; }
.tb-copy-section a:focus-visible,[data-modal-toggler]:focus-visible { outline: 3px solid #e9cb79; outline-offset: 4px; }
/* Retain the small child-category navigation introduced in the draft. */
.tb-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.tb-button { color:#dff5e9!important; padding:12px 20px; border:1px solid var(--tb-line); border-radius:8px; background:#1a372b; }
@media(max-width:968px) {
 .triplezone-header .triplezone-header-g { grid-template-columns:1fr 1fr; margin-top:15px; gap:22px; }
 .triplezone-header .header-logo { max-width:400px; }
 .triplezone-header .header-logo>a { height:140px; }
 .triplezone-header .header-logo .header-logo-image { width:420px; }
 .tb-server-address { font-size:24px; }
 .triplezone-sidebar .triplezone__modules,.triplezone-sidebar .tb-patrons-link { display:none; }
 .triplezone-sidebar [data-modal-toggler="categorySelector"] { width:100%; }
 .tb-reference-home .home-splash { flex-direction:column!important; gap:12px; }
 .tb-community-note,.tb-reference-home .splash__goal { width:100%!important; }
 .tb-reference-home .triplezone-body-description { padding:16px; }
 .tb-copy-section { font-size:13px; }
 .tb-store-banner { margin-bottom:22px; border-width:2px; }
 .tb-policy-links { gap:9px; }
 .tb-policy-links a { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .tb-ref-button { transition:none; } }

/* Illustrated category tiles. Motion is confined to the open selector. */
.modal[data-modal-type="categorySelector"] .modal__content { padding-top:0; margin:16px auto; }
.modal[data-modal-type="categorySelector"] .modal__content__box { max-width:740px; width:min(740px,calc(100vw - 32px)); }
.modal[data-modal-type="categorySelector"] .modal__content__box__categoryModal ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.modal[data-modal-type="categorySelector"] .modal__content__box__categoryModal ul li a { min-height:154px; padding:20px 12px; gap:12px; border:1px solid #63996655; background:linear-gradient(140deg,#203c29,#132e22); }
.modal[data-modal-type="categorySelector"] .modal__content__box__categoryModal ul li a img { display:block; width:86px; height:86px; max-width:86px; object-fit:contain; filter:drop-shadow(0 5px 3px #0004); }
.modal[data-modal-type="categorySelector"][open] .tb-category-icon { animation:tb-icon-float 3.8s ease-in-out infinite; }
.modal[data-modal-type="categorySelector"] li:nth-child(2n) .tb-category-icon { animation-delay:-1.3s; }
.modal[data-modal-type="categorySelector"] li:nth-child(3n) .tb-category-icon { animation-delay:-2.5s; }
.modal[data-modal-type="categorySelector"] li a:is(:hover,:focus-visible) .tb-category-icon { animation-play-state:paused; }
.modal[data-modal-type="categorySelector"] li a:focus-visible { outline:3px solid #e9cb79; outline-offset:3px; }
.tb-motion-control { display:flex; align-items:center; gap:8px; margin-top:12px; color:#bfd5c6; font-size:12px; cursor:pointer; width:fit-content; }
.tb-motion-control input { appearance:auto; width:15px; height:15px; margin:0; accent-color:#8bd7ba; }
.modal[data-modal-type="categorySelector"]:has(#tb-pause-icons:checked) .tb-category-icon { animation-play-state:paused; }
@keyframes tb-icon-float { 0%,100% { transform:translateY(2px) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(2deg); } }
@media(max-width:540px) {
 .modal[data-modal-type="categorySelector"] .modal__content__box__categoryModal { padding:16px; }
 .modal[data-modal-type="categorySelector"] .modal__content__box__categoryModal ul { gap:10px; }
 .modal[data-modal-type="categorySelector"] .modal__content__box__categoryModal ul li a { min-height:132px; font-size:14px; padding:14px 8px; }
 .modal[data-modal-type="categorySelector"] .modal__content__box__categoryModal ul li a img { width:68px; height:68px; max-width:68px; }
}
@media(prefers-reduced-motion:reduce) {
 .modal[data-modal-type="categorySelector"][open] .tb-category-icon { animation:none; }
 .modal[data-modal-type="categorySelector"] li a,.modal[data-modal-type="categorySelector"] li a img { transition:none; }
 .tb-motion-control { display:none; }
}
/* Client-requested illustrated Discord and Connect controls. */
.triplezone-header .triplezone-header-g .tb-header-art { border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:0; gap:12px; }
.triplezone-header .triplezone-header-g .tb-header-art .widget-icon { display:block; position:relative; width:140px; height:140px; flex-shrink:0; }
.triplezone-header .tb-header-badge { display:block; width:140px; height:140px; max-width:none; object-fit:contain; filter:drop-shadow(0 6px 5px #0006); transition:transform .25s ease,filter .25s ease; }
.triplezone-header .tb-header-art .description-widget { margin:0!important; }
.triplezone-header .tb-header-art .widget-title,.triplezone-header .tb-header-art .widget-description { display:block; }
.triplezone-header .tb-header-art .widget-icon .player-count,.triplezone-header .tb-header-art .widget-icon #discord-count { top:-5px; left:50%; right:auto; transform:translateX(-50%); }
.triplezone-header .tb-header-art:is(:hover,:focus-visible) .tb-header-badge { transform:translateY(-5px) rotate(-3deg); filter:drop-shadow(0 8px 10px #7be0c04d); }
.triplezone-header .tb-header-art:focus-visible { outline:3px solid #e9cb79; outline-offset:5px; border-radius:10px; }
@media(max-width:968px) {
 .triplezone-header .triplezone-header-g .tb-header-art .widget-icon,.triplezone-header .tb-header-badge { width:104px; height:104px; }
 .triplezone-header .triplezone-header-g .tb-header-art { justify-self:center; }
}
@media(prefers-reduced-motion:reduce) {
 .triplezone-header .tb-header-badge { transition:none; }
 .triplezone-header .tb-header-art:is(:hover,:focus-visible) .tb-header-badge { transform:none; }
}


/* Native Deluxe Table / Quantity Addons: responsive containment only. */
.body--with-sidebar>.triplezone-main-content{min-width:0}
.body--with-sidebar.tb-native-rank-category{display:none!important}
.tb-native-table-scroll{max-width:100%;overflow-x:auto;margin-top:25px;scrollbar-color:#639966 #10261e}
.tb-native-table-scroll:focus-visible{outline:2px solid #e9cb79;outline-offset:3px}
.tb-native-table-scroll .rank__table{display:block!important;min-width:800px;margin-top:0}
.tb-addon-note{font-size:12px;line-height:1.7;color:#bdd0c1;margin:16px 0}
.tb-rank-extra{padding:16px;background:#10291f;border:1px solid #36563e;border-radius:10px;margin-bottom:20px}
@media(max-width:968px){.tb-rank-extra .category__list>div{flex-wrap:wrap;gap:10px}.quantity__product{min-width:0}.quantity__product .quantities{min-width:0}}

/* Illustrated parent categories and reference-aligned native rank presentation. */
.tb-category-intro{margin:0 0 24px;color:#b9cdc1;font-size:15px;line-height:1.6}
.tb-child-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tb-child-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:260px;padding:26px 20px;text-decoration:none!important;color:#f1f7e9!important;border:1px solid #52795380;border-radius:10px;background:radial-gradient(ellipse at 50% 15%,#47764438,transparent 70%),linear-gradient(145deg,#1a3a28,#0c251b);box-shadow:inset 0 0 0 4px #98ce8d06;transition:border-color .2s,background .2s}
.tb-child-card:only-child{grid-column:1/-1}
.tb-child-card__art{display:flex;align-items:center;justify-content:center;height:150px;width:100%}
.tb-child-card__art img{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 7px 5px #0005);transition:transform .2s}
.tb-child-card__name{font-weight:800;font-size:23px;line-height:1.3;text-align:center}
.tb-child-card__cta{font-weight:650;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#e9cb79;display:flex;gap:10px;align-items:center}
.tb-child-card:is(:hover,:focus-visible){border-color:#a1d78f;background-color:#234632}
.tb-child-card:is(:hover,:focus-visible) img{transform:translateY(-5px) rotate(-3deg)}
.tb-child-card:focus-visible{outline:3px solid #e9cb79;outline-offset:4px}
.tb-native-table-scroll{border:1px solid #42684b;border-radius:4px;background:#0c2118}
.tb-native-table-scroll .rank__table__grid__col{background:#0c241a;border-right:1px solid #35513b;padding:20px 18px 24px}
.tb-native-table-scroll .rank__table__grid__col img{width:110px;height:110px;object-fit:contain;margin:5px auto 10px;filter:drop-shadow(0 6px 5px #0005)}
.tb-native-table-scroll .rank__table__grid__col--title{font-size:19px;margin:0 0 5px;color:#f0f5e8}
.tb-native-table-scroll .rank__table__grid__col__price{margin-bottom:10px}
.tb-native-table-scroll .rank__table__grid__col--features,.tb-native-table-scroll .rank__table__features__col__full{background:#234430;color:#e8f0df}
.tb-native-table-scroll .rank__table__grid__col--features{color:#e9cb79}
.tb-native-table-scroll .rank__table__features__col__full{border-top:1px solid #446348;border-bottom:1px solid #446348}
.tb-native-table-scroll .rank__table__features__col__grid__feature{background:#0c241a;border-color:#35513b;color:#dcebdc}
.tb-native-table-scroll .rank__table__features__col__grid:nth-child(even) .rank__table__features__col__grid__feature{background:#122d20}
.tb-native-table-scroll .rank__table__grid__col--cta{background:#58a564;color:#fff;min-height:44px;font-weight:750;border:1px solid #90c18455;border-radius:4px}
.tb-native-table-scroll .rank__table__grid__col--cta:is(:hover,:focus-visible){background:#6ab875}
.tb-native-table-scroll [data-rank-id="7178796"]{border-top:3px solid #dfb851}
.tb-native-table-scroll [data-rank-id="7179039"]{border-top:3px solid #92d7b4}
.tb-native-table-scroll [data-rank-id="7179047"]{border-top:3px solid #dd5272}
.tb-native-table-scroll [data-rank-id="7175887"]{border-top:3px solid #70db71}
@media(max-width:540px){.tb-child-grid{gap:12px;grid-template-columns:1fr}.tb-child-card{min-height:225px;padding:20px 14px}.tb-child-card__art{height:125px}.tb-child-card__art img{width:120px;height:120px}.tb-child-card__name{font-size:21px}.tb-category-intro{font-size:14px}}
@media(prefers-reduced-motion:reduce){.tb-child-card,.tb-child-card__art img{transition:none}.tb-child-card:is(:hover,:focus-visible) img{transform:none}}

.tb-category-landing .tb-category-intro{padding-bottom:22px}
.tb-native-table-scroll .rank__table__grid__col--features>i,.tb-native-table-scroll .rank__table__grid__col--features>p{color:#e9cb79}

/* Draft-only Patrons empty state */
.tb-patrons-welcome{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:28px;margin:28px;padding:30px;border:1px solid #52795366;border-radius:10px;background:radial-gradient(ellipse at 0 50%,#60924426,transparent 70%),linear-gradient(130deg,#183728,#0c251b)}
.tb-patrons-welcome__art{display:block;width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 7px 6px #0005)}
.tb-patrons-welcome__copy{min-width:0}.tb-patrons-welcome .tb-patrons-welcome__copy h2{margin:0 0 12px;padding:0;color:#eef5e6;font-size:25px;font-weight:800;line-height:1.3}.tb-patrons-welcome .tb-patrons-welcome__copy p{margin:0;padding:0;color:#bfd3c2;font-size:14px;line-height:1.7}.tb-patrons-welcome .tb-ref-button{margin-top:22px}
@media(max-width:700px){.tb-patrons-welcome{grid-template-columns:1fr;gap:18px;margin:18px;padding:24px 18px;text-align:center}.tb-patrons-welcome__art{width:120px;height:120px;margin:0 auto}.tb-patrons-welcome .tb-patrons-welcome__copy h2{font-size:22px}}

/* Homepage reading rhythm: override the base theme paragraph reset. */
.tb-reference-home .tb-copy-section{margin-top:36px!important;line-height:1.75}
.tb-reference-home .tb-copy-section h1,.tb-reference-home .tb-copy-section h2{margin:0 0 16px!important}
.tb-reference-home .tb-copy-section p{margin:0 0 16px!important;padding:0!important;line-height:1.75!important}
.tb-reference-home .tb-original-intro{margin-bottom:16px;line-height:1.75}
.tb-reference-home .tb-original-intro>:last-child{margin-bottom:0!important}
.tb-reference-home .tb-copy-section .tb-signoff{margin:20px 0 0!important}
.tb-reference-home .tb-support-copy>.tb-ref-button{margin-top:4px}
.tb-reference-home .tb-policy-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px!important;padding:0!important}
.tb-reference-home .tb-copy-section:last-child{padding-bottom:8px}
@media(max-width:600px){.tb-reference-home .tb-copy-section{margin-top:28px!important}.tb-reference-home .tb-copy-section h1,.tb-reference-home .tb-copy-section h2{margin-bottom:12px!important}.tb-reference-home .tb-copy-section p{margin-bottom:14px!important}.tb-reference-home .tb-policy-links{gap:10px}.tb-reference-home .tb-copy-section .tb-ref-button{min-height:44px}}

/* Compact Vote panel; original voting destinations preserved. */
.triplezone-main-content:has(.tb-vote-compact){align-self:start}
.triplezone-main-content:has(.tb-vote-compact) .category__header{padding:22px 22px 16px!important}
.triplezone-main-content:has(.tb-vote-compact) .category__header h3{margin:0!important;padding:0!important}
.triplezone__vote--flex.tb-vote-compact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 22px 22px!important;margin:0!important}
.tb-vote-compact .triplezone__vote--col{width:auto!important;min-width:0;padding:0!important;margin:0!important}
.tb-vote-compact .triplezone__vote--col a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:12px 10px!important;margin:0!important;font-size:12px;line-height:1.4;color:#173728!important;border-radius:7px}
.tb-vote-compact .triplezone__vote--col a i{flex-shrink:0}
@media(max-width:1050px){.triplezone__vote--flex.tb-vote-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.triplezone__vote--flex.tb-vote-compact{grid-template-columns:1fr;gap:10px;padding:0 18px 18px!important}.triplezone-main-content:has(.tb-vote-compact) .category__header{padding:18px!important}}

/* Keep Discord and Connect labels uniformly above their equal-sized artwork. */
.tb-header-art .widget-icon > .player-count,
.tb-header-art .widget-icon > #discord-count {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 68px;
    box-sizing: border-box;
    padding: 5px 12px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
    z-index: 2;
}
