/* Toywars Legend — rounded "toy" theme.
   Loaded after site.css by the home, login and register pages only. Every rule
   hangs off body.tw-theme, so pages that do not load this file keep the old look. */

.tw-theme{--th-grad:linear-gradient(180deg,#FFB347 0%,#F2912A 45%,#EC6A17 100%) border-box;
  --th-spring:cubic-bezier(.34,1.56,.64,1);--th-ink:#2a1405;--th-panel:linear-gradient(180deg,#1b1838,#161330)}
@keyframes thPopIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes thHeroIntro{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}

/* ===== nav: a floating pill ===== */
.tw-theme .nav{top:14px;margin:14px clamp(12px,2vw,24px) 0;align-items:center;gap:20px;padding:9px 9px 9px 26px;min-height:64px;
  border-radius:999px;background:rgba(23,20,48,.95);backdrop-filter:none;
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 40px rgba(5,3,14,.45)}
.tw-theme .nav-left{gap:clamp(12px,1.8vw,28px);overflow:hidden}
.tw-theme .nav-logo{flex:none;display:flex;align-items:center}
.tw-theme .nav-logo img{height:38px}
.tw-theme .nav-links{gap:2px;font-size:14.5px}
.tw-theme .nav-links a{color:#c4c2d6;padding:8px clamp(7px,.75vw,14px);border-radius:999px;transition:color .18s,background .18s}
.tw-theme .nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.tw-theme .nav-links a.active{color:#FFB15C;background:rgba(255,255,255,.05)}
.tw-theme .nav-right{gap:10px;padding-left:0}
.tw-theme .nav-right.authed{padding-right:6px}
.tw-theme .nav-link{padding:10px 16px;border-radius:999px;transition:color .16s,background .16s}
.tw-theme .nav-link:hover,.tw-theme .nav-link.active{color:#FFB15C;background:rgba(255,255,255,.05)}
.tw-theme .nav-topup{color:#c4c2d6;padding:8px 14px;border-radius:999px;transition:color .18s,background .18s}
.tw-theme .nav-topup:hover,.tw-theme .nav-topup.active{color:#fff;background:rgba(255,255,255,.07)}

.tw-theme .lang-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 14px;
  font-size:13px;letter-spacing:.06em;color:#c4c2d6;transition:color .16s,background .16s}
.tw-theme .lang-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.tw-theme .lang-btn span{font-size:11px!important;opacity:.8}
.tw-theme .lang-drop{top:calc(100% + 10px);min-width:118px;gap:2px;padding:6px;border-radius:18px;background:rgba(28,25,56,.97);
  box-shadow:0 20px 44px rgba(0,0,0,.5)}
.tw-theme .lang-opt{border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:400;color:#b8bac4}
.tw-theme .lang-opt:hover{background:rgba(255,255,255,.07)}
.tw-theme .lang-opt.active,.tw-theme .lang-opt.active:hover{font-weight:500;background:rgba(242,145,42,.1)}

.tw-theme .user-btn{width:46px;height:46px}
.tw-theme .user-btn-av{width:44px;height:44px}
.tw-theme .user-drop{top:calc(100% + 14px);border-radius:20px;overflow:hidden;background:rgba(28,25,56,.98);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.tw-theme .user-drop::before{display:none}

/* ===== buttons ===== */
.tw-theme .btn-cta{font-family:'Mitr','Kanit',sans-serif;font-weight:500;color:var(--th-ink);background:var(--th-grad);
  border:1px solid #F7A03A;border-radius:999px;overflow:visible;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(150,50,0,.35);
  transition:transform .2s var(--th-spring),box-shadow .2s}
.tw-theme .btn-cta::before{display:none}
.tw-theme .btn-cta:hover{color:var(--th-ink);transform:translateY(-2px)}
.tw-theme .btn-cta:active{transform:translateY(1px)}
.tw-theme .btn-cta:disabled{transform:none}
.tw-theme .nav-register{align-self:center;padding:12px 28px;font-size:16px}
.tw-theme .btn-ghost{border-radius:999px;border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .22s var(--th-spring),border-color .16s,background .16s}
.tw-theme .btn-ghost:hover{transform:translateY(-2px)}
.tw-theme .arrow-btn{backdrop-filter:none;background:rgba(14,11,26,.62);border-radius:50%;font-size:22px;transition:transform .22s var(--th-spring),border-color .18s,background .18s,color .18s}
.tw-theme .arrow-btn:hover{scale:none;translate:0 -2px}
.tw-theme .to-top{border-radius:50%}

/* ===== popups: legal documents, news post, download window ===== */
.tw-theme .modal{border-radius:30px;overflow:hidden;border-color:rgba(255,255,255,.1);animation:thPopIn .35s var(--th-spring) both}
.tw-theme .modal-title,.tw-theme .dlw-title{font-family:'Mitr','Kanit',sans-serif}
.tw-theme .modal-head{border-bottom-color:rgba(255,255,255,.08)}
.tw-theme .modal-sub{color:#7c7a92}
.tw-theme .modal-close{border-radius:50%;background:rgba(255,255,255,.04);font-size:16px;transition:transform .2s,border-color .16s,background .16s}
.tw-theme .modal-close:hover{transform:rotate(90deg)}
.tw-theme .modal-body h4{font-family:'Mitr','Kanit',sans-serif;font-size:16.5px;color:#FFB15C}
.tw-theme .modal-body p{color:#c6c4d6}
.tw-theme .post-close{top:16px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(14,11,26,.7);color:#fff;font-size:16px;transition:transform .2s}
.tw-theme .post-close:hover{transform:rotate(90deg)}
.tw-theme .post-modal .art-cover img{border-radius:18px}
.tw-theme .dlw-chip,.tw-theme .dlw-tag,.tw-theme .dlw-soon{border-radius:999px}
.tw-theme .dlw-opt{border-radius:18px}
.tw-theme .dlw-opt::before,.tw-theme .dlw-opt::after{border-radius:50%}
.tw-theme .dlw-spec{border-radius:18px;overflow:hidden}
.tw-theme .dlw-note{border-radius:0 14px 14px 0}
.tw-theme .toast{border-radius:14px}

/* ===== footer: one slim bar ===== */
.tw-theme .footer{padding:18px 48px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tw-theme .footer-inner{max-width:1280px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;text-align:left}
.tw-theme .footer-links{order:1;gap:2px;margin:0 0 0 -14px;font-size:13px;justify-content:flex-start}
.tw-theme .footer-links a{color:#b8b6ca;padding:6px 14px;border-radius:999px;transition:color .16s}
.tw-theme .footer-links a:hover{color:#FFB15C}
.tw-theme .footer-links .sep{display:none}
.tw-theme .footer-copy{order:2;margin:0 auto 0 0;font-size:12.5px;color:#5f5c78}
.tw-theme .social-row{order:3;gap:8px;margin:0}
.tw-theme .social-row a{width:38px;height:38px;background:rgba(255,255,255,.05);transition:transform .22s var(--th-spring),background .16s}
.tw-theme .social-row a:hover{transform:translateY(-3px)}
.tw-theme .social-row img{width:17px;height:17px}
.tw-theme .footer-logo{display:none}

/* ===== page backdrop ===== */
.tw-theme .page-art::before{inset:0;background:url('/assets/img/theme/news-bg-map.jpg') center/cover no-repeat;filter:none;opacity:.05}
.tw-theme .page-art::after{background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(14,11,26,0) 30%,#0e0b1a 100%)}
.tw-theme.th-home .page-art{display:none}

/* =====================================================================
   HOME
   ===================================================================== */
.th-wrap{position:relative;max-width:1280px;margin:0 auto;padding-left:48px;padding-right:48px;width:100%}
.th-h2{font-family:'Mitr','Kanit',sans-serif;font-size:clamp(30px,3.6vw,44px);font-weight:500;margin:0;color:#fff;line-height:1.2}
/* faint artwork behind a section, edge to edge of the window */
/* Kept cheap on purpose: the images are saved in grayscale and the soft edge is a
   gradient painted on top. Live filters, blend modes and masks here made scrolling stutter. */
.th-bg{position:absolute;top:-40px;bottom:0;left:50%;width:100vw;margin-left:-50vw;pointer-events:none}
.th-bg::before{content:'';position:absolute;inset:0;background:var(--bg) center/cover no-repeat;opacity:.07}
.th-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 72% at 50% 50%,rgba(14,11,26,0) 0%,rgba(14,11,26,.4) 45%,#0e0b1a 85%)}
.th-home main{overflow-x:clip}

/* Scroll reveal, home page: the theme's longer, deeper rise. The page script also
   takes .revealed off again once an item has left the screen, so it plays every
   time the item scrolls back into view, not just the first time. */
.tw-motion .th-home [data-reveal]{translate:0 48px;
  transition:opacity 1s cubic-bezier(.16,.8,.24,1) var(--rv-d,0s),
             translate 1s cubic-bezier(.16,.8,.24,1) var(--rv-d,0s),
             scale 1s cubic-bezier(.16,.8,.24,1) var(--rv-d,0s)}
.tw-motion .th-home [data-reveal="zoom"]{translate:0 36px;scale:.96}
.tw-motion .th-home [data-reveal].revealed{opacity:1;translate:none;scale:none}

/* ---- hero: the key art slides up under the floating nav ---- */
.th-hero{position:relative;margin-top:-78px;min-height:max(58vh,calc(37.5vw - 44px));overflow:hidden;display:flex;align-items:flex-end}
.th-hero-art{position:absolute;top:calc(-44px + 15%);left:0;right:0;bottom:-15%;will-change:translate}
.th-hero-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#0e0b1a 0%,rgba(14,11,26,0) 14%,rgba(14,11,26,0) 52%,#0e0b1a 84%)}
.th-hero-art .slot{position:absolute;inset:0;background:none}
.th-hero-art img.content{animation:thHeroIntro 2.2s cubic-bezier(.16,.8,.24,1) both}
.th-hero-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 30%,rgba(14,11,26,.15),rgba(14,11,26,.7) 100%),
    linear-gradient(0deg,rgba(14,11,26,.94) 0%,rgba(14,11,26,.7) 20%,transparent 55%)}
.th-hero-in{position:relative;max-width:1280px;margin:0 auto;padding:64px 48px;width:100%;display:flex;justify-content:center;
  animation:fadeUp 1s cubic-bezier(.16,.8,.24,1) both .6s}
.tw-theme .th-hero-cta{font-size:22px;padding:20px 54px;white-space:nowrap;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -5px 0 rgba(150,50,0,.35),0 0 0 6px rgba(242,145,42,.14);
  transition:transform .22s var(--th-spring),box-shadow .22s}
.tw-theme .th-hero-cta:hover{transform:translateY(-3px) scale(1.02);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(150,50,0,.35),0 0 0 10px rgba(242,145,42,.16)}
.tw-theme .th-hero-cta:active{transform:translateY(1px) scale(.99)}

/* ---- pre-register progress (only while pre-registration is open) ---- */
/* z-index keeps the card above the news section's backdrop, which starts right below it */
.th-pre{padding-top:72px;padding-bottom:28px;z-index:1}
.th-pre-frame{display:block;padding:8px;background:var(--th-panel);border:1px solid rgba(255,255,255,.07);border-radius:30px;color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 50px rgba(5,3,14,.35)}
.th-pre-frame:hover{color:inherit}
.th-pre-in{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);align-items:center;gap:28px 48px;padding:32px 40px;
  border-radius:23px;background:#120f24;border:1px solid rgba(255,255,255,.05)}
.th-pre-sum{display:flex;flex-direction:column;gap:8px}
.th-pre-lbl{font-size:16px;letter-spacing:.04em;line-height:1.5;color:#b8b6ca}
.th-pre-num{font-family:'Mitr','Kanit',sans-serif;font-size:clamp(52px,6vw,76px);font-weight:500;line-height:1.2;color:#fff;font-variant-numeric:tabular-nums}
.th-pre-unit{font-size:20px;font-weight:300;color:#b8b6ca;margin-left:10px}
.th-pre-next{font-size:16px;font-weight:300;color:#8f8ca6}
.th-pre-next b{color:#F7A03A;font-weight:500}
.th-pre-steps{position:relative;min-width:0}
.th-pre-track{position:absolute;top:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.08)}
.th-pre-fill{height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#EC6A17,#FFB347);transition:width 1.6s cubic-bezier(.16,.8,.24,1)}
.th-pre-grid{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.th-pre-ms{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;min-width:0}
.th-pre-node{width:12px;height:12px;border-radius:50%;background:#120f24;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 4px #120f24}
.th-pre-tile{position:relative;width:min(108px,100%);aspect-ratio:1/1;border-radius:24px;padding:4px;background:#171430;border:1px solid rgba(255,255,255,.07);
  transition:transform .28s var(--th-spring)}
.th-pre-tile:hover{transform:translateY(-3px)}
.th-pre-pic{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:4px;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#1c1938;color:#6f6c8c;opacity:.45}
.th-pre-ic{flex:none;display:block;background-repeat:no-repeat}
.th-pre-check{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FFB347,#EC6A17);box-shadow:0 0 0 3px #120f24}
.th-pre-target{font-size:17px;font-weight:500;letter-spacing:.02em;line-height:1;color:#8f8ca6;font-variant-numeric:tabular-nums}
.th-pre-name{font-size:12px;font-weight:300;line-height:1.4;color:#8f8ca6;margin-top:-6px;overflow-wrap:anywhere}
.th-pre-ms.next .th-pre-node{border-color:rgba(247,160,58,.6)}
.th-pre-ms.next .th-pre-tile{border-color:rgba(255,255,255,.16)}
.th-pre-ms.next .th-pre-pic{opacity:1}
.th-pre-ms.next .th-pre-target{color:#eef0f4}
.th-pre-ms.on .th-pre-node{background:#F7A03A;border-color:#F7A03A}
.th-pre-ms.on .th-pre-tile{background:linear-gradient(180deg,rgba(247,160,58,.22),rgba(236,106,23,.08));border-color:rgba(247,160,58,.45)}
.th-pre-ms.on .th-pre-pic{opacity:1;color:#FFB15C}
.th-pre-ms.on .th-pre-check{display:flex}
.th-pre-ms.on .th-pre-target{color:#F7A03A}

/* ---- news ---- */
.th-news{padding-top:56px;padding-bottom:84px}
.th-news .th-bg{top:0;bottom:-40px;--bg:url('/assets/img/theme/news-bg-map.jpg')}
.th-news .th-bg::before{background-position:center top;background-size:max(100vw,1900px) auto}
.th-news-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:36px}
.th-tabs{display:flex;gap:4px;padding:5px;border-radius:999px;background:#171430;border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);max-width:100%;overflow-x:auto;scrollbar-width:none}
.th-tabs::-webkit-scrollbar{display:none}
.th-tab{font-family:'Kanit',sans-serif;font-size:14px;font-weight:400;padding:9px 18px;border:1px solid transparent;border-radius:999px;background:transparent;color:#a4a2b8;cursor:pointer;white-space:nowrap}
.th-tab:hover{color:#fff;background:rgba(255,255,255,.09)}
.th-tab.on,.th-tab.on:hover{font-weight:500;color:var(--th-ink);border-color:#F7A03A;background:var(--th-grad);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(150,50,0,.35)}
.th-news-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.th-card{display:flex;flex-direction:column;padding:10px;background:var(--th-panel);border:1px solid rgba(255,255,255,.07);border-radius:26px;color:#eef0f4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .28s var(--th-spring),border-color .2s,box-shadow .25s}
/* a revealing card keeps its hover transitions (see the same note on .card in site.css) */
.tw-motion .th-home .th-card[data-reveal]{
  transition:opacity 1s cubic-bezier(.16,.8,.24,1) var(--rv-d,0s),translate 1s cubic-bezier(.16,.8,.24,1) var(--rv-d,0s),
             scale 1s cubic-bezier(.16,.8,.24,1) var(--rv-d,0s),transform .28s var(--th-spring),border-color .2s,box-shadow .25s}
.th-card:hover{color:#eef0f4;transform:translateY(-6px);border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 44px rgba(5,3,14,.5)}
.th-card .slot{height:176px;border-radius:18px;background:#221e44}
.th-card-tag{position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;font-size:11px;letter-spacing:.04em;color:#fff;
  background:rgba(14,11,26,.66);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 13px}
.th-card-body{padding:18px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.th-card h3{font-family:'Mitr','Kanit',sans-serif;font-size:18px;font-weight:400;margin:0;color:#fff;line-height:1.4;text-wrap:pretty}
.th-card p{font-size:13.5px;line-height:1.65;font-weight:300;color:#a4a2b8;margin:0;text-wrap:pretty}
.th-card-date{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;font-size:12.5px;color:#7c7a92}
.th-card-date::before{content:'';width:5px;height:5px;border-radius:50%;background:#F2912A}
.th-news-more{position:relative;display:flex;justify-content:center;margin-top:36px}
.th-pill-link{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;font-weight:300;line-height:1.6;color:#eef0f4;background:#171430;
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:13px 30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .22s var(--th-spring)}
.th-pill-link:hover{color:#eef0f4;transform:translateY(-2px)}
.th-pill-link i{font-style:normal;font-size:17px;line-height:1;color:#FFB15C}

/* ---- shared showcase: framed stage + caption (characters, game modes) ---- */
.th-frame{position:relative;padding:10px;border-radius:38px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 80px rgba(5,3,14,.5)}
.th-stage{position:relative;border-radius:30px;overflow:hidden;background:#171430}
.th-stage .slot{position:absolute;inset:0;opacity:0;visibility:hidden;background:#171430;transition:opacity .45s ease,visibility 0s linear .45s}
.th-stage .slot.on{opacity:1;visibility:visible;transition-delay:0s}
.th-stage-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(14,11,26,.55) 68%,rgba(14,11,26,.95) 100%)}
.th-count{position:absolute;top:24px;left:28px;display:inline-flex;gap:4px;padding:6px 14px;border-radius:999px;background:rgba(14,11,26,.62);
  border:1px solid rgba(255,255,255,.14);font-size:13.5px;color:rgba(255,255,255,.6);pointer-events:none}
.th-count b{color:#FFB15C;font-weight:500}
.th-stage .arrow-btn{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px}
.th-stage .arrow-btn.prev{left:22px}
.th-stage .arrow-btn.next{right:22px}
.th-cap{position:absolute;left:40px;right:40px;bottom:38px;pointer-events:none}
.th-chip{display:inline-flex;font-size:12.5px;color:#FFB15C;padding:4px 12px;border-radius:999px;background:rgba(242,145,42,.14);border:1px solid rgba(242,145,42,.25)}
.th-cap h3{font-family:'Mitr','Kanit',sans-serif;font-size:clamp(32px,3.8vw,54px);font-weight:500;margin:10px 0 12px;color:#fff;line-height:1.1}
.th-cap p{font-size:15.5px;line-height:1.75;color:#c6c4d6;max-width:560px;margin:0;font-weight:300;text-wrap:pretty}

/* ---- characters ---- */
.th-figs{position:relative;padding:96px 0 104px}
.th-figs .th-bg{--bg:url('/assets/img/theme/figures-bg-workshop.jpg')}
.th-figs-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 20% 30%,rgba(124,92,255,.12),transparent 70%)}
.th-figs-head{display:flex;justify-content:center;text-align:center;margin-bottom:40px}
.th-figs .th-stage{min-height:520px}
.th-fig-thumbs{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.th-fig-thumb{cursor:pointer;padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#171430;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);color:#b8b6ca;font-family:'Kanit',sans-serif;font-size:13.5px;font-weight:400;
  transition:transform .22s var(--th-spring),border-color .2s,color .2s}
.th-fig-thumb:hover{transform:translateY(-2px);border-color:rgba(242,145,42,.5)}
.th-fig-thumb.on,.th-fig-thumb.on:hover{border-color:#F7A03A;background:var(--th-grad);color:var(--th-ink);font-weight:500;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(150,50,0,.3)}

/* ---- game modes ---- */
.th-modes{padding-top:84px;padding-bottom:110px}
.th-modes .th-bg{--bg:url('/assets/img/theme/modes-bg-garden.jpg')}
.th-modes-head{position:relative;margin-bottom:38px}
.th-modes-col{position:relative;display:flex;flex-direction:column;gap:16px}
.th-modes .th-stage{min-height:clamp(360px,38vw,500px)}
.th-modes .th-count{top:22px;left:24px;font-size:13px}
.th-modes .th-stage .arrow-btn{width:48px;height:48px;font-size:20px}
.th-modes .th-stage .arrow-btn.prev{left:18px}
.th-modes .th-stage .arrow-btn.next{right:18px}
.th-modes .th-cap{left:32px;right:32px;bottom:30px}
.th-modes .th-cap h3{font-size:clamp(26px,2.8vw,38px);margin:10px 0 8px;line-height:1.15}
.th-modes .th-cap p{font-size:14.5px;line-height:1.65;max-width:480px}
.th-mode-thumbs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.th-mode-thumb{cursor:pointer;padding:22px 12px 18px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:#171430;color:#b8b6ca;
  font-family:'Mitr','Kanit',sans-serif;font-size:15px;font-weight:400;line-height:1.3;text-wrap:balance;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;transition:transform .22s var(--th-spring)}
.th-mode-thumb:hover{transform:translateY(-3px)}
.th-mode-thumb i{width:60px;height:60px;flex:none;background:rgba(196,194,214,.72);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.th-mode-thumb.on{border-color:#F7A03A;background:var(--th-grad);color:var(--th-ink);font-weight:500;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(150,50,0,.35),0 10px 24px rgba(5,3,14,.4)}
.th-mode-thumb.on i{background:var(--th-ink)}

/* =====================================================================
   LOG IN / SIGN UP
   ===================================================================== */
.tw-theme .center-page{padding:56px clamp(16px,4vw,48px) 72px}
.tw-theme .auth-box{max-width:620px;padding:10px;border-radius:38px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 80px rgba(5,3,14,.5);animation:fadeUp .6s ease both}
.th-auth-panel{padding:clamp(28px,4vw,52px) clamp(24px,4vw,48px);border-radius:30px;background:var(--th-panel)}
.th-auth-in{width:100%;max-width:490px;margin:0 auto;display:flex;flex-direction:column;text-align:center}
.th-auth-in h1{font-family:'Mitr','Kanit',sans-serif;font-size:clamp(26px,2.8vw,36px);font-weight:500;margin:0;color:#fff;line-height:1.2}
/* the tagline wraps inside the card here instead of running past it on one line */
.tw-theme .auth-sub{position:static;translate:none;width:auto;max-width:none;white-space:normal;color:#a4a2b8;margin:12px 0 32px}
.th-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;text-align:left}
.th-fields>*{min-width:0}
.th-fields>.full{grid-column:1/-1}
.tw-theme .field>span.lbl,.tw-theme .field .lbl{font-size:13px;font-weight:400;letter-spacing:.02em;color:#c4c2d6}
.tw-theme .input{background:#120f26;border-radius:16px;padding:14px 18px;box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.tw-theme .input::placeholder{color:#6a6784}
.tw-theme .input:-webkit-autofill,.tw-theme .input:-webkit-autofill:hover,.tw-theme .input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #120f26 inset;box-shadow:0 0 0 1000px #120f26 inset}
.tw-theme .input-wrap .input{padding-right:104px}
.tw-theme .input-btn{right:7px;min-width:0;color:#eef0f4;background:#2a2550;border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:7px 14px;
  transition:border-color .18s,scale .12s}
.tw-theme .input-btn:hover{background:#2a2550;border-color:rgba(255,255,255,.3)}
.tw-theme .input-btn:active{scale:.96}
.tw-theme .check{width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#1f1b42,#15122d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.25);transition:background .2s,border-color .2s,transform .2s var(--th-spring)}
.tw-theme .check:hover{border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.tw-theme .check:checked{border-color:#F7A03A;background:linear-gradient(180deg,#FFB347 0%,#F2912A 45%,#EC6A17 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(150,50,0,.35)}
.tw-theme .check:checked::after{width:10px;height:5px;border-color:var(--th-ink);border-width:0 0 2.4px 2.4px}
.tw-theme .terms-text{font-size:13.5px;color:#a4a2b8}
.tw-theme .terms-text .inline-link{color:#dcdae8;text-decoration-color:rgba(220,218,232,.3)}
.th-auth-row{display:flex;justify-content:flex-end;margin:16px 0 0;font-size:13.5px}
.th-auth-row a{color:#a4a2b8;transition:color .16s}
.th-auth-row a:hover{color:#FFB15C}
.tw-theme .th-submit{width:100%;padding:16px 24px;font-size:18px}
.th-auth-alt{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:24px;font-size:13.5px;color:#8f8ca6}
.th-auth-alt a{display:inline-block;color:#FFB15C;padding-bottom:2px;background:linear-gradient(#FFB15C,#FFB15C) left bottom/0% 2px no-repeat;transition:background-size .25s ease}
.th-auth-alt a:hover{background-size:100% 2px}
.th-google{min-height:44px;color-scheme:light;display:flex;justify-content:center}
/* sign-up in two steps: progress bars, the confirmed address, small hints under a field */
.th-steps{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.th-steps i{width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
.th-steps i.on{background:linear-gradient(90deg,#EC6A17,#FFB347)}
.th-step-lbl{font-size:12.5px;letter-spacing:.03em;color:#FFB15C;margin-bottom:14px}
.th-hint{font-size:12px;font-weight:300;line-height:1.55;color:#7c7a92}
.th-email-chip{display:flex;align-items:center;gap:12px;padding:11px 16px 11px 12px;border-radius:16px;text-align:left;
  background:rgba(125,220,154,.06);border:1px solid rgba(125,220,154,.24)}
.th-email-ok{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0e2417;background:#7ddc9a}
.th-email-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.th-email-txt b{font-size:14.5px;font-weight:400;color:#eef0f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-email-txt small{font-size:12px;font-weight:300;color:#7ddc9a}
.th-email-chip .inline-link{flex:none;font-size:12.5px;font-weight:300;color:#b8b6ca;text-decoration-color:rgba(184,182,202,.35)}
.th-email-chip .inline-link:hover{color:#eef0f4}

@media (max-width:860px){
  .tw-theme .nav{padding-left:20px}
  .th-wrap,.th-hero-in{padding-left:22px;padding-right:22px}
  .tw-theme .footer{padding:18px 22px}
  .tw-theme .footer-copy{margin:0}
  .th-pre-in{grid-template-columns:1fr;padding:26px 22px}
  .th-cap,.th-modes .th-cap{left:24px;right:24px;bottom:26px}
  .th-figs .th-stage{min-height:440px}
  .th-stage .arrow-btn{top:38%}
}
@media (max-width:560px){
  .tw-theme .nav-register{padding:11px 18px;font-size:15px}
  .tw-theme .nav-link{padding:10px 10px}
  .tw-theme .th-hero-cta{font-size:19px;padding:17px 38px}
  .th-fields{grid-template-columns:1fr}
  .th-mode-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){
  .tw-theme .btn-cta:hover,.tw-theme .btn-ghost:hover,.th-card:hover,.th-pill-link:hover,.th-fig-thumb:hover,.th-mode-thumb:hover,
  .th-pre-tile:hover,.tw-theme .social-row a:hover,.tw-theme .modal-close:hover,.tw-theme .post-close:hover{transform:none}
  .tw-theme .arrow-btn:hover{translate:none}
}