/* TypeArena Plus — integrated clubhouse visual system */
:root{--accent:var(--violet);--typing-size:22px;--shadow:0 18px 55px #0003}
body{background:radial-gradient(ellipse at 5% 0%,#613fc233,transparent 50%),radial-gradient(ellipse at 98% 40%,#00d6bd15,transparent 50%),var(--bg)}
body[data-theme="neon"]{--bg:#080911;--panel:#151329;--line:#493775;--text:#f5f0ff;--muted:#b3a0ce;--mint:#42ffd4;--violet:#e78bff;--amber:#dfff78}
body[data-theme="pastel"]{--bg:#181b2b;--panel:#252c42;--line:#46506d;--text:#fff1ec;--muted:#c1c1d5;--mint:#b3edd6;--violet:#e0b6f5;--amber:#ffe5a2;--coral:#ffbecb}
body[data-theme="retro"]{--bg:#0d1b17;--panel:#142921;--line:#345542;--text:#e3f4df;--muted:#a0bea1;--mint:#bcff89;--violet:#f6cc76;--amber:#f5c46c;--coral:#ff9d81}
body[data-theme] .panel{background:linear-gradient(145deg,var(--panel),var(--bg));box-shadow:var(--shadow)}
body[data-theme] input,body[data-theme] textarea,body[data-theme] select,body[data-theme] .target,body[data-theme] .lane,body[data-theme] .message,body[data-theme] .metrics div{background:var(--bg);color:var(--text);border-color:var(--line)}
body[data-theme] button{border-color:var(--line);background:var(--panel);color:var(--text)}
body[data-theme] .primary{background:linear-gradient(125deg,var(--violet),var(--mint));color:#10151f;border-color:transparent}
button{transition:transform .16s,filter .16s}button:active:not(:disabled){transform:scale(.97)}
.club-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:5px 0 24px}.club-title{font-size:clamp(28px,4vw,43px);margin:4px 0 7px;letter-spacing:-1.8px}
.club-tabs{display:flex;gap:8px;overflow:auto;padding:6px 0 18px;margin-bottom:8px}.club-tabs button{white-space:nowrap;border-radius:99px;background:transparent;min-height:42px}.club-tabs button.selected{background:var(--violet);color:#10151f;border-color:transparent}
.club-view{margin-bottom:20px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.badge-strip{display:flex;gap:8px;flex-wrap:wrap}.badge-strip .badge{font-size:10px}
.intro em{font-style:normal;background:linear-gradient(90deg,var(--violet),var(--mint));background-clip:text;color:transparent}.hero-track{position:relative;height:75px;border:1px solid var(--line);border-radius:18px;margin-top:24px;background:#b6a0ff08;overflow:hidden}.hero-track i{position:absolute;left:20px;right:20px;top:40px;border-top:1px dashed var(--line)}.hero-track span{position:absolute;font-size:27px;top:14px;left:15%;animation:hero-race 5s ease-in-out infinite alternate}.hero-track b{position:absolute;right:18px;bottom:8px;font-size:8px;letter-spacing:2px;color:var(--muted)}
.profile-preview{min-width:165px;border-radius:16px;padding:15px;text-align:center;background:linear-gradient(135deg,#b6a0ff55,#243259)}.profile-preview .avatar{font-size:37px;display:block}.profile-preview[data-banner="mint"]{background:linear-gradient(135deg,#7aefc455,#183c39)}.profile-preview[data-banner="sunset"]{background:linear-gradient(135deg,#ff9baf66,#775730)}.profile-preview[data-banner="ocean"]{background:linear-gradient(135deg,#55b5ff66,#273b76)}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin:14px 0}.achievement{padding:18px;border:1px solid var(--line);border-radius:15px;background:#b6a0ff08}.achievement .icon{font-size:28px}.achievement.locked{opacity:.55}.achievement p{font-size:11px;color:var(--muted);margin-top:6px}
.target{font-size:var(--typing-size);color:var(--muted)}body[data-caret="block"] .target .cursor{background:var(--amber);color:var(--bg);border:0;margin:0}body[data-caret="underline"] .target .cursor{border-left:0;margin:0;border-bottom:3px solid var(--amber)}
.race-track{height:42px;position:relative;margin:13px 18px 2px}.race-track:before{content:"";position:absolute;left:0;right:0;top:27px;border-top:2px dashed var(--line)}.race-track .runner{position:absolute;top:0;left:0;font-size:26px;transform:translateX(-50%);transition:left .45s ease;filter:drop-shadow(0 5px 8px #0004)}.race-track .finish{position:absolute;right:-12px;top:11px;font-size:16px}.race-track .trail{position:absolute;left:0;top:27px;height:2px;background:linear-gradient(90deg,var(--violet),var(--mint));transition:width .45s}.lane.own{border-color:var(--mint)}.lane-head b{font-size:13px}.lane-head .live-label{font-size:10px}.inline-actions{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0}.lane .inline-actions{margin:4px 0 0}.lane .inline-actions button{font-size:10px;padding:4px 9px;min-height:29px}
.chat{max-height:820px;min-height:520px}.chat-tools{display:flex;gap:5px;margin:10px 0}.chat-tools button{font-size:10px;padding:6px 8px;min-height:30px}.chat.collapsed{min-height:0;max-height:175px}.chat.collapsed .messages,.chat.collapsed #chat-form,.chat.collapsed #chat-admin,.chat.collapsed .reactions{display:none}.reactions{display:flex;gap:5px;flex-wrap:wrap}.reactions button{font-size:19px;min-height:35px;padding:4px 8px}.message-actions{display:flex;gap:5px;flex-wrap:wrap}.reaction-pop{display:inline-block;margin-left:7px;animation:reaction-pop .4s ease}.chat #chat-admin details{font-size:11px;margin:7px 0}.chat #chat-admin input{font-size:12px}.chat #chat-admin{max-height:210px;overflow:auto}.message{animation:message-in .2s ease}
.duels-panel{margin-top:18px}.duel-card{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid var(--line);padding:14px;border-radius:14px;margin:10px 0}.duel-card p{font-size:12px;color:var(--muted)}
.big-clock{font:700 34px ui-monospace,monospace;color:var(--mint)}.ghost-lane{margin:15px 0}.ghost-track{position:relative;height:46px;background:#b6a0ff08;border:1px solid var(--line);border-radius:12px;overflow:hidden}.ghost-track span{position:absolute;top:7px;transition:left .15s;font-size:24px}.ghost-track .ghost{opacity:.45}.report-box:not(:empty){border:1px solid var(--line);border-radius:15px;padding:18px;margin:17px 0;background:#7aefc407}.report-box h3{margin-bottom:8px}.error-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.error-chips span{background:#ff9baf15;border:1px solid #ff9baf44;padding:5px 9px;border-radius:7px;font-family:monospace}.result-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:15px}.result-table td,.result-table th{padding:12px 9px;text-align:left;border-bottom:1px solid var(--line)}.table-scroll{overflow:auto}.result-table th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.medal{font-size:24px}.cert-card .inline-actions button{font-size:11px}.cert-card .sharing-url{font-size:10px;overflow-wrap:anywhere;user-select:all;color:var(--mint)}.cert-card .stamp{font-size:36px;float:right}
#result-canvas{width:100%;height:auto;border-radius:16px;margin:18px 0}#celebration{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}.confetti{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:confetti-fall 1.8s ease-out forwards}.verify-page{max-width:750px;margin:8vh auto}.verify-page h1{font-size:38px}.verify-page h2{margin:18px 0}.verify-page .metrics{grid-template-columns:1fr 1fr}.verify-page p{margin:10px 0}
@keyframes hero-race{to{left:75%}}@keyframes reaction-pop{from{transform:scale(.4)}to{transform:scale(1)}}@keyframes message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes confetti-fall{to{transform:translateY(105vh) rotate(500deg);opacity:0}}
body[data-motion="reduce"] *,body[data-motion="reduce"] *:before,body[data-motion="reduce"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:760px){.club-top{display:block}.badge-strip{margin-top:12px}.club-title{font-size:30px}.club-tabs button{font-size:11px;padding:8px 12px}.section-heading{align-items:flex-start}.profile-preview{min-width:115px;padding:10px}.profile-preview .avatar{font-size:28px}.lane-head{flex-direction:column;gap:4px}.chat.open{display:flex}.chat.collapsed.open{height:auto;min-height:0}.result-table{white-space:nowrap}.hero-track{height:60px}.club-tabs{position:relative}}