/* TCHH homepage — real responsive layout modeled on approved reference screenshot */
:root{--navy:#071d39;--navy2:#0b2f55;--gold:#e9c37c;--gold2:#fff2be;--ink:#07172e;--cream:#f5f7ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body.tchh-landing{margin:0;min-width:320px;background:#c8e8f8;color:var(--ink);font:14px/1.4 Georgia,"Times New Roman",serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.tchh-landing button:focus-visible,.tchh-landing a:focus-visible,.tchh-landing input:focus-visible{outline:3px solid #ffde64;outline-offset:2px}
.world-background{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 17%,#fff 0%,rgba(255,255,255,.4) 24%,transparent 53%),radial-gradient(ellipse at 4% 65%,#6fb4e5,transparent 28%),radial-gradient(ellipse at 95% 64%,#5fa8d6,transparent 24%),linear-gradient(180deg,#90c6ee 0%,#d1eaff 38%,#a0cbe4 70%,#c5eaf9 100%)}.world-background:after{content:"";position:absolute;inset:25% 0 0;background:linear-gradient(155deg,transparent 0 29%,rgba(36,111,168,.18) 29% 33%,transparent 33% 49%,rgba(28,110,170,.14) 49% 53%,transparent 53%),linear-gradient(205deg,transparent 0 29%,rgba(43,122,181,.14) 29% 33%,transparent 33% 49%,rgba(60,131,182,.16) 49% 53%,transparent 53%);opacity:.8}
.header{height:52px;position:relative;z-index:20;background:linear-gradient(#0b2649,#03172e);border-bottom:3px double #f5d894;box-shadow:0 4px 20px rgba(5,28,55,.38)}.top-nav{max-width:1400px;margin:0 auto;height:49px;display:flex;align-items:stretch;justify-content:center;gap:0;padding:0 12px;position:relative}.top-nav:before,.top-nav:after{content:"✥";position:absolute;color:#ffde93;font-size:26px;top:10px;text-shadow:0 0 8px #eca951}.top-nav:before{left:0}.top-nav:after{right:0}.nav-logo{display:none}.nav-link{height:48px;min-width:110px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;color:#f6e9d7;font:700 16px/1.1 Georgia,serif;white-space:nowrap;text-shadow:0 1px 2px #000;border-right:1px solid rgba(255,217,148,.14);transition:background .2s,color .2s}.nav-link:first-of-type{margin-left:25px}.nav-link:hover,.nav-link.selected{background:linear-gradient(180deg,rgba(235,180,84,.28),rgba(87,58,26,.4));color:#ffeab2}.nav-link.selected{border:1px solid rgba(255,231,163,.5);clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0% 50%)}.nav-external{display:flex;align-items:center;gap:8px;padding:0 26px 0 15px}.nav-external a{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#255398,#0d2c56);color:white;font:bold 20px Arial;box-shadow:0 0 0 1px #507dab}.mobile-toggle{display:none;background:none;border:0;color:#ffe6aa;font-size:24px}
.hero{max-width:1672px;min-height:386px;margin:0 auto;position:relative;isolation:isolate;background:radial-gradient(ellipse 34% 70% at 54% 44%,rgba(255,255,255,.94),rgba(205,230,251,.6) 55%,transparent),linear-gradient(180deg,rgba(217,239,255,.46),transparent 80%),url("../img/tchh-hero-background.svg") center 24%/cover no-repeat;overflow:visible}.hero:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 30% 35% at 2% 92%,#b5eaf7,transparent),radial-gradient(ellipse 31% 37% at 98% 93%,#96c3f3,transparent),linear-gradient(transparent 65%,rgba(229,248,255,.86));pointer-events:none}.hero:after{content:"";z-index:-1;position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,#dff3ffbd)}
.hero-castle{position:absolute;right:7%;top:32px;width:31%;height:215px;opacity:.55;filter:drop-shadow(0 14px 8px #8daac6);background:linear-gradient(180deg,transparent 0 46%,#8bc4ed 47% 50%,transparent 51%),repeating-linear-gradient(90deg,transparent 0 16%,#4583b7 16% 17%,transparent 17% 23%);clip-path:polygon(0 65%,6% 60%,6% 42%,11% 42%,16% 32%,20% 42%,22% 42%,22% 68%,29% 60%,29% 35%,32% 35%,37% 19%,42% 35%,46% 35%,46% 54%,49% 48%,49% 31%,53% 31%,60% 7%,66% 31%,69% 31%,69% 45%,74% 38%,77% 24%,83% 38%,88% 38%,88% 65%,95% 59%,100% 80%,100% 100%,0 100%)}.hero-petals{position:absolute;top:16px;pointer-events:none;font-size:40px;letter-spacing:4px;color:#e88bad;text-shadow:1px 2px 0 #fff,0 3px 20px #ee80a6}.hero-petals.left{left:1%;transform:rotate(-18deg);width:220px}.hero-petals.right{right:0;top:185px;transform:rotate(22deg)}.hero-label{position:absolute;top:58px;font:italic bold 21px/1.5 "Times New Roman",serif;text-align:center;color:#14243c;transform:rotate(-3deg);text-shadow:0 1px #fff;pointer-events:none}.left-label{left:5.4%}.right-label{right:5.4%;transform:rotate(3deg)}
.hero-center{position:relative;z-index:2;text-align:center;padding-top:38px;margin:auto;max-width:720px}.hero-sky-kicker{font:700 12px Arial,sans-serif;letter-spacing:5px;color:#426a92;margin-bottom:5px;text-shadow:0 1px #fff}.hero-title{margin:0;display:flex;flex-direction:column;align-items:center;gap:0;font:italic 900 clamp(44px,5.8vw,82px)/.96 Georgia,"Times New Roman",serif;letter-spacing:-3px;color:#f6d285;-webkit-text-stroke:1.7px #061c41;text-shadow:0 2px 0 #fff6cf,3px 5px 0 #16467c,5px 8px 1px #072849,0 0 17px #e5f7ff,0 0 42px #67ace1}.hero-title span:last-child{margin-left:46px}.hero-slogan{font:900 14px Arial,sans-serif;margin:14px auto 0;letter-spacing:.4px;text-shadow:0 2px 2px #fff;color:#142d48}.hero-ctas{position:absolute;z-index:4;left:50%;bottom:7px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(175px,1fr));gap:15px;width:min(785px,75%)}.gold-btn{height:74px;border:2px solid #e7b95f;border-radius:12px;box-shadow:0 2px 0 #5e421e,0 4px 16px #26558566,inset 0 0 0 3px #f8de98aa,inset 0 0 0 5px #603d2180;display:flex;align-items:center;justify-content:center;gap:13px;color:white;text-shadow:0 2px 3px #111;transition:transform .15s,filter .15s}.gold-btn:hover{transform:translateY(-3px);filter:brightness(1.13)}.gold-btn strong{display:block;font:bold 24px/1.05 Georgia,serif;white-space:nowrap}.gold-btn small{display:block;margin-top:4px;font:12px Arial,sans-serif;white-space:nowrap}.action-icon{font:40px/1 Georgia,serif;text-shadow:0 0 9px #ffd68d;color:#ffdfa6}.red-btn{background:linear-gradient(#aa090b,#ed1720 42%,#81030d)}.blue-btn{background:linear-gradient(#104c9c,#116ddd 42%,#0e306b)}.beige-btn{background:linear-gradient(#ffe99a,#e2aa45 52%,#9f6023);color:#4b240f;text-shadow:0 1px #fff7d5}.beige-btn .action-icon{color:#633d15}.beige-btn small{color:#572d18}
.content-shell{width:min(1260px,95%);margin:-1px auto 0;position:relative;z-index:3}.main-grid{display:grid;grid-template-columns:304px minmax(0,1fr) 304px;gap:15px;align-items:stretch}.ornate-panel{position:relative;min-height:356px;border:3px ridge #ecc574;box-shadow:0 3px 14px #0a396b70,inset 0 0 0 2px rgba(255,239,190,.76);border-radius:17px;padding:13px 15px}.ornate-corner{position:absolute;width:35px;height:35px;border:3px solid #e9c37c;pointer-events:none;z-index:5}.corner-tl{left:-7px;top:-7px;border-bottom:0;border-right:0;border-radius:14px 0 0 0}.corner-tr{right:-7px;top:-7px;border-bottom:0;border-left:0;border-radius:0 14px 0 0}.corner-bl{left:-7px;bottom:-7px;border-top:0;border-right:0;border-radius:0 0 0 14px}.corner-br{right:-7px;bottom:-7px;border-top:0;border-left:0;border-radius:0 0 14px 0}.dark-panel{background:linear-gradient(130deg,#153a5bfa,#05172dfc 57%,#14314cfc);color:#fff5d3}.dark-panel:before{content:"";position:absolute;inset:7px;border:1px solid #8f7647;border-radius:11px;pointer-events:none}.panel-heading{margin:0 0 10px;text-align:center;font:bold 18px/1.2 Georgia,serif;color:#fff1bd;text-shadow:0 2px 2px #08152b;letter-spacing:.2px}.game-form{position:relative;display:flex;flex-direction:column;gap:7px;padding:0 8px}.field{min-height:38px;background:linear-gradient(#203e5b,#102b49);border:1px solid #6c7890;box-shadow:inset 0 0 4px #031a31;border-radius:3px;color:#f5f5f2;display:flex;align-items:center;padding:0 9px;gap:8px}.field-icon{color:#e8c77d;font-size:17px;line-height:1;width:18px;text-align:center}.field input{color:white;width:100%;border:0;outline:0;background:transparent;font:13px Arial,sans-serif}.field input::placeholder{color:#d6dce2}.server-field{height:49px;flex-wrap:wrap;gap:4px 6px;padding-top:5px;padding-bottom:5px}.server-caption{font:11px Arial,sans-serif;width:calc(100% - 26px);color:#a9b9cb}.server-field strong{margin-left:23px;font:700 12px Arial,sans-serif;color:#fae2ac}.helper-line{display:flex;justify-content:space-between;align-items:center;font:11px Arial,sans-serif;padding:4px 0 5px;gap:4px}.helper-line label{display:flex;gap:4px;align-items:center;white-space:nowrap}.helper-line input{accent-color:#56a1ec;margin:0}.helper-line a{text-decoration:underline;white-space:nowrap}.submit-btn{width:100%;min-height:43px;background:linear-gradient(#d42c38,#9e0714 50%,#7c0615);border:2px ridge #eabb6e;box-shadow:inset 0 0 0 1px #6f1623,0 2px 8px #061526;color:#fff0cf;font:bold 20px Georgia,serif;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.submit-btn:hover{filter:brightness(1.17)}.register-hint{font:11px Arial,sans-serif;text-align:center;margin:0 0 5px}.register-hint a{text-decoration:underline}.loggedin{display:grid;gap:20px;text-align:center;padding:40px 10px}.login-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 2px 0;position:relative}.login-shortcuts a{display:flex;flex-direction:column;align-items:center;gap:4px;font:10px Arial,sans-serif}.login-shortcuts span{width:39px;height:35px;border:1px solid #a88d54;display:grid;place-items:center;color:#ffdf95;background:#0c2342;font:26px Georgia,serif;border-radius:7px}.login-shortcuts a:hover span{background:#224979}
.news-panel{background:linear-gradient(180deg,#fff,#eaf3ff);border-color:#efd39b;padding:11px 12px}.news-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;gap:10px}.tab-group{display:flex;gap:6px}.tab{font:bold 13px Georgia,serif;min-height:36px;padding:0 16px;background:linear-gradient(#fff,#e3e9f4);color:#1b2c49;border:1px solid #ced8ea;border-radius:4px}.tab:hover{filter:brightness(.95)}.tab.active{background:linear-gradient(#244b74,#062742);color:white;border-color:#082b4c;box-shadow:inset 0 0 0 1px #b4d0e4}.news-all{font:12px Arial,sans-serif;background:#edf4fd;border:1px solid #c8d6e6;padding:6px 9px;border-radius:3px;white-space:nowrap}.news-layout{display:grid;grid-template-columns:55% minmax(0,1fr);gap:9px;min-height:285px}.feature-card{position:relative;min-height:285px;background:#7faacf;display:block;overflow:hidden;border:2px solid #b5cbe2;border-radius:5px}.feature-card img{width:100%;height:100%;min-height:285px;object-fit:cover;display:block;position:absolute;inset:0;filter:saturate(1.2)}.feature-card:after{content:"";position:absolute;inset:25% 0 0;background:linear-gradient(transparent,#071b41c9)}.feature-caption{position:absolute;z-index:1;bottom:20px;left:19px;right:10px;color:#fff8e5;text-shadow:1px 2px 5px #00122e}.feature-caption>span{display:inline-block;background:#9f631c;border:1px solid #ffda79;padding:1px 9px;font:bold 10px Arial,sans-serif;transform:skew(-8deg)}.feature-caption strong{display:block;font:italic bold clamp(23px,2.4vw,37px) Georgia,serif;line-height:1.12}.feature-caption small{display:block;font:bold 12px Arial,sans-serif;margin-top:6px}.news-feed{display:flex;flex-direction:column;gap:0;min-width:0}.news-item{display:grid;grid-template-columns:66px 1fr;gap:9px;min-height:67px;align-items:center;border-bottom:1px solid #d7e0ec;padding:4px 0}.news-item:hover strong{color:#af6210}.news-thumb{display:grid;place-items:center;height:57px;border-radius:4px;color:#ffe3a2;font-size:30px;border:1px solid #94adcb;background:radial-gradient(circle at 70% 20%,#dca8da,#5b89be 40%,#132d57 95%)}.news-item strong{font:700 12px/1.28 Arial,sans-serif;color:#15233b;display:block}.news-item small{font:11px Arial,sans-serif;color:#6b809d;display:block;margin-top:4px}.news-empty{padding:33px 8px;color:#273d55;font:13px/1.7 Arial,sans-serif}.news-empty strong{font-size:15px}.news-empty a{color:#244f8b;text-decoration:underline}
.ranking-panel{padding:13px 13px 10px}.rank-tabs{display:flex;gap:4px;margin-top:8px}.rank-tabs button{flex:1;border:1px solid #4a7097;background:#102c4f;color:#e5ebf4;min-height:34px;padding:4px 2px;font:700 11px/1.15 Arial,sans-serif}.rank-tabs button.selected{background:linear-gradient(#ffe4a1,#b88f49);color:#262016;border-color:#f4d580}.rank-table{margin-top:9px;font:11px Arial,sans-serif}.rank-row{display:grid;grid-template-columns:38px 1fr 73px;align-items:center;gap:3px;padding:5px 2px;border-bottom:1px solid rgba(207,225,239,.14)}.rank-head{font-weight:bold;color:#ccd8e3}.rank-placeholder{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:197px;color:#d6e2f5;padding:10px}.rank-placeholder .rank-medal{font-size:49px;color:#d9b76a}.rank-placeholder strong{font:700 13px Arial,sans-serif}.rank-placeholder p{font:11px/1.5 Arial,sans-serif;max-width:225px;color:#b7c7d8}.rank-more{display:block;text-align:center;color:#eee6d7;text-decoration:underline;font:11px Arial,sans-serif;margin:9px 0 0}
.feature-banners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:14px}.feature-banner{height:113px;position:relative;overflow:hidden;border:3px ridge #e6c27b;border-radius:6px;padding:13px 19px;display:flex;flex-direction:column;justify-content:center;color:#fff0ce;text-shadow:0 2px 3px #08182b;box-shadow:0 5px 14px rgba(19,67,103,.25)}.feature-banner:before{content:"";position:absolute;inset:4px;border:1px solid #e4bc6a66;pointer-events:none}.feature-banner:hover{filter:brightness(1.2)}.feature-banner small{font:bold 16px Georgia,serif;z-index:2}.feature-banner strong{font:bold 27px/1.18 Georgia,serif;z-index:2}.feature-banner span:not(.banner-glyph){font:bold 11px Arial,sans-serif;z-index:2}.banner-glyph{position:absolute;right:18px;top:9px;font:92px/1 Georgia,serif;color:#fff9e2b8;text-shadow:0 0 20px #d1efff}.feature-purple{background:radial-gradient(circle at 82% 50%,#97a8e5,transparent 30%),linear-gradient(125deg,#061d40,#36537a 63%,#b77bb4)}.feature-blue{background:radial-gradient(circle at 82% 50%,#82c8f6,transparent 34%),linear-gradient(115deg,#051e48,#135293 75%,#58b4e7)}.feature-rose{background:radial-gradient(circle at 85% 54%,#e49ccc,transparent 40%),linear-gradient(115deg,#09214b,#4f457e 62%,#9b4d82)}.site-footer{min-height:82px;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:center;padding:15px;color:#244663;font:12px Arial,sans-serif}.site-footer div{display:flex;gap:17px}.site-footer a:hover{text-decoration:underline}
@media(max-width:1160px){.top-nav:before,.top-nav:after{display:none}.nav-link{min-width:auto;font-size:14px;padding:0 11px}.hero-label{display:none}.main-grid{grid-template-columns:270px minmax(0,1fr) 260px;gap:10px}.ornate-panel{padding:12px 10px}.news-layout{grid-template-columns:52% 1fr}.hero-ctas{width:min(760px,86%)}}
@media(max-width:920px){.nav-link{font-size:12px;padding:0 8px}.top-nav{padding:0 4px}.nav-external{padding-right:4px}.main-grid{grid-template-columns:1fr 1fr}.news-panel{grid-column:1/-1;grid-row:1}.login-panel{grid-row:2}.ranking-panel{grid-row:2}.hero{min-height:345px}.hero-ctas{width:92%}.hero-title{font-size:70px}}
@media(max-width:630px){.header,.top-nav{height:54px}.top-nav{justify-content:space-between;padding:0 14px}.nav-logo{display:flex;align-items:center}.nav-logo img{height:43px;width:43px}.nav-link{display:none}.nav-external{margin-left:auto}.mobile-toggle{display:block}.top-nav.mobile-open{height:auto;align-items:flex-start;flex-wrap:wrap;background:#071b36;box-shadow:0 7px 18px #0005}.top-nav.mobile-open .nav-logo{height:52px}.top-nav.mobile-open .nav-link{display:flex;flex-basis:100%;height:43px;justify-content:flex-start;padding-left:22px;border-top:1px solid #2f527a;font-size:14px}.top-nav.mobile-open .nav-link.selected{clip-path:none}.hero{min-height:310px}.hero-center{padding-top:40px}.hero-title{font-size:clamp(45px,11vw,69px)}.hero-sky-kicker{font-size:9px;letter-spacing:2px}.hero-slogan{font-size:10px;margin-top:16px;max-width:90%}.hero-petals.left{font-size:26px;width:120px;top:6px}.hero-petals.right{display:none}.hero-ctas{bottom:12px;width:96%;gap:4px;grid-template-columns:repeat(3,minmax(0,1fr))}.gold-btn{height:60px;border-radius:5px;gap:4px;box-shadow:inset 0 0 0 2px #e4b958}.gold-btn strong{font-size:clamp(10px,3vw,15px)}.gold-btn small{font-size:9px}.action-icon{font-size:20px}.content-shell{width:94%;margin-top:5px}.main-grid{display:flex;flex-direction:column;gap:12px}.news-panel{order:1}.login-panel{order:2}.ranking-panel{order:3}.ornate-panel{min-height:auto}.news-layout{grid-template-columns:1fr}.feature-card{height:235px;min-height:235px}.feature-card img{min-height:235px}.news-feed{padding:5px 4px}.game-form{max-width:360px;margin:auto;width:100%}.login-shortcuts{max-width:340px;margin:0 auto}.ranking-panel{min-height:330px}.feature-banners{grid-template-columns:1fr;gap:8px}.feature-banner{height:95px}.site-footer{flex-direction:column;gap:8px}.site-footer div{gap:10px}.hero-castle{right:0;width:55%;opacity:.32}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}