.games-main:has(> .tw-workshop) { padding-top: 18px; }
.tw-workshop {
  --tw-accent: #68e5ff;
  --tw-muted: #99acc7;
  --tw-border: #a5c9ff24;
  color: #eff6ff;
  max-width: 1680px;
  margin: 0 auto;
  padding: 8px 0 36px;
}
.tw-workshop * { box-sizing: border-box; }
.tw-workshop :is(a, button, summary):focus-visible { outline: 3px solid #82eeff; outline-offset: 4px; }
.tw-workshop a { text-decoration: none; }
.tw-workshop button { font: inherit; }
.tw-topline, .tw-wallet, .tw-heading, .tw-rulebar, .tw-title-row, .tw-node-top, .tw-detail-heading, .tw-resource, .tw-research-footer { display: flex; align-items: center; }
.tw-topline { gap: 18px; justify-content: space-between; margin-bottom: 16px; }
.tw-back { color: var(--tw-muted); font-size: 13px; }
.tw-back:hover { color: white; }
.tw-wallet { gap: 10px; flex-wrap: wrap; }
.tw-wallet-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border: 1px solid var(--tw-border); border-radius: 12px; background: #0b1527e6; }
.tw-wallet-item img { width: 35px; height: 35px; object-fit: contain; }
.tw-wallet-item b { font-size: 17px; font-variant-numeric: tabular-nums; }
.tw-wallet-item small { color: #a2b5ce; font-size: 10px; letter-spacing: .05em; }
.tw-heading { gap: 24px; justify-content: space-between; margin-bottom: 16px; }
.tw-eyebrow { display: block; color: var(--tw-accent); letter-spacing: .15em; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.tw-heading h1 { font-size: clamp(30px, 3vw, 48px); line-height: 1.1; margin: 7px 0 9px; letter-spacing: -.04em; }
.tw-heading p { color: var(--tw-muted); font-size: 14px; line-height: 1.65; margin: 0; max-width: 700px; }
.tw-ownership { display: grid; place-items: center; flex-shrink: 0; min-width: 96px; padding: 12px; border-left: 1px solid var(--tw-border); }
.tw-ownership strong { font-size: 27px; line-height: 1.2; white-space: nowrap; }
.tw-ownership small { font-size: 10px; color: var(--tw-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .09em; }
.tw-roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
.tw-tower-tab { position: relative; display: flex; align-items: center; min-width: 0; gap: 11px; padding: 12px; color: #bbcee7; border-radius: 13px; border: 1px solid var(--tw-border); background: linear-gradient(135deg, #15233bd9, #091121de); transition: border-color .15s, background-color .15s; overflow: hidden; }
.tw-tower-tab:hover { border-color: #86daff75; }
.tw-tower-tab[aria-current="true"] { color: #fff; border-color: var(--tw-accent); background: linear-gradient(135deg, #21485fc4, #11223d); box-shadow: inset 0 -3px 0 var(--tw-accent); }
.tw-tower-tab img { width: 48px; height: 54px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 8px #0005); }
.tw-tower-tab span { display: grid; gap: 6px; min-width: 0; }
.tw-tower-tab b { font-size: 13px; line-height: 1.3; }
.tw-tower-tab small { font-size: 10px; line-height: 1.4; color: var(--tw-muted); }
.tw-tower-tab.is-locked img { opacity: .65; filter: saturate(.55); }
.tw-rulebar { gap: 10px 20px; flex-wrap: wrap; margin: 0 0 20px; color: #a6bbd4; font-size: 11px; }
.tw-rulebar span { display: inline-flex; align-items: center; gap: 7px; }
.tw-rulebar i { width: 6px; height: 6px; border-radius: 50%; background: #68e5ff; box-shadow: 0 0 10px #68e5ff44; }
.tw-rulebar span:nth-child(2) i { background: #ba9aff; }
.tw-layout { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(390px, 1.5fr) minmax(275px, 1fr); gap: 17px; align-items: start; }
.tw-showcase, .tw-tree, .tw-details, .tw-material-bank, .tw-respec { border: 1px solid var(--tw-border); border-radius: 18px; background: linear-gradient(150deg, #14223bd9, #0a1325ed); }
.tw-showcase { overflow: hidden; position: relative; }
.tw-showcase-header { padding: 24px 22px 0; }
.tw-showcase h2 { margin: 8px 0 7px; font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
.tw-showcase .tw-role { color: #a9bfd9; font-size: 12px; margin: 0; line-height: 1.6; min-height: 39px; }
.tw-stage { height: 285px; position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden; }
.tw-stage::before { content: ""; position: absolute; inset: 8% -20% -45%; background: radial-gradient(ellipse at 50% 38%, #45cefc20, transparent 60%), repeating-linear-gradient(90deg, #98bbdc0c 0 1px, transparent 1px 42px), repeating-linear-gradient(#98bbdc0c 0 1px, transparent 1px 42px); transform: perspective(280px) rotateX(53deg); z-index: -1; }
.tw-stage img { height: 223px; width: 235px; object-fit: contain; filter: drop-shadow(12px 12px 10px #0008); position: relative; z-index: 2; }
.tw-stage-caption { position: absolute; bottom: 9px; left: 16px; right: 16px; display: flex; gap: 8px; justify-content: center; color: #93accb; text-transform: uppercase; font-size: 9px; letter-spacing: .08em; }
.tw-stage-caption b { color: #c1eaff; font-weight: 600; }
.tw-stage-range { position: absolute; width: 216px; height: 95px; bottom: 39px; border: 1px dashed #77d8fa50; border-radius: 50%; background: #21c6ff05; }
.tw-signal { position: absolute; top: 50%; left: 66%; width: 70px; height: 2px; background: linear-gradient(90deg, transparent, var(--tw-accent)); transform: rotate(-21deg); transform-origin: left center; opacity: .5; animation: tw-signal 3.6s ease-out infinite; z-index: 1; }
.tw-stage[data-kind="arc-array"] .tw-signal { height: 27px; background: none; border-top: 2px solid #cda5ff; border-right: 2px solid #cda5ff; transform: skewY(-20deg); }
.tw-stage[data-kind="nova-emitter"] .tw-signal { width: 42px; height: 22px; border: 2px solid #ffca71; border-radius: 50%; background: #ffc15c16; }
.tw-stage[data-kind="support-beacon"] .tw-signal { width: 35px; height: 35px; border: 2px solid #75edb1; border-radius: 50%; background: #53e29c16; }
.tw-stage[data-kind="prism-spire"] .tw-signal { height: 3px; background: #ff9cec; box-shadow: 0 0 9px #e77afc; }
@keyframes tw-signal { 0%, 30%, 100% { opacity: 0; } 40%, 65% { opacity: .75; } }
.tw-stats { margin: 0 18px 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tw-stat { padding: 12px; background: #050d1d80; border: 1px solid #ffffff08; border-radius: 10px; }
.tw-stat dt { color: #8fa9c9; font-size: 10px; margin-bottom: 6px; }
.tw-stat dd { margin: 0; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.tw-stat dd small { font-size: 10px; font-weight: 400; color: #8fa9c9; }
.tw-speciality { border-top: 1px solid var(--tw-border); padding: 18px 22px; }
.tw-speciality strong { display: block; color: var(--tw-accent); font-size: 11px; margin-bottom: 7px; }
.tw-speciality p { color: #9fb5d0; margin: 0; font-size: 11px; line-height: 1.65; }
.tw-tree { padding: 22px 18px 18px; }
.tw-title-row { gap: 12px; justify-content: space-between; margin-bottom: 16px; }
.tw-title-row h2 { font-size: 16px; letter-spacing: -.01em; margin: 0; }
.tw-title-row > span { font-size: 10px; color: var(--tw-muted); }
.tw-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.tw-branch { min-width: 0; }
.tw-branch[data-branch="UTILITY"] { --branch-color: #a996ff; }
.tw-branch[data-branch="SPECIALISATION"] { --branch-color: #ffc873; }
.tw-branch[data-branch="POWER"] { --branch-color: #70eaff; }
.tw-branch-head { text-align: center; min-height: 72px; }
.tw-branch-head strong { color: var(--branch-color); display: block; font-size: 11px; margin-bottom: 6px; }
.tw-branch-head small { color: #8ca2bf; font-size: 10px; }
.tw-branch-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--branch-color) 30%, transparent); border-radius: 8px; color: var(--branch-color); margin-bottom: 8px; }
.tw-branch-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tw-node { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: 70px; margin-top: 14px; padding: 9px 10px; border: 1px solid #8099bf30; border-radius: 10px; color: #adc0d8; background: #0b1425; }
.tw-node::before { content: ""; width: 1px; height: 15px; background: #8ea9d23d; position: absolute; top: -15px; left: 50%; }
.tw-node:hover { border-color: var(--branch-color); }
.tw-node.is-owned { color: #e9f7ff; background: linear-gradient(135deg, #194357a6, #112638); border-color: #61c4ca70; }
.tw-node.is-owned::before { background: #62d8d77a; }
.tw-node[aria-current="true"] { border-color: var(--branch-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--branch-color) 15%, transparent); background: linear-gradient(150deg, #25425fcc, #132338); }
.tw-node.is-locked { background: #091221; color: #8192ac; }
.tw-node-top { justify-content: space-between; gap: 5px; }
.tw-node-top b { font-size: 11px; letter-spacing: .05em; }
.tw-node-top span { color: var(--branch-color); font-size: 11px; }
.tw-node > strong { font-size: 11px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.tw-node > small { font-size: 9px; color: #93a8c3; }
.tw-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 9px; color: #8fa9c9; margin: 22px 0 0; }
.tw-legend span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #78d9d5; }
.tw-legend span:nth-child(2)::before { background: #f3c66b; }
.tw-legend span:nth-child(3)::before { background: #64728b; }
.tw-details { padding: 22px; position: sticky; top: 22px; }
.tw-detail-heading { gap: 10px; justify-content: space-between; }
.tw-tier-label { display: inline-flex; color: #ffdb99; border: 1px solid #e0b25a40; background: #cb9c3111; font-size: 10px; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.tw-details h2 { font-size: 22px; line-height: 1.3; margin: 14px 0 10px; letter-spacing: -.025em; }
.tw-details > p { color: #a5bbd6; font-size: 12px; line-height: 1.7; margin: 0 0 18px; }
.tw-change { background: #081323; border: 1px solid #7ad7ea20; border-radius: 11px; padding: 15px; margin-bottom: 15px; }
.tw-change small { color: #91aac5; font-size: 10px; display: block; margin-bottom: 10px; }
.tw-change-values { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 21px; font-weight: 750; }
.tw-change-values s { text-decoration: none; color: #a7b7ce; }
.tw-change-values span { color: #6a819e; font-size: 16px; }
.tw-change-values b { color: #8cf6c3; }
.tw-change p { color: #a1b6d0; font-size: 10px; line-height: 1.55; margin: 11px 0 0; }
.tw-required-title { display: block; font-size: 10px; letter-spacing: .09em; color: #aab9d0; margin: 18px 0 9px; text-transform: uppercase; }
.tw-material-list { display: grid; gap: 8px; }
.tw-resource { gap: 8px; padding: 8px 10px; background: #080f1e80; border-radius: 8px; }
.tw-resource img { width: 24px; height: 24px; object-fit: contain; }
.tw-resource span { flex: 1; font-size: 10px; color: #adbfda; }
.tw-resource b { font-size: 11px; color: #8ce4b5; font-variant-numeric: tabular-nums; }
.tw-resource.is-missing b { color: #ffc076; }
.tw-resources-help { font-size: 10px; color: #a9bbd6; display: block; margin: 8px 0 15px; text-decoration: underline !important; text-underline-offset: 3px; }
.tw-payments { display: grid; gap: 9px; margin-top: 16px; }
.tw-payments form { margin: 0; padding: 0; border: 0; background: none; display: flex; }
.tw-purchase { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 46px; padding: 10px 8px; border-radius: 10px; border: 1px solid #8bddfc; background: linear-gradient(115deg, #79e8fb, #a8c3ff); color: #091c2b; font-size: 12px !important; font-weight: 800 !important; cursor: pointer; }
.tw-purchase img { width: 26px; height: 26px; object-fit: contain; }
.tw-purchase--pt { background: #cba45612; border-color: #b79a645c; color: #ffdf9e; }
.tw-purchase:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.6); }
.tw-detail-state { padding: 11px 12px; margin: 15px 0 8px; background: #2f354827; border: 1px solid #a3b7cc23; border-radius: 9px; font-size: 11px; line-height: 1.65; color: #c1cce0; }
.tw-detail-state.is-owned { border-color: #7fe8bc3d; color: #a5f0d1; background: #2fa3780d; }
.tw-safety-note { font-size: 10px !important; color: #8198b8 !important; text-align: center; margin: 12px 0 0 !important; line-height: 1.65 !important; }
.tw-notice { margin: 0 0 19px; padding: 13px 16px; background: #213c496b; border: 1px solid #69d9bf4a; border-radius: 11px; font-size: 12px; line-height: 1.6; color: #ccf7e8; }
.tw-notice.is-error { background: #803f351f; border-color: #ffba8b50; color: #ffd6b6; }
.tw-secondary { display: grid; grid-template-columns: 1.4fr 1fr; gap: 17px; margin-top: 20px; }
.tw-material-bank, .tw-respec { padding: 20px; }
.tw-material-bank h2, .tw-respec h2 { font-size: 14px; margin: 0 0 13px; }
.tw-material-bank .tw-material-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-material-bank .tw-resource { flex-wrap: wrap; }
.tw-material-bank .tw-resource img { width: 28px; height: 28px; }
.tw-material-bank .tw-resource span { min-width: 55%; }
.tw-material-bank .tw-resource b { width: 100%; margin-top: 3px; color: #e1edff; }
.tw-material-bank p, .tw-respec p { color: #90a8c7; font-size: 11px; line-height: 1.6; margin: 12px 0 0; }
.tw-respec summary { color: #c4d6ec; font-size: 13px; cursor: pointer; }
.tw-respec form { margin-top: 15px; }
.tw-respec label { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #aec2da; }
.tw-respec label input { width: 17px; height: 17px; accent-color: #71e5ff; }
.tw-respec button { margin-top: 12px; background: #151f34; border: 1px solid #8ea6c642; color: #cfddf3; padding: 9px 13px; border-radius: 8px; cursor: pointer; font-size: 11px; }
.tw-respec button:disabled { opacity: .45; cursor: not-allowed; }
.tw-confirm { color: #eaf4ff; background: linear-gradient(145deg, #162a44, #0c1629); width: min(440px, calc(100vw - 30px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid #83cdec60; border-radius: 19px; padding: 27px; box-shadow: 0 30px 120px #000a; }
.tw-confirm::backdrop { background: #020b18ba; backdrop-filter: blur(5px); }
.tw-confirm h2 { font-size: 22px; margin: 12px 0; }
.tw-confirm p { font-size: 13px; line-height: 1.65; color: #a8bdd9; white-space: pre-line; }
.tw-confirm-actions { display: flex; gap: 10px; margin-top: 22px; }
.tw-confirm-actions button { border: 1px solid #8acde980; border-radius: 10px; padding: 11px 16px; font: inherit; font-size: 12px; cursor: pointer; }
.tw-confirm-actions [data-workshop-cancel] { background: #101d33; color: #d6e6fc; }
.tw-confirm-actions [data-workshop-confirm] { background: #79e8f7; color: #0c2335; font-weight: 800; flex: 1; }
.tw-workshop [hidden] { display: none !important; }
@media (min-width: 1900px) {
  .tw-layout { grid-template-columns: minmax(270px, 1fr) minmax(460px, 1.6fr) minmax(310px, 1fr); }
  .tw-stage { height: 320px; }
  .tw-stage img { height: 260px; width: 270px; }
  .tw-node { min-height: 88px; }
}
@media (max-width: 1180px) {
  .tw-layout { grid-template-columns: minmax(240px, .8fr) minmax(350px, 1.2fr); }
  .tw-details { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; }
  .tw-detail-heading, .tw-details h2, .tw-details > p, .tw-details .tw-change { grid-column: 1; }
  .tw-detail-resources, .tw-detail-actions { grid-column: 2; }
  .tw-detail-resources { grid-row: 1 / 4; }
  .tw-detail-actions { grid-row: 4 / 7; }
  .tw-tower-tab { padding: 10px 7px; gap: 6px; }
  .tw-tower-tab img { width: 42px; height: 50px; }
  .tw-tower-tab b { font-size: 11px; }
}
@media (max-width: 740px) {
  .tw-workshop { padding-top: 18px; }
  .tw-topline { flex-wrap: wrap; gap: 12px; margin-bottom: 19px; }
  .tw-wallet { gap: 7px; }
  .tw-wallet-item { padding: 5px 10px 5px 5px; }
  .tw-wallet-item img { width: 28px; height: 28px; }
  .tw-wallet-item b { font-size: 15px; }
  .tw-heading { gap: 12px; }
  .tw-heading p { font-size: 12px; }
  .tw-heading h1 { font-size: 32px; }
  .tw-ownership { min-width: 70px; }
  .tw-ownership strong { font-size: 23px; }
  .tw-ownership small { font-size: 8px; }
  .tw-roster { display: flex; overflow-x: auto; gap: 8px; padding: 2px 2px 9px; scroll-snap-type: x mandatory; }
  .tw-tower-tab { flex: 0 0 150px; scroll-snap-align: start; padding: 10px; }
  .tw-layout { display: flex; flex-direction: column; gap: 15px; }
  .tw-layout > * { width: 100%; }
  .tw-showcase { display: grid; grid-template-columns: 1fr 1fr; }
  .tw-showcase-header { padding: 20px 0 0 18px; }
  .tw-showcase h2 { font-size: 22px; }
  .tw-stage { grid-column: 2; grid-row: 1 / 3; height: 224px; }
  .tw-stage img { width: 145px; height: 183px; }
  .tw-stage-range { width: 125px; height: 60px; bottom: 27px; }
  .tw-stage-caption { bottom: 6px; font-size: 8px; }
  .tw-stats { grid-column: 1; margin: 12px 0 14px 16px; gap: 5px; }
  .tw-stat { padding: 8px; }
  .tw-stat dd { font-size: 14px; }
  .tw-stat dt { font-size: 9px; }
  .tw-speciality { grid-column: 1 / -1; padding: 13px 18px; }
  .tw-speciality p { font-size: 10px; }
  .tw-rulebar { font-size: 10px; gap: 9px 14px; }
  .tw-tree { padding: 18px 13px; }
  .tw-branches { gap: 9px; }
  .tw-node { padding: 10px 7px; min-height: 83px; }
  .tw-node > strong { font-size: 10px; }
  .tw-node > small { font-size: 8px; }
  .tw-details { display: block; padding: 21px; scroll-margin-top: 16px; }
  .tw-details .tw-payments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-purchase { flex-wrap: wrap; font-size: 10px !important; }
  .tw-secondary { grid-template-columns: 1fr; }
  .tw-material-bank .tw-material-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tw-signal { animation: none; opacity: .45; }
  .tw-tower-tab { transition: none; }
}