:root{ --bg:#07111f; --panel:rgba(10,20,34,.42); --panel-2:rgba(10,20,34,.58); --glass:rgba(255,255,255,.12); --glass-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.22); --line-soft:rgba(255,255,255,.12); --text:#f7fbff; --muted:#d7e7f4; --shadow:0 18px 60px rgba(0,0,0,.28); --blur:blur(18px); --radius-xl:34px; --radius-lg:24px; --radius-md:18px; --radius-sm:14px; --cyan:#59d9ff; --cyan-2:#2aa8ff; --blue:#2468ff; --gold:#ffd24d; --gold-2:#ffb300; --green:#86ef67; --green-2:#35d267; --pink:#ff82d7; --purple:#8c79ff; --board-size:min(86vw,620px); --cell-gap:12px; --hero-overlay:linear-gradient(90deg, rgba(7,15,27,.40) 0%, rgba(7,15,27,.18) 35%, rgba(7,15,27,.08) 60%, rgba(7,15,27,.04) 100%); --surface-overlay:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)); --glass-fill:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{ margin:0; padding:0; min-height:100%; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); overflow-x:hidden; background:#0a1320; } body{position:relative} /* THEMES */ body.theme-ecosystem{ background: radial-gradient(circle at 50% 18%, rgba(255,220,120,.32), transparent 14%), linear-gradient(180deg, #7db8ff 0%, #f8cfa1 24%, #a6dbff 38%, #61b7d8 56%, #3a9ed0 66%, #2077a9 100%); } body.theme-galaxy{ background: radial-gradient(circle at 50% 28%, rgba(250,236,151,.16), transparent 10%), radial-gradient(circle at 20% 25%, rgba(97,192,255,.13), transparent 16%), radial-gradient(circle at 78% 22%, rgba(194,121,255,.11), transparent 18%), linear-gradient(180deg, #020513 0%, #0a1030 28%, #131d4d 58%, #1d255d 100%); } body.theme-forest{ background: radial-gradient(circle at 50% 16%, rgba(255,229,131,.16), transparent 12%), linear-gradient(180deg, #9fd7ff 0%, #d4f0ff 22%, #74b86a 48%, #2f7f43 72%, #1d5c31 100%); } body.theme-waterfall{ background: radial-gradient(circle at 50% 16%, rgba(255,241,170,.16), transparent 12%), linear-gradient(180deg, #98d6ff 0%, #d9f5ff 22%, #90d8ee 40%, #58b8d9 58%, #267aa0 76%, #1f5e87 100%); } body.theme-desert{ background: radial-gradient(circle at 50% 18%, rgba(255,227,141,.22), transparent 12%), linear-gradient(180deg, #8fd0ff 0%, #ffe2b0 32%, #d8a35b 58%, #b97c39 78%, #865729 100%); } body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), transparent 26%), linear-gradient(to top, rgba(255,255,255,.05), transparent 18%); } /* SCENE */ .nature-bg,.scene-layer,.theme-stage,.theme-atmosphere{ position:fixed; inset:0; pointer-events:none; } .nature-bg,.theme-stage{z-index:0} .scene-layer,.theme-atmosphere{z-index:1} .particles,.particles::before,.particles::after{ position:absolute; inset:0; content:""; } .particles::before{ background-image: radial-gradient(circle at 8% 18%, rgba(255,255,255,.95) 0 2px, transparent 3px), radial-gradient(circle at 17% 36%, rgba(115,240,255,.95) 0 3px, transparent 4px), radial-gradient(circle at 29% 24%, rgba(255,255,255,.92) 0 2px, transparent 3px), radial-gradient(circle at 41% 46%, rgba(115,240,255,.92) 0 3px, transparent 4px), radial-gradient(circle at 52% 20%, rgba(255,255,255,.95) 0 2px, transparent 3px), radial-gradient(circle at 64% 38%, rgba(115,240,255,.95) 0 3px, transparent 4px), radial-gradient(circle at 77% 28%, rgba(255,255,255,.92) 0 2px, transparent 3px), radial-gradient(circle at 89% 44%, rgba(115,240,255,.92) 0 3px, transparent 4px), radial-gradient(circle at 12% 76%, rgba(255,255,255,.92) 0 2px, transparent 3px), radial-gradient(circle at 28% 84%, rgba(115,240,255,.92) 0 3px, transparent 4px), radial-gradient(circle at 47% 78%, rgba(255,255,255,.92) 0 2px, transparent 3px), radial-gradient(circle at 68% 86%, rgba(115,240,255,.92) 0 3px, transparent 4px), radial-gradient(circle at 88% 76%, rgba(255,255,255,.92) 0 2px, transparent 3px); opacity:.75; filter:blur(.2px); animation:floatSparkle 9s linear infinite; } .particles::after{ background:radial-gradient(circle at 50% 54%, rgba(255,255,255,.18), transparent 34%); } .orb{ position:absolute; border-radius:50%; filter:blur(56px); opacity:.8; } .orb-a{ width:340px;height:340px;left:-50px;top:40px; background:radial-gradient(circle, rgba(97,200,255,.28), transparent 68%); animation:orbA 13s ease-in-out infinite; } .orb-b{ width:380px;height:380px;right:-60px;top:34px; background:radial-gradient(circle, rgba(150,223,255,.26), transparent 68%); animation:orbB 15s ease-in-out infinite; } .orb-c{ width:360px;height:360px;left:38%;bottom:-90px; background:radial-gradient(circle, rgba(102,255,201,.18), transparent 68%); animation:orbC 14s ease-in-out infinite; } /* THEME STAGE */ body.theme-ecosystem .theme-stage::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 18%, rgba(255,214,92,.95) 0 4.8%, rgba(255,214,92,.32) 6%, transparent 13%), linear-gradient(180deg, transparent 0 56%, rgba(22,132,101,.08) 58%, rgba(21,87,144,.14) 100%); filter:blur(6px); } body.theme-ecosystem .theme-stage::after{ content:""; position:absolute; inset:0; background: linear-gradient(160deg, transparent 61%, rgba(82,126,155,.48) 62%, rgba(82,126,155,.48) 68%, transparent 69%), linear-gradient(201deg, transparent 61%, rgba(104,145,155,.42) 62%, rgba(104,145,155,.42) 68%, transparent 69%), linear-gradient(to bottom, rgba(220,247,255,0) 0%, rgba(220,247,255,.95) 45%, rgba(124,228,255,.20) 78%, transparent 100%), linear-gradient(to bottom, rgba(220,247,255,0) 0%, rgba(220,247,255,.88) 45%, rgba(124,228,255,.18) 78%, transparent 100%), radial-gradient(ellipse at 50% 95%, rgba(141,240,255,.84) 0 13%, transparent 17%), linear-gradient(to top, rgba(34,133,207,.95) 0%, rgba(86,213,255,.58) 10%, transparent 24%), radial-gradient(circle at 8% 100%, rgba(17,118,61,.98) 0 8%, transparent 9%), radial-gradient(circle at 18% 100%, rgba(51,171,84,.98) 0 10%, transparent 11%), radial-gradient(circle at 28% 100%, rgba(118,216,73,.96) 0 11%, transparent 12%), radial-gradient(circle at 40% 100%, rgba(37,154,83,.98) 0 10%, transparent 11%), radial-gradient(circle at 52% 100%, rgba(78,197,93,.98) 0 12%, transparent 13%), radial-gradient(circle at 64% 100%, rgba(183,188,75,.94) 0 10%, transparent 11%), radial-gradient(circle at 76% 100%, rgba(39,157,84,.98) 0 11%, transparent 12%), radial-gradient(circle at 88% 100%, rgba(19,122,63,.98) 0 8%, transparent 9%), radial-gradient(circle at 94% 88%, rgba(255,106,205,.95) 0 2%, transparent 3.6%), radial-gradient(circle at 96% 91%, rgba(255,190,84,.95) 0 1.8%, transparent 3.2%), radial-gradient(circle at 91% 92%, rgba(178,93,255,.94) 0 1.7%, transparent 3.1%); background-size: 35% 30%, 46% 28%, 3.2% 24%, 2.2% 18%, auto, auto, auto,auto,auto,auto,auto,auto,auto,auto, auto,auto,auto; background-position: 22% 38%, 74% 36%, 50% 50%, 57% 42%, center bottom, center bottom, 8% 100%,18% 100%,28% 100%,40% 100%,52% 100%,64% 100%,76% 100%,88% 100%, 94% 88%,96% 91%,91% 92%; background-repeat:no-repeat; } body.theme-galaxy .theme-stage::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 52% 20%, rgba(255,233,163,.9) 0 4%, transparent 10%), radial-gradient(circle at 48% 42%, rgba(155,127,255,.16), transparent 18%), radial-gradient(circle at 65% 33%, rgba(91,227,255,.16), transparent 22%), radial-gradient(circle at 40% 68%, rgba(255,126,236,.10), transparent 18%); filter:blur(8px); } body.theme-galaxy .theme-stage::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 18%, rgba(255,255,255,.95) 0 1.5px, transparent 3px), radial-gradient(circle at 48% 26%, rgba(255,255,255,.95) 0 1.2px, transparent 2.8px), radial-gradient(circle at 72% 16%, rgba(255,255,255,.95) 0 1.5px, transparent 3px), radial-gradient(circle at 81% 37%, rgba(255,255,255,.95) 0 1.3px, transparent 2.8px), radial-gradient(circle at 31% 50%, rgba(255,255,255,.95) 0 1.5px, transparent 3px), radial-gradient(circle at 60% 70%, rgba(255,255,255,.95) 0 1.4px, transparent 3px), radial-gradient(circle at 15% 80%, rgba(255,255,255,.95) 0 1.4px, transparent 3px), radial-gradient(circle at 88% 78%, rgba(255,255,255,.95) 0 1.4px, transparent 3px), radial-gradient(ellipse at 50% 58%, rgba(85,104,255,.22) 0 10%, transparent 30%); } body.theme-forest .theme-stage::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 18%, rgba(255,223,111,.88) 0 5%, transparent 12%); filter:blur(5px); } body.theme-forest .theme-stage::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 8% 100%, rgba(21,100,43,.98) 0 8%, transparent 9%), radial-gradient(circle at 18% 100%, rgba(34,128,56,.98) 0 10%, transparent 11%), radial-gradient(circle at 30% 100%, rgba(56,161,76,.96) 0 12%, transparent 13%), radial-gradient(circle at 44% 100%, rgba(19,105,48,.98) 0 11%, transparent 12%), radial-gradient(circle at 58% 100%, rgba(73,173,83,.98) 0 13%, transparent 14%), radial-gradient(circle at 72% 100%, rgba(30,129,63,.98) 0 11%, transparent 12%), radial-gradient(circle at 86% 100%, rgba(16,97,44,.98) 0 8%, transparent 9%); } body.theme-waterfall .theme-stage::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 16%, rgba(255,226,131,.88) 0 5%, transparent 12%); filter:blur(5px); } body.theme-waterfall .theme-stage::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(220,247,255,0) 0%, rgba(220,247,255,.95) 44%, rgba(124,228,255,.20) 76%, transparent 100%), linear-gradient(to bottom, rgba(220,247,255,0) 0%, rgba(220,247,255,.88) 44%, rgba(124,228,255,.18) 76%, transparent 100%), radial-gradient(ellipse at 50% 96%, rgba(141,240,255,.86) 0 13%, transparent 17%), linear-gradient(to top, rgba(27,119,175,.95) 0%, rgba(86,213,255,.58) 10%, transparent 24%), radial-gradient(circle at 10% 100%, rgba(16,112,63,.98) 0 8%, transparent 9%), radial-gradient(circle at 25% 100%, rgba(39,152,84,.98) 0 11%, transparent 12%), radial-gradient(circle at 50% 100%, rgba(53,170,94,.98) 0 14%, transparent 15%), radial-gradient(circle at 75% 100%, rgba(39,152,84,.98) 0 11%, transparent 12%), radial-gradient(circle at 90% 100%, rgba(16,112,63,.98) 0 8%, transparent 9%); background-size: 3.8% 28%, 2.6% 20%, auto, auto, auto,auto,auto,auto,auto; background-position: 48% 44%, 58% 38%, center bottom, center bottom, 10% 100%,25% 100%,50% 100%,75% 100%,90% 100%; background-repeat:no-repeat; } body.theme-desert .theme-stage::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 18%, rgba(255,222,118,.92) 0 5%, transparent 13%); filter:blur(5px); } body.theme-desert .theme-stage::after{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 95%, rgba(255,198,104,.72) 0 16%, transparent 20%), radial-gradient(circle at 14% 100%, rgba(208,145,68,.95) 0 10%, transparent 11%), radial-gradient(circle at 33% 100%, rgba(230,175,99,.95) 0 14%, transparent 15%), radial-gradient(circle at 56% 100%, rgba(193,131,60,.95) 0 12%, transparent 13%), radial-gradient(circle at 77% 100%, rgba(232,182,108,.95) 0 14%, transparent 15%), radial-gradient(circle at 92% 100%, rgba(185,124,54,.95) 0 10%, transparent 11%); } /* NETWORK LINES */ .scene-layer::before{ content:""; position:absolute; inset:0; opacity:.44; background-repeat:no-repeat; background-size:cover; background-position:center; background-image:url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ "); animation:networkFloat 18s ease-in-out infinite; } .scene-layer::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 12% 23%, rgba(255,255,255,.95) 0 1.6px, transparent 3px), radial-gradient(circle at 42% 20%, rgba(255,255,255,.95) 0 1.6px, transparent 3px), radial-gradient(circle at 74% 30%, rgba(255,255,255,.95) 0 1.6px, transparent 3px), radial-gradient(circle at 88% 76%, rgba(255,255,255,.95) 0 1.6px, transparent 3px), radial-gradient(circle at 20% 84%, rgba(255,255,255,.95) 0 1.6px, transparent 3px), radial-gradient(circle at 53% 74%, rgba(255,255,255,.95) 0 1.6px, transparent 3px); opacity:.75; animation:smallBlink 8s linear infinite; } /* SHARED SURFACES */ .site-wrap{ position:relative; z-index:3; width:min(1380px, calc(100% - 26px)); margin:18px auto 26px; } .glass-panel{ position:relative; overflow:hidden; background: var(--surface-overlay), linear-gradient(180deg, rgba(7,20,36,.34), rgba(7,20,36,.22)); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-xl); backdrop-filter:blur(18px) saturate(145%); -webkit-backdrop-filter:blur(18px) saturate(145%); box-shadow: 0 14px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.05); } .glass-panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(255,255,255,.12), transparent 24%, transparent 72%, rgba(255,255,255,.06)); } .glass-soft{ background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), linear-gradient(180deg, rgba(6,18,35,.28), rgba(6,18,35,.18)); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg); backdrop-filter:blur(15px) saturate(140%); -webkit-backdrop-filter:blur(15px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px rgba(0,0,0,.12); } /* TOPBAR */ .topbar{ padding:14px 18px; display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; } .brand{display:flex; gap:14px; align-items:center} .brand-badge{ width:54px;height:54px;border-radius:18px;display:grid;place-items:center; font-weight:900;letter-spacing:.04em;color:#6a4700; background:linear-gradient(135deg, #ffe384, #ffbd2d); box-shadow:0 0 24px rgba(255,210,77,.34); } .brand-title{margin:0;font-size:clamp(1.7rem,3vw,3rem);letter-spacing:.01em;font-weight:900;text-shadow:0 3px 18px rgba(0,0,0,.18)} .brand-sub{margin:4px 0 0;color:rgba(255,255,255,.92);font-size:1rem;text-shadow:0 2px 10px rgba(0,0,0,.18)} .nav-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .nav-chip{ min-height:48px;padding:12px 18px;border-radius:14px;color:#fff; background:linear-gradient(180deg, rgba(13,87,181,.55), rgba(9,46,108,.45)); border:1px solid rgba(255,255,255,.18); font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } .nav-chip.active{ background:linear-gradient(180deg, rgba(23,100,201,.80), rgba(12,59,142,.60)); box-shadow:0 0 18px rgba(67,160,255,.28), inset 0 1px 0 rgba(255,255,255,.22); } /* GENERAL */ .hero,.section-block,.side-panel,.board-panel{padding:24px} .hero{min-height:540px;background:var(--hero-overlay)} .hero-copy-wrap{display:grid;grid-template-columns:1.1fr .72fr;gap:24px;align-items:start} .eyebrow{ display:inline-flex;padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20);color:#fff;font-weight:800;margin-bottom:14px; backdrop-filter:blur(10px) } .hero h2{margin:0 0 14px;font-size:clamp(2.3rem,5vw,4.7rem);line-height:1.06;font-weight:900;max-width:820px;text-shadow:0 4px 24px rgba(0,0,0,.25)} .gradient-cyan{color:#69dfff} .gradient-gold{color:#ffd74f} .gradient-green{color:#9bf468} .gradient-purple{color:#bda5ff} .hero p{margin:0;max-width:700px;color:rgba(255,255,255,.96);line-height:1.65;font-size:1.14rem;text-shadow:0 2px 12px rgba(0,0,0,.22)} .hero-actions,.stack-buttons{display:grid;gap:12px} .hero-actions{margin-top:22px;grid-template-columns:repeat(5,minmax(0,1fr));max-width:980px} .hero-card-grid{display:grid;grid-template-columns:1fr;gap:12px} .mini-glass-card{ min-height:102px;padding:18px;border-radius:20px;border:1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(9,54,89,.32), rgba(9,44,72,.20)), linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.12); } .mini-label{display:block;margin-bottom:8px;color:#f5fbff;font-size:.9rem;font-weight:800} .mini-glass-card strong{font-size:1rem;line-height:1.45;display:block} .section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px} .section-head h3{margin:0;font-size:2rem;font-weight:900;text-shadow:0 3px 16px rgba(0,0,0,.16)} .section-sub{margin:8px 0 0;color:rgba(255,255,255,.92);line-height:1.6} .section-pill,.turn-pill{ padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.68);color:#4f6171; font-weight:800;font-size:.92rem;border:1px solid rgba(255,255,255,.30); } .feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .feature-card{ padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(9,54,89,.28), rgba(9,44,72,.18)), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 10px 26px rgba(0,0,0,.10); } .feature-tag{ display:inline-flex;padding:6px 10px;border-radius:10px;background:rgba(255,223,96,.66); color:#5c4d00;font-size:.82rem;font-weight:900;margin-bottom:10px; } .feature-card h4{margin:0 0 8px;font-size:1.5rem;font-weight:900} .feature-card p{margin:0;color:rgba(255,255,255,.94);line-height:1.55} .two-col-grid,.two-column-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px} .info-panel{padding:18px} .clean-list{margin:0;padding-left:20px;line-height:1.85;color:rgba(255,255,255,.96)} .steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .step-card{min-height:88px;padding:16px;display:flex;align-items:center;gap:12px;font-weight:800;color:#fff} /* FORMS */ .field-label{display:block;margin:14px 0 8px;color:#fff;font-weight:800} .field-input{ width:100%;min-height:58px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(0,43,84,.26), rgba(0,43,84,.16)), linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); color:#fff;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } .field-input::placeholder{color:rgba(255,255,255,.74)} .field-input:focus{ border-color:rgba(255,255,255,.34); box-shadow:0 0 0 3px rgba(89,217,255,.16), inset 0 1px 0 rgba(255,255,255,.18); } .inline-input{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center} .fit-btn{width:auto;min-width:120px} /* BUTTONS */ .btn{ min-height:56px;padding:14px 18px;border:none;border-radius:16px;cursor:pointer;font-weight:900; display:inline-flex;align-items:center;justify-content:center;text-align:center; box-shadow:0 10px 26px rgba(0,0,0,.16); transition:transform .18s ease, filter .18s ease; } .btn:hover{transform:translateY(-1px);filter:brightness(1.02)} .btn-primary{color:#fff;background:linear-gradient(180deg, #3090ff, #1465de)} .btn-secondary{color:#1d1b00;background:linear-gradient(180deg, #ffe67a, #ffc829)} .btn-gold{color:#fff;background:linear-gradient(180deg, #74ef7a, #28cd60)} .btn-glass{ color:#fff; background: linear-gradient(180deg, rgba(22,104,205,.40), rgba(8,48,108,.28)), linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.18); } /* STATS / PROFILE */ .stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .stats-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))} .stat-box,.mini-stat,.score-box{ min-height:96px;padding:16px;display:flex;flex-direction:column;justify-content:space-between; border-radius:20px;border:1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)), linear-gradient(180deg, rgba(9,48,84,.20), rgba(9,48,84,.12)); } .stat-box span,.mini-stat span,.score-box span{display:block;color:rgba(255,255,255,.88);margin-bottom:10px} .stat-box strong,.mini-stat strong,.score-box strong{font-size:1.45rem;font-weight:900} .profile-card{display:flex;gap:14px;align-items:center} .mini-avatar{ width:60px;height:60px;border-radius:18px;display:grid;place-items:center;font-weight:900;color:#6a4700; background:linear-gradient(135deg, #ffe27f, #ffbd2d);box-shadow:0 0 18px rgba(255,210,77,.28); } .mini-name{font-size:1.06rem;font-weight:900} .mini-role{margin-top:4px;color:rgba(255,255,255,.88)} .mini-stats-grid,.score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} /* BOARD */ .play-layout{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:18px;margin-top:18px;align-items:start} .board-shell{ margin-top:18px;padding:16px;border-radius:30px; background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06)), linear-gradient(180deg, rgba(0,86,131,.16), rgba(0,86,131,.06)); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 30px rgba(0,0,0,.12); } .board-shell-crown{position:relative;overflow:hidden} .board-crown-rays{ position:absolute; inset:10% 10%; border-radius:50%; background:radial-gradient(circle, rgba(255,223,96,.26) 0%, rgba(89,217,255,.18) 38%, transparent 72%); filter:blur(24px); animation:boardAura 6s ease-in-out infinite; } .board-aura{ position:absolute; inset:18% 18%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), rgba(89,217,255,.08), transparent 72%); filter:blur(18px); } .board{ width:var(--board-size); max-width:100%; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--cell-gap); } .cell{ position:relative; width:100%; aspect-ratio:1/1; min-height:96px; border-radius:26px; border:1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)), linear-gradient(180deg, rgba(9,54,89,.20), rgba(9,54,89,.10)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.10); display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden; } .cell::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 24% 18%, rgba(255,255,255,.28), transparent 24%), linear-gradient(145deg, rgba(89,217,255,.08), transparent 45%); } .cell::after{ content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.88); box-shadow:0 0 16px rgba(89,217,255,.30); } .cell.selected{ box-shadow:inset 0 0 0 1px rgba(255,215,79,.58),0 0 24px rgba(255,215,79,.18); } .cell.winner-cell{ box-shadow:inset 0 0 0 1px rgba(89,217,255,.60),0 0 28px rgba(89,217,255,.22); animation:winnerPulse 1.1s ease-in-out infinite; } .triangle,.circle{ position:relative; z-index:2; font-size:clamp(2rem,7vw,3.4rem); font-weight:900; line-height:1; text-shadow:0 0 18px currentColor; } .triangle{color:#59d9ff} .circle{color:#ff91df} .result-box,.presentation-result{ min-height:94px;padding:16px;white-space:pre-line;color:#fff; border-radius:24px;border:1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)), linear-gradient(135deg, rgba(7,34,72,.24), rgba(7,34,72,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.10); line-height:1.6;font-weight:700; } /* BATTLE SCREEN UPGRADE */ .play-stage-shell{ min-height:100vh; position:relative; z-index:3; padding:14px; display:flex; flex-direction:column; gap:14px; } .play-topbar{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; } .play-topbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .play-brand-mini{display:flex;align-items:center;gap:12px} .play-brand-mini h1{margin:0;font-size:clamp(1.4rem,2vw,2.1rem);font-weight:900;line-height:1} .play-brand-mini p{margin:4px 0 0;color:rgba(255,255,255,.88);font-size:.96rem} .play-stage-main{flex:1;display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:14px;min-height:0} .play-panel{padding:18px;display:flex;flex-direction:column;gap:12px;min-height:0} .ppt-title{margin:0;font-size:1.55rem;font-weight:900;letter-spacing:-.02em;line-height:1.05;text-shadow:0 4px 18px rgba(0,0,0,.18)} .ppt-sub{margin:6px 0 0;color:rgba(255,255,255,.88);line-height:1.55;font-size:.96rem} .ppt-chip{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border-radius:999px; font-weight:800; font-size:.86rem; color:#fff; background:linear-gradient(180deg, rgba(27,115,226,.68), rgba(16,76,165,.42)); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); } .ppt-card{ padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)), linear-gradient(180deg, rgba(8,38,78,.30), rgba(8,38,78,.16)); box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 10px 26px rgba(0,0,0,.12); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .ppt-card-title{margin:0 0 8px;font-size:1.08rem;font-weight:900;color:#fff} .ppt-card-note{margin:0;color:rgba(255,255,255,.90);line-height:1.55;font-size:.94rem} .play-form-grid{display:grid;gap:10px} .board-focus-wrap{min-height:0;display:flex;flex-direction:column;padding:18px;overflow:hidden} .board-focus-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap} .board-focus-title{margin:0;font-size:clamp(1.7rem,2.8vw,2.8rem);font-weight:900;letter-spacing:-.03em;line-height:1.03} .board-focus-note{margin:8px 0 0;color:rgba(255,255,255,.92);line-height:1.55;max-width:760px} .board-command-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px} .board-focus-stage{flex:1;min-height:0;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px} .board-slide-banner{ padding:16px 18px;border-radius:24px;border:1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), linear-gradient(135deg, rgba(11,60,110,.28), rgba(20,135,170,.16)); box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 12px 28px rgba(0,0,0,.12); display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; } .board-slide-banner strong{font-size:1.2rem;font-weight:900;display:block;margin-bottom:4px} .board-slide-banner span{color:rgba(255,255,255,.88)} .board-stage-center{ min-height:0;display:flex;align-items:center;justify-content:center;padding:14px; border-radius:30px;border:1px solid rgba(255,255,255,.18); background: radial-gradient(circle at 50% 50%, rgba(114,230,255,.16), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)), linear-gradient(180deg, rgba(11,42,88,.22), rgba(11,42,88,.10)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px rgba(0,0,0,.12); overflow:auto; position:relative; isolation:isolate; } .board-stage-center::before{ content:""; position:absolute; inset:-10px; border-radius:38px; background:conic-gradient(from 0deg, rgba(89,217,255,.00), rgba(89,217,255,.35), rgba(255,210,77,.28), rgba(89,217,255,.35), rgba(89,217,255,.00)); filter:blur(18px); opacity:.9; z-index:0; animation:boardFrameSpin 8s linear infinite; } .board-stage-center::after{ content:""; position:absolute; inset:0; border-radius:30px; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 28px rgba(89,217,255,.12),0 0 60px rgba(89,217,255,.10); z-index:0; pointer-events:none; } .board-stage-center .board{position:relative;z-index:1} .board-battle-hud{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px} .hud-chip{ min-height:64px;padding:10px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)), linear-gradient(180deg, rgba(8,44,88,.22), rgba(8,44,88,.10)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 20px rgba(0,0,0,.10); display:flex;flex-direction:column;justify-content:center;gap:4px; } .hud-chip span{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.76)} .hud-chip strong{font-size:1rem;font-weight:900;color:#fff} .fullscreen-battle-btn{white-space:nowrap} .onlineBannerSpacing{margin-bottom:8px} /* FULLSCREEN MODE */ .fullscreen-board-mode .play-topbar, .fullscreen-board-mode .play-panel, .fullscreen-board-mode #onlineBanner, .fullscreen-board-mode #viewerModePanel{display:none !important} .fullscreen-board-mode .play-stage-shell{padding:8px} .fullscreen-board-mode .play-stage-main{grid-template-columns:1fr !important;min-height:calc(100vh - 16px)} .fullscreen-board-mode .board-focus-wrap{min-height:calc(100vh - 16px);padding:12px} .fullscreen-board-mode .board-focus-stage{grid-template-rows:auto auto 1fr auto;height:100%} .fullscreen-board-mode .board-stage-center{min-height:0;height:100%} .fullscreen-board-mode .board{width:min(88vh, 92vw, 860px)} /* SPLASH */ .nc-splash,.battle-intro{ position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(circle at 50% 20%, rgba(255,220,120,.18), transparent 16%), linear-gradient(180deg, rgba(7,16,28,.40), rgba(7,16,28,.20)); transition:opacity .9s ease, visibility .9s ease; } .nc-splash.hide,.battle-intro.hide{opacity:0;visibility:hidden} .nc-splash-bg,.battle-intro-bg{ position:absolute; inset:0; opacity:.18; background:radial-gradient(circle at 50% 18%, rgba(255,223,96,.84) 0 5%, transparent 12%); filter:blur(10px); } .nc-splash-glow,.battle-intro-glow{ position:absolute; width:52vw; max-width:620px; height:52vw; max-height:620px; border-radius:50%; background:radial-gradient(circle, rgba(255,223,96,.20) 0%, rgba(89,217,255,.14) 35%, transparent 72%); filter:blur(34px); animation:solarPulse 6s ease-in-out infinite; } .nc-splash-center,.battle-intro-center{ position:relative; z-index:2; width:min(90vw, 520px); text-align:center; padding:34px 20px; } .nc-splash-ring,.battle-intro-ring{ position:absolute; inset:10px; border-radius:50%; max-width:260px; max-height:260px; width:260px; height:260px; left:50%; top:0; transform:translateX(-50%); background:conic-gradient(from 0deg, rgba(255,223,96,.18), rgba(89,217,255,.12), rgba(134,239,103,.14), rgba(255,223,96,.18)); filter:blur(18px); animation:spinRing 12s linear infinite; opacity:.7; } .nc-splash-core,.battle-intro-core{ position:relative; margin:0 auto 18px; width:118px; height:118px; border-radius:30px; display:grid; place-items:center; font-size:2rem; font-weight:900; color:#6a4700; background:linear-gradient(135deg, #ffe27f, #ffbd2d); box-shadow:0 0 28px rgba(255,210,77,.28),0 0 26px rgba(89,217,255,.18); } .nc-splash-title,.battle-intro-title{margin:14px 0 8px;font-size:clamp(2rem,6vw,3.5rem);font-weight:900} .nc-splash-sub,.battle-intro-sub{margin:0 0 22px;color:#fff;line-height:1.7} .nc-splash-bar,.battle-intro-bar{ width:min(88vw, 360px);height:14px;margin:0 auto;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22); } .nc-splash-bar-fill,.battle-intro-bar-fill{ width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg, #ffe27f 0%, #98fff0 52%, #5bb8ff 100%); box-shadow:0 0 18px rgba(89,217,255,.24); transition:width .18s ease; } .nc-splash-status,.battle-intro-status{margin-top:14px;color:#fff;font-weight:800} /* CELEBRATION */ .celebration-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(7,16,28,.26); z-index:70; backdrop-filter:blur(10px); } .celebration-overlay.show{display:flex} .celebration-card{ width:min(560px,100%); padding:28px; text-align:center; position:relative; overflow:hidden; transform:scale(1); animation:celebrationPop .42s ease; } .celebration-card.big-win{ width:min(700px,100%); padding:38px 30px; border-radius:34px; box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 0 38px rgba(89,217,255,.16),0 24px 70px rgba(0,0,0,.26); } .celebration-card h2{margin:0 0 10px;font-size:2rem;font-weight:900} .celebration-card.big-win h2{ font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.04; text-shadow:0 0 24px rgba(89,217,255,.16); } .celebration-card p{margin:0;color:#fff;white-space:pre-line;line-height:1.6} .celebration-card.big-win p{font-size:1.08rem} .celebration-actions,.dual-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px} .winner-badge-glow{ width:104px;height:104px;margin:0 auto 16px;border-radius:28px;display:grid;place-items:center; font-size:2rem;font-weight:900;color:#6a4700;background:linear-gradient(135deg, #ffe27f, #ffbd2d); box-shadow:0 0 28px rgba(255,210,77,.34),0 0 34px rgba(89,217,255,.14); animation:winnerBadgePulse 1.2s ease-in-out infinite; } .confetti-layer,#confettiLayer{position:absolute;inset:0;pointer-events:none} .confetti{ position:absolute; width:10px; height:18px; border-radius:4px; animation:fall linear forwards; } /* FOOTER */ .site-footer{ width:min(1380px, calc(100% - 26px)); margin:0 auto 24px; padding:16px 18px; display:flex; justify-content:space-between; gap:14px; align-items:center; position:relative; z-index:3; } .site-footer a{color:#fff;font-weight:800} /* HELPERS */ .hidden{display:none!important} .top-gap{margin-top:18px} .muted{color:rgba(255,255,255,.90)} .clean-meta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .public-status-chip{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border-radius:999px; font-weight:800; font-size:.86rem; color:#fff; background:linear-gradient(180deg, rgba(27,115,226,.68), rgba(16,76,165,.42)); border:1px solid rgba(255,255,255,.16); } .safe-note{color:rgba(255,255,255,.92);line-height:1.65;font-size:.96rem} /* ANIMATIONS */ @keyframes floatSparkle{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-8px) translateX(4px)}100%{transform:translateY(0) translateX(0)}} @keyframes orbA{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(14px)}} @keyframes orbB{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(18px) translateX(-10px)}} @keyframes orbC{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-12px) translateX(8px)}} @keyframes networkFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.01)}} @keyframes smallBlink{0%,100%{opacity:.72}50%{opacity:1}} @keyframes boardAura{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.06);opacity:.86}} @keyframes winnerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}} @keyframes solarPulse{0%,100%{opacity:.48;transform:scale(1)}50%{opacity:.72;transform:scale(1.05)}} @keyframes spinRing{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}} @keyframes fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(520px) rotate(480deg);opacity:.08}} @keyframes boardFrameSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes celebrationPop{0%{transform:scale(.84);opacity:0}100%{transform:scale(1);opacity:1}} @keyframes winnerBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} /* RESPONSIVE */ @media (max-width:1180px){ .play-layout,.play-stage-main{grid-template-columns:1fr} .board-command-row{grid-template-columns:repeat(2,minmax(0,1fr))} .hero-copy-wrap,.two-col-grid,.two-column-layout,.feature-grid,.hero-actions,.steps-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .hero{min-height:auto} } @media (max-width:980px){ .board-battle-hud{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ :root{--board-size:min(94vw, 520px);--cell-gap:10px} .site-wrap{width:min(100% - 12px,100%);margin:8px auto 18px} .topbar,.hero,.section-block,.side-panel,.board-panel,.play-panel,.board-focus-wrap{padding:14px;border-radius:22px} .nav-chip{padding:10px 14px;font-size:.92rem} .site-footer{flex-direction:column;align-items:flex-start} .dual-buttons,.celebration-actions,.board-command-row,.score-grid{grid-template-columns:1fr} } @media (max-width:640px){ .board-battle-hud{grid-template-columns:1fr} .fullscreen-board-mode .board{width:min(96vw, 560px)} } @media (max-width:420px){ :root{--board-size:min(94vw,390px);--cell-gap:8px} .stats-grid,.stats-grid.compact,.mini-stats-grid{grid-template-columns:1fr} }