:root { --bg: #070712; --surface: rgba(17, 18, 35, 0.84); --surface-2: rgba(24, 25, 48, 0.9); --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.16); --text: #f7f7ff; --muted: #8f95ad; --subtle: #5d637a; --purple: #8b5cf6; --violet: #b84cff; --cyan: #2dd4ff; --green: #21e6a5; --gold: #ffc857; --red: #ff5d75; --radius: 18px; --shadow: 0 20px 70px rgba(0,0,0,.35); } * { box-sizing: border-box; } html { min-height: 100%; background: var(--bg); } body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--text); background: radial-gradient(circle at 18% 12%, rgba(139,92,246,.14), transparent 34%), radial-gradient(circle at 86% 28%, rgba(45,212,255,.08), transparent 34%), var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } button, input, textarea { font: inherit; } button { color: inherit; } .ambient { position: fixed; border-radius: 999px; filter: blur(90px); pointer-events: none; opacity: .16; } .ambient-one { width: 340px; height: 340px; background: var(--violet); top: 14%; left: 20%; } .ambient-two { width: 420px; height: 420px; background: var(--cyan); right: -180px; bottom: 0; opacity: .08; } .app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); position: relative; z-index: 1; } .sidebar { height: 100vh; position: sticky; top: 0; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(7,7,18,.9); backdrop-filter: blur(22px); padding: 22px 15px 18px; display: flex; flex-direction: column; } .brand-block { display: flex; gap: 12px; align-items: center; padding: 0 10px 18px; } .brand-mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(145deg, var(--violet), var(--cyan)); box-shadow: 0 0 28px rgba(139,92,246,.35); } .brand-name { font-weight: 900; letter-spacing: .04em; } .brand-tagline { color: var(--muted); font-size: 12px; margin-top: 2px; } .mobile-close { display: none; } .companion-mini { display: grid; grid-template-columns: 48px 1fr; gap: 11px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); margin-bottom: 20px; } .companion-mini img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(45,212,255,.7); } .companion-mini strong, .companion-mini span, .companion-mini small { display: block; } .companion-mini strong { font-size: 14px; } .companion-mini span { color: var(--muted); font-size: 10px; margin: 2px 0 4px; } .companion-mini small { color: var(--green); font-size: 10px; } .nav-groups { display: flex; flex-direction: column; gap: 22px; } .nav-label { display: block; font-size: 10px; color: #656b83; letter-spacing: .14em; font-weight: 800; padding: 0 10px 8px; } .nav-item { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; text-align: left; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: .2s ease; color: #b9bed0; } .nav-item > span { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.035); color: #a78bfa; } .nav-item b { font-size: 13px; line-height: 1.2; } .nav-item small { color: #5f657c; font-size: 10px; margin-top: 2px; } .nav-item:hover { background: rgba(255,255,255,.045); transform: translateX(2px); } .nav-item.active { background: linear-gradient(100deg, rgba(139,92,246,.24), rgba(45,212,255,.09)); border: 1px solid rgba(139,92,246,.35); color: #fff; } .nav-item.active > span { background: linear-gradient(145deg, rgba(139,92,246,.7), rgba(45,212,255,.45)); color: #fff; } .nav-item.active small { color: #aeb5ce; } .sidebar-footer { margin-top: auto; padding: 20px 7px 0; } .pip-button { width: 100%; border: 1px solid rgba(45,212,255,.3); background: linear-gradient(100deg, rgba(139,92,246,.28), rgba(45,212,255,.18)); border-radius: 12px; padding: 10px; cursor: pointer; font-weight: 800; } .online { color: var(--muted); font-size: 10px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; } .online i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); } .main-stage { min-width: 0; } .topbar { height: 76px; position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(7,7,18,.78); backdrop-filter: blur(18px); } .menu-button { display: none; border: 0; background: transparent; font-size: 24px; } .journey-switch { display: flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.025); } .journey-switch button { border: 0; background: transparent; padding: 4px 10px; cursor: pointer; } .journey-switch b, .journey-switch span { display: block; } .journey-switch b { font-size: 12px; } .journey-switch span { color: var(--muted); font-size: 9px; margin-top: 1px; } .journey-switch i { height: 22px; width: 1px; background: var(--line); } .top-stats { justify-self: end; display: flex; gap: 16px; color: var(--muted); font-size: 11px; } .top-stats b { color: white; } .content { padding: 28px; max-width: 1540px; margin: 0 auto; } .view-enter { animation: viewIn .3s ease both; } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .hero { min-height: 360px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; position: relative; background: linear-gradient(120deg, rgba(17,18,35,.94), rgba(11,12,27,.84)); box-shadow: var(--shadow); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 38%, rgba(139,92,246,.26), transparent 34%), radial-gradient(circle at 90% 85%, rgba(45,212,255,.12), transparent 28%); } .hero-copy { position: relative; z-index: 2; width: 54%; padding: 44px; } .eyebrow { color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .hero h1 { font-size: clamp(34px, 4.5vw, 68px); line-height: .98; margin: 13px 0 17px; max-width: 700px; letter-spacing: -.055em; } .gradient-text { background: linear-gradient(90deg, #fff, #c9a9ff 42%, #6ee7ff); -webkit-background-clip: text; color: transparent; } .hero p { color: #a7adc3; max-width: 660px; font-size: 15px; line-height: 1.65; } .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .btn { border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; cursor: pointer; font-weight: 800; background: rgba(255,255,255,.035); } .btn.primary { border: 0; background: linear-gradient(100deg, var(--purple), var(--violet)); box-shadow: 0 12px 32px rgba(139,92,246,.25); } .btn.cyan { border-color: rgba(45,212,255,.35); background: rgba(45,212,255,.09); color: #9beaff; } .hero-art { position: absolute; z-index: 1; right: 2%; bottom: -2px; width: 44%; height: 100%; display: flex; justify-content: center; align-items: flex-end; } .hero-art img { max-width: 100%; max-height: 95%; object-fit: contain; filter: drop-shadow(0 28px 40px rgba(0,0,0,.55)); } .hero-art::after { content: ""; position: absolute; width: 75%; height: 30%; bottom: -10%; border-radius: 50%; background: rgba(45,212,255,.14); filter: blur(40px); } .section-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 30px 2px 14px; } .section-title h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; } .section-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; } .section-title .quote { max-width: 650px; color: #d1d5e7; font-size: 13px; font-weight: 700; text-align: right; } .grid { display: grid; gap: 14px; } .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; position: relative; overflow: hidden; } .card:hover { border-color: rgba(139,92,246,.33); } .card-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(139,92,246,.13); border: 1px solid rgba(139,92,246,.24); margin-bottom: 15px; font-size: 18px; } .card h3 { margin: 0 0 6px; font-size: 15px; } .card p { color: var(--muted); line-height: 1.55; margin: 0; font-size: 12px; } .card .link { margin-top: 16px; display: inline-flex; border: 0; background: transparent; color: #bfa8ff; padding: 0; cursor: pointer; font-weight: 800; font-size: 11px; } .magic-card { min-height: 200px; padding: 22px; cursor: pointer; transition: transform .2s ease; } .magic-card:hover { transform: translateY(-3px); } .magic-card.passport { background: linear-gradient(145deg, rgba(139,92,246,.17), rgba(17,18,35,.92)); } .magic-card.gallery { background: linear-gradient(145deg, rgba(45,212,255,.14), rgba(17,18,35,.92)); } .magic-card.legacy { background: linear-gradient(145deg, rgba(255,93,117,.13), rgba(17,18,35,.92)); } .magic-card .time { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; } .magic-card h3 { font-size: 21px; margin-top: 22px; } .magic-card strong { display: block; margin-top: 16px; font-size: 12px; color: #edf0ff; } .direction-panel { border: 1px solid rgba(45,212,255,.18); background: linear-gradient(120deg, rgba(45,212,255,.07), rgba(139,92,246,.08)); border-radius: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; } .direction-step { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--purple), var(--cyan)); font-weight: 900; box-shadow: 0 0 24px rgba(45,212,255,.18); } .direction-panel h3 { margin: 0 0 5px; font-size: 15px; } .direction-panel p { margin: 0; color: var(--muted); font-size: 12px; } .progress-line { height: 7px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; } .progress-line > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan)); } .stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); margin: 10px 0 6px; } .stat-row b { color: white; } .evo-path { display: grid; grid-template-columns: 1fr 50px 1fr 50px 1fr; align-items: stretch; } .evo-arrow { display: grid; place-items: center; color: #6e748c; font-size: 24px; } .evo-card { min-height: 390px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; } .evo-card.current { border-color: rgba(45,212,255,.45); box-shadow: 0 0 44px rgba(45,212,255,.08); } .evo-image { height: 230px; background: radial-gradient(circle at center, rgba(139,92,246,.22), transparent 58%), #090a16; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .evo-image img { width: 90%; height: 100%; object-fit: contain; } .evo-card.locked .evo-image img { filter: grayscale(1) brightness(.35); } .evo-body { padding: 18px; } .evo-stage { color: var(--cyan); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; } .evo-body h3 { font-size: 20px; margin: 7px 0 4px; } .evo-body p { color: var(--muted); font-size: 12px; line-height: 1.55; } .requirements { margin-top: 16px; display: grid; gap: 7px; } .requirements span { color: #aeb4c8; font-size: 11px; display: flex; justify-content: space-between; } .requirements b { color: var(--green); } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .page-head h1 { margin: 0; font-size: clamp(30px, 4vw, 50px); letter-spacing: -.045em; } .page-head p { color: var(--muted); margin: 6px 0 0; max-width: 740px; line-height: 1.6; font-size: 13px; } .page-badge { border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; color: #b8bfd5; font-size: 11px; white-space: nowrap; } .profile-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 14px; } .profile-portrait { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #090a16; } .profile-portrait img { width: 100%; height: 390px; object-fit: contain; display: block; background: radial-gradient(circle, rgba(139,92,246,.18), transparent 62%); } .profile-caption { padding: 16px; } .profile-caption h2 { margin: 0; } .profile-caption p { color: var(--muted); font-size: 12px; } .data-list { display: grid; gap: 10px; } .data-item { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 10px; color: var(--muted); font-size: 12px; } .data-item b { color: white; text-align: right; } .permission { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .permission:last-child { border: 0; } .permission strong { display: block; font-size: 12px; } .permission span { color: var(--muted); font-size: 10px; } .toggle { width: 42px; height: 23px; border-radius: 999px; background: #30354a; padding: 3px; cursor: pointer; border: 0; } .toggle i { display: block; width: 17px; height: 17px; background: white; border-radius: 50%; transition: .2s; } .toggle.on { background: linear-gradient(90deg, var(--purple), var(--cyan)); } .toggle.on i { transform: translateX(19px); } .gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .gallery-card { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; overflow: hidden; cursor: pointer; } .gallery-card .image { height: 190px; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(139,92,246,.22), transparent 58%), #090a16; position: relative; } .gallery-card .image img { width: 100%; height: 100%; object-fit: contain; } .gallery-card.locked .image img { filter: grayscale(1) brightness(.32); } .gallery-card .image span { position: absolute; top: 10px; right: 10px; border: 1px solid var(--line); background: rgba(7,7,18,.72); border-radius: 999px; font-size: 9px; padding: 4px 7px; } .gallery-card .caption { padding: 12px; } .gallery-card strong { font-size: 12px; } .gallery-card p { margin: 3px 0 0; font-size: 10px; color: var(--muted); } .legacy-message { min-height: 520px; background: linear-gradient(145deg, rgba(255,93,117,.09), rgba(17,18,35,.92)); } .legacy-message textarea { width: 100%; min-height: 360px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: rgba(0,0,0,.16); color: #e9ebf5; line-height: 1.8; font-size: 13px; outline: none; } .legacy-message textarea:focus { border-color: rgba(255,93,117,.45); } .api-flow { display: grid; grid-template-columns: repeat(7, auto); justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 22px; } .api-node { width: 110px; text-align: center; } .api-node i { width: 55px; height: 55px; margin: 0 auto 9px; display: grid; place-items: center; border-radius: 17px; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.26); font-style: normal; font-size: 22px; } .api-node b { display: block; font-size: 11px; } .api-node span { color: var(--muted); font-size: 9px; } .api-arrow { color: #5f657b; } .endpoint { display: grid; grid-template-columns: 210px 1fr auto; gap: 16px; padding: 14px; border-bottom: 1px solid var(--line); align-items: center; } .endpoint:last-child { border: 0; } .endpoint code { color: #94e8ff; font-size: 11px; } .endpoint span { color: var(--muted); font-size: 11px; } .method { border-radius: 7px; padding: 4px 7px; font-size: 9px; font-weight: 900; background: rgba(33,230,165,.12); color: var(--green); } .method.post { background: rgba(139,92,246,.16); color: #c5adff; } .chat-window { min-height: 570px; display: grid; grid-template-rows: 1fr auto; } .messages { display: flex; flex-direction: column; gap: 14px; padding: 4px; } .message { max-width: 70%; border-radius: 16px; padding: 13px 15px; line-height: 1.55; font-size: 13px; } .message.ai { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22); } .message.user { align-self: end; background: rgba(45,212,255,.10); border: 1px solid rgba(45,212,255,.22); } .chat-input { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 20px; } .chat-input input { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--text); caret-color: var(--text); border-radius: 12px; padding: 12px; outline: none; } .chat-input input::placeholder { color: var(--muted); opacity: .88; } body[data-audience="legacy"] .chat-input input { background: #fffdf8; color: #202622; caret-color: #202622; border-color: rgba(42,125,120,.35); } body[data-audience="legacy"] .chat-input input::placeholder { color: #66706a; } .parent-managed-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap} .parent-managed-notice{margin:12px 0 16px;padding:14px;border:1px solid rgba(255,200,87,.35);border-radius:14px;background:rgba(255,200,87,.08)} .parent-managed-notice p{margin-top:6px} .parent-managed-export{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:14px;color:var(--muted)} .gallery-form-button{margin-top:12px;width:100%} .battle-arena { min-height: 520px; position: relative; display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; background: radial-gradient(circle at center, rgba(139,92,246,.15), transparent 50%), var(--surface); } .fighter { text-align: center; } .fighter img { width: 260px; height: 260px; object-fit: contain; } .fighter.enemy img { filter: hue-rotate(180deg) saturate(.6) brightness(.75); transform: scaleX(-1); } .vs { text-align: center; font-size: 54px; font-weight: 900; color: rgba(255,255,255,.18); } .battle-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } .world-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .world-card { min-height: 220px; border: 1px solid var(--line); border-radius: 18px; padding: 18px; position: relative; overflow: hidden; background: var(--surface); } .world-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -40px; bottom: -50px; background: var(--world-color); filter: blur(40px); opacity: .22; } .world-card h3 { margin: 0 0 6px; font-size: 19px; } .world-card p { color: var(--muted); font-size: 11px; line-height: 1.55; } .world-card .level { position: absolute; bottom: 16px; left: 18px; color: #d3d7e5; font-size: 10px; } .reward-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .reward-row:last-child { border: 0; } .reward-row b { font-size: 12px; } .reward-row span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; } .reward-row strong { color: var(--green); font-size: 12px; } .pip-panel { position: fixed; z-index: 100; width: min(610px, calc(100vw - 32px)); left: 50%; bottom: 22px; transform: translate(-50%, calc(100% + 60px)); opacity: 0; transition: .28s ease; border: 1px solid rgba(139,92,246,.6); border-radius: 18px; background: rgba(26,29,64,.96); box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 35px rgba(139,92,246,.14); padding: 17px; backdrop-filter: blur(22px); } .pip-panel.open { transform: translate(-50%, 0); opacity: 1; } .pip-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; } .pip-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--purple), var(--cyan)); } .pip-head strong, .pip-head span { display: block; } .pip-head span { color: #a7adc2; font-size: 10px; margin-top: 2px; } .pip-head button { border: 0; background: transparent; color: #7f86a0; font-size: 21px; cursor: pointer; } .pip-message { margin: 14px 0; color: #e3e6f2; line-height: 1.6; font-size: 12px; } .pip-actions { display: flex; justify-content: flex-end; gap: 8px; } .pip-actions button { border-radius: 10px; padding: 9px 12px; font-weight: 800; cursor: pointer; } .pip-actions .secondary { border: 1px solid rgba(45,212,255,.28); background: rgba(45,212,255,.07); color: #7eeaff; } .pip-actions .primary { border: 0; background: linear-gradient(100deg, var(--purple), var(--violet)); } .toast { position: fixed; top: 90px; left: 50%; z-index: 120; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; border: 1px solid var(--line); border-radius: 999px; background: rgba(16,18,34,.96); padding: 9px 16px; color: #dfe3f0; font-size: 11px; transition: .2s ease; } .toast.show { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 1100px) { .grid.four, .gallery-grid { grid-template-columns: repeat(2, 1fr); } .hero-copy { width: 62%; } .hero-art { width: 40%; opacity: .8; } .profile-layout { grid-template-columns: 300px 1fr; } .api-flow { grid-template-columns: repeat(4, 1fr); } .api-arrow { display: none; } .world-grid { grid-template-columns: repeat(2, 1fr); } .top-stats span:nth-child(2) { display: none; } } @media (max-width: 820px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; z-index: 80; left: 0; top: 0; width: 280px; transform: translateX(-102%); transition: .25s ease; box-shadow: 30px 0 70px rgba(0,0,0,.5); } .sidebar.open { transform: translateX(0); } .mobile-close { display: block; position: absolute; right: 12px; top: 12px; border: 0; background: transparent; font-size: 24px; color: #7f86a0; } .topbar { grid-template-columns: 50px 1fr auto; padding: 0 14px; } .menu-button { display: block; } .journey-switch { justify-self: center; } .journey-switch span { display: none; } .top-stats span:nth-child(n+2) { display: none; } .content { padding: 18px; } .hero { min-height: 560px; } .hero-copy { width: 100%; padding: 28px; } .hero-art { width: 65%; right: 0; opacity: .45; } .grid.three, .grid.four, .grid.two { grid-template-columns: 1fr; } .profile-layout { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .evo-path { grid-template-columns: 1fr; gap: 12px; } .evo-arrow { transform: rotate(90deg); height: 30px; } .api-flow { grid-template-columns: repeat(2, 1fr); } .endpoint { grid-template-columns: 1fr auto; } .endpoint span { grid-column: 1 / 3; } .world-grid { grid-template-columns: 1fr; } .battle-arena { grid-template-columns: 1fr 70px 1fr; } .fighter img { width: 170px; height: 190px; } .battle-actions { grid-template-columns: repeat(2,1fr); } .section-title { align-items: flex-start; flex-direction: column; } .section-title .quote { text-align: left; } } @media (max-width: 520px) { .topbar { height: 66px; } .journey-switch { padding: 5px; } .journey-switch button { padding: 3px 7px; } .content { padding: 12px; } .hero { min-height: 540px; border-radius: 18px; } .hero-copy { padding: 23px; } .hero h1 { font-size: 39px; } .hero-art { width: 85%; opacity: .35; } .gallery-grid { grid-template-columns: 1fr; } .direction-panel { grid-template-columns: auto 1fr; } .direction-panel .btn { grid-column: 1 / 3; } .api-flow { grid-template-columns: 1fr 1fr; } .api-node { width: auto; } .battle-arena { grid-template-columns: 1fr; } .vs { font-size: 28px; } .fighter img { width: 190px; height: 170px; } .message { max-width: 90%; } } /* ── Generations pathway ───────────────────────────── */ .generations-view .page-head { margin-bottom: 18px; } .generation-master-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .generation-card { position:relative; min-height:330px; padding:20px; border-radius:20px; border:1px solid rgba(255,255,255,.11); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 18px 55px rgba(0,0,0,.28); } .generation-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 82% 8%,rgba(255,255,255,.18),transparent 30%); opacity:.75; } .generation-card::after { content:""; position:absolute; width:170px; height:170px; right:-70px; bottom:-80px; border-radius:50%; filter:blur(30px); opacity:.3; background:var(--generation-accent); } .generation-top { position:relative; z-index:1; display:flex; gap:12px; align-items:center; margin-bottom:15px; } .generation-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:15px; font-size:24px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); } .generation-kicker { font-size:9px; font-weight:900; letter-spacing:.12em; color:rgba(255,255,255,.7); margin-bottom:3px; } .generation-card h2 { margin:0; font-size:21px; } .generation-card p { position:relative; z-index:1; font-size:11px; line-height:1.62; color:rgba(255,255,255,.76); min-height:55px; } .generation-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 18px; } .generation-tags span { font-size:9px; border-radius:999px; padding:5px 8px; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.12); } .generation-btn { position:relative; z-index:1; margin-top:auto; width:100%; border-color:rgba(255,255,255,.2); background:rgba(0,0,0,.18); color:#fff; } .generation-btn:hover { background:rgba(255,255,255,.12); } .generation-card.young { --generation-accent:#5cf36b; background:linear-gradient(150deg,#12361e,#10172b 67%); } .generation-card.teen { --generation-accent:#13b9ff; background:linear-gradient(150deg,#17366c,#1b123c 67%); } .generation-card.adult { --generation-accent:#ffae37; background:linear-gradient(150deg,#543414,#201730 67%); } .generation-card.elite { --generation-accent:#ff334f; background:linear-gradient(150deg,#511523,#220d26 67%); } .generation-card.family { --generation-accent:#f26cdf; background:linear-gradient(150deg,#4b214e,#1c1735 67%); } .generation-card.life { --generation-accent:#36d5e8; background:linear-gradient(150deg,#123a45,#102237 67%); } .generation-card.legacy-keeper { --generation-accent:#ffc545; background:linear-gradient(150deg,#4a3714,#222018 67%); } .generation-card.wellbeing { --generation-accent:#33dd8b; background:linear-gradient(150deg,#103c2b,#152838 67%); } .master-worlds { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; } .master-worlds > div { min-height:125px; border-radius:18px; border:1px solid var(--line); background:var(--surface); padding:18px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; } .master-worlds span { grid-row:1/3; width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:rgba(139,92,246,.13); font-size:24px; } .master-worlds b { font-size:17px; } .master-worlds small { color:var(--muted); line-height:1.45; } .generation-lock-line { margin-top:18px; border:1px solid rgba(45,212,255,.2); background:linear-gradient(90deg,rgba(139,92,246,.12),rgba(45,212,255,.07)); border-radius:16px; padding:17px; text-align:center; font-size:14px; } .generation-lock-line strong { color:#7eeaff; } @media(max-width:1250px){.generation-master-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:820px){.generation-master-grid,.master-worlds{grid-template-columns:1fr;}.generation-card{min-height:285px;}} /* Human–AI cooperation and future AI-vs-AI structure */ .cooperation-system{margin-top:22px;display:grid;gap:16px} .cooperation-banner{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px;border-radius:20px;border:1px solid rgba(126,234,255,.22);background:linear-gradient(120deg,rgba(25,34,70,.96),rgba(61,24,84,.9));box-shadow:0 20px 60px rgba(0,0,0,.26)} .cooperation-banner h2{margin:5px 0 7px;font-size:25px}.cooperation-banner h2 span{color:#7eeaff}.cooperation-banner p{margin:0;color:var(--muted);line-height:1.55}.cooperation-formula{flex:0 0 auto;max-width:360px;padding:13px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);font-size:11px;font-weight:900;letter-spacing:.09em;text-align:center;color:#fff} .cooperation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.cooperation-card{position:relative;min-height:148px;padding:18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);overflow:hidden}.cooperation-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-55px;bottom:-65px;filter:blur(24px);opacity:.28;background:var(--coop-accent)}.cooperation-card h3{margin:9px 0 7px;font-size:16px}.cooperation-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.cooperation-number{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);font-weight:900}.human-role{--coop-accent:#52ef8c}.play-style{--coop-accent:#3ab8ff}.ai-role{--coop-accent:#b86cff}.autonomy{--coop-accent:#ff4f75} .autonomy-ladder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.autonomy-step{min-height:145px;padding:15px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.018));display:flex;flex-direction:column;gap:6px}.autonomy-step b{font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.autonomy-step span{font-size:16px;font-weight:900}.autonomy-step small{color:var(--muted);line-height:1.45}.autonomy-step.ai-vs-ai{border-color:rgba(255,74,111,.45);background:linear-gradient(155deg,rgba(91,18,42,.9),rgba(38,14,42,.92));box-shadow:0 16px 44px rgba(255,45,92,.12)}.autonomy-step.networked{border-color:rgba(126,234,255,.4);background:linear-gradient(155deg,rgba(17,57,74,.95),rgba(29,25,62,.95))} .ai-vs-ai-flow{display:flex;align-items:stretch;gap:8px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);overflow:auto}.ai-vs-ai-flow>div:not(.flow-arrow){min-width:155px;flex:1;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.045)}.ai-vs-ai-flow span{width:25px;height:25px;flex:0 0 25px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#2dd4ff);font-size:10px;font-weight:900}.ai-vs-ai-flow b{font-size:10px;line-height:1.35}.flow-arrow{display:grid;place-items:center;color:#7eeaff;font-size:18px}.ai-trust-line{padding:15px;border-radius:15px;text-align:center;border:1px solid rgba(255,74,111,.2);background:linear-gradient(90deg,rgba(255,74,111,.09),rgba(126,234,255,.07));font-size:15px}.ai-trust-line strong{color:#ff7893} @media(max-width:1250px){.cooperation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.autonomy-ladder{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:820px){.cooperation-banner{align-items:flex-start;flex-direction:column}.cooperation-formula{max-width:none;width:100%}.cooperation-grid,.autonomy-ladder{grid-template-columns:1fr}.ai-vs-ai-flow{flex-direction:column}.flow-arrow{transform:rotate(90deg)}} /* Alongkind multi-companion roster */ .companion-roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:0 0 28px} .companion-tile{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface);cursor:pointer;min-height:190px;transition:.2s transform,.2s border-color} .companion-tile:hover{transform:translateY(-4px);border-color:rgba(45,212,255,.75)} .companion-tile img{width:100%;height:145px;object-fit:cover;display:block} .companion-tile div{padding:12px 13px} .companion-tile strong,.companion-tile span{display:block} .companion-tile strong{font-size:16px;color:#fff}.companion-tile span{font-size:11px;color:var(--muted);margin-top:3px} .gallery-card .image img{width:100%;height:100%;object-fit:cover} .fighter img{object-fit:cover} @media(max-width:1100px){.companion-roster{grid-template-columns:repeat(3,1fr)}} @media(max-width:650px){.companion-roster{grid-template-columns:repeat(2,1fr)}.companion-tile{min-height:160px}.companion-tile img{height:118px}} /* Alongkind Evolution Studio */ .evolution-studio-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px;align-items:start} .evolution-builder,.evolution-preview-card{overflow:hidden} .evolution-companion-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 24px} .evolution-choice{border:1px solid var(--line);background:var(--surface-2);border-radius:16px;padding:8px;color:var(--text);cursor:pointer;text-align:left;transition:.2s ease} .evolution-choice:hover,.evolution-choice.selected{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 0 0 2px rgba(45,212,255,.12)} .evolution-choice img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px;display:block;margin-bottom:8px} .evolution-choice span{display:grid;gap:2px}.evolution-choice small{color:var(--muted)} .evolution-step-title{margin-top:6px} .evolution-style-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 18px} .evolution-style{border:1px solid var(--line);background:var(--surface-2);border-radius:15px;padding:14px;color:var(--text);cursor:pointer;display:grid;gap:4px;text-align:left;transition:.2s ease} .evolution-style:hover,.evolution-style.selected{border-color:var(--purple);box-shadow:0 0 0 2px rgba(139,92,246,.14)} .evolution-style>span{font-size:24px}.evolution-style small{color:var(--muted);line-height:1.35} .evolution-extra-label{display:grid;gap:8px;color:var(--muted)} .evolution-extra-label textarea{min-height:86px;resize:vertical;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:14px;padding:13px;font:inherit} .evolution-credit-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding:14px;border:1px solid rgba(255,200,87,.28);background:rgba(255,200,87,.07);border-radius:16px} .evolution-credit-strip>div{display:flex;align-items:center;gap:10px}.evolution-credit-strip small{display:block;color:var(--muted);margin-top:3px}.spark-icon{font-size:28px;color:var(--gold)} .evolution-trust{font-size:13px;margin-top:12px;color:var(--muted)} .evolution-preview{position:relative;min-height:430px;border-radius:20px;overflow:hidden;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 55%),var(--surface-2);display:grid;place-items:center;margin-top:12px} .evolution-preview img{width:100%;height:100%;min-height:430px;object-fit:contain;display:block} .evolution-preview-overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:7px;padding:30px;background:linear-gradient(180deg,rgba(7,7,18,.18),rgba(7,7,18,.78));transition:.2s ease} .evolution-preview-overlay.hidden{opacity:0;pointer-events:none}.evolution-preview-overlay>span:first-child{font-size:38px}.evolution-preview-overlay small{color:#d4d4e8;max-width:280px} .evolution-spinner{width:38px;height:38px;border:3px solid rgba(255,255,255,.25);border-top-color:white;border-radius:50%;margin:0 auto;animation:evolutionSpin .9s linear infinite} @keyframes evolutionSpin{to{transform:rotate(360deg)}} .evolution-preview-details{padding:16px 2px 4px}.evolution-preview-details h3{margin:0 0 6px}.evolution-preview-actions button:disabled{opacity:.45;cursor:not-allowed} .gallery-card.generated-evolution{box-shadow:0 0 0 1px rgba(45,212,255,.22),0 18px 50px rgba(45,212,255,.08)} @media(max-width:980px){.evolution-studio-grid{grid-template-columns:1fr}.evolution-companion-picker{grid-template-columns:repeat(4,minmax(90px,1fr))}} @media(max-width:640px){.evolution-companion-picker{grid-template-columns:repeat(2,1fr)}.evolution-style-picker{grid-template-columns:repeat(2,1fr)}.evolution-credit-strip{align-items:stretch;flex-direction:column}.evolution-credit-strip .btn{width:100%}.evolution-preview,.evolution-preview img{min-height:340px}} /* ========================================================= Alongkind Age Journeys V1 Age changes presentation and safety. Play style changes depth. ========================================================= */ .profile-switch-button{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;padding:8px 11px;cursor:pointer;min-width:176px;text-align:left} .profile-switch-button:hover{border-color:rgba(45,212,255,.55)} .profile-switch-button span:last-child{display:flex;flex-direction:column;min-width:0}.profile-switch-button b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-switch-button small{font-size:9px;color:var(--muted);margin-top:2px}.profile-switch-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--cyan));color:#fff;font-size:16px;flex:0 0 30px} .journey-onboarding{position:fixed;inset:0;z-index:3000;background:rgba(4,5,12,.82);backdrop-filter:blur(15px);display:none;align-items:center;justify-content:center;padding:22px;overflow:auto} .journey-onboarding.open{display:flex}.journey-dialog{position:relative;width:min(1120px,100%);max-height:94vh;overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:linear-gradient(150deg,#111328,#090a15);box-shadow:0 35px 100px rgba(0,0,0,.6);padding:28px}.journey-close{position:absolute;right:18px;top:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:24px;cursor:pointer}.journey-intro{padding-right:45px;margin-bottom:22px}.journey-intro h1{margin:6px 0 8px;font-size:clamp(30px,5vw,54px);letter-spacing:-.045em}.journey-intro p{margin:0;color:var(--muted);max-width:780px;line-height:1.65}.journey-section{margin-top:24px}.journey-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}.journey-section-head h2{margin:0;font-size:20px}.journey-section-head p{margin:0;color:var(--muted);font-size:11px}.journey-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.journey-options.play-options{grid-template-columns:repeat(4,minmax(0,1fr))}.journey-option{position:relative;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);border-radius:18px;padding:15px;text-align:left;cursor:pointer;min-height:112px;transition:.18s ease}.journey-option:hover{transform:translateY(-2px);border-color:rgba(45,212,255,.5)}.journey-option.selected{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(45,212,255,.15);background:rgba(45,212,255,.08)}.journey-option .option-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.08);font-size:22px}.journey-option b{display:block;font-size:14px;margin:1px 0 5px}.journey-option small{display:block;color:var(--muted);font-size:10px;line-height:1.5}.journey-option em{position:absolute;right:11px;top:10px;font-style:normal;font-size:8px;letter-spacing:.09em;color:var(--cyan)}.journey-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.journey-reassurance{font-size:11px;color:var(--muted);line-height:1.55;max-width:620px}.journey-save{min-width:190px} .experience-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:18px;align-items:stretch;margin-bottom:24px}.experience-copy{border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4vw,44px);background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(45,212,255,.06));display:flex;flex-direction:column;justify-content:center}.experience-copy h1{font-size:clamp(36px,5.5vw,70px);line-height:.98;letter-spacing:-.055em;margin:9px 0 16px}.experience-copy p{color:var(--muted);line-height:1.7;max-width:680px}.experience-portrait{border-radius:26px;border:1px solid var(--line);overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(45,212,255,.2),transparent 60%),#090a16;min-height:390px}.experience-portrait img{width:100%;height:100%;object-fit:cover}.experience-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.experience-action{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:19px;min-height:180px;display:flex;flex-direction:column}.experience-action .card-icon{margin-bottom:12px}.experience-action h3{font-size:18px;margin:0 0 8px}.experience-action p{font-size:11px;line-height:1.55;color:var(--muted);margin:0 0 15px}.experience-action .link{margin-top:auto}.profile-trust-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:20px 0;padding:16px 18px;border-radius:17px;border:1px solid rgba(45,212,255,.2);background:linear-gradient(90deg,rgba(45,212,255,.08),rgba(139,92,246,.09))}.profile-trust-strip b{font-size:13px}.profile-trust-strip span{color:var(--muted);font-size:11px} .game-zone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.game-panel{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:20px;overflow:hidden}.game-panel h2{margin:4px 0 8px;font-size:24px}.game-panel p{color:var(--muted);font-size:11px;line-height:1.6}.game-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:14px 0;border-radius:14px;background:rgba(255,255,255,.05);font-size:11px}.game-status strong{color:var(--cyan)}.trail-map{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:17px 0}.trail-stage{padding:12px 8px;border-radius:14px;border:1px solid var(--line);text-align:center;background:rgba(255,255,255,.035);font-size:9px;line-height:1.35}.trail-stage.done{background:rgba(62,235,139,.12);border-color:rgba(62,235,139,.35)}.trail-stage.current{background:rgba(45,212,255,.12);border-color:var(--cyan);box-shadow:0 0 0 2px rgba(45,212,255,.1)}.trail-stage span{display:block;font-size:20px;margin-bottom:5px}.playing-card{width:92px;height:126px;border-radius:13px;background:#fff;color:#111;display:grid;place-items:center;font-size:34px;font-weight:900;box-shadow:0 12px 25px rgba(0,0,0,.28)}.card-table{display:flex;align-items:center;justify-content:center;gap:26px;min-height:160px;padding:15px;border-radius:18px;background:radial-gradient(circle,#174f3b,#09271f 68%)}.card-player{text-align:center}.card-player small{display:block;color:#fff;margin-top:8px}.chess-wrap{overflow:auto;padding-bottom:4px}.chess-board{width:min(560px,100%);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:5px solid rgba(106,73,34,.8);border-radius:8px;overflow:hidden;margin:14px auto;background:#fff}.chess-square{border:0;display:grid;place-items:center;font-size:clamp(24px,4.7vw,48px);cursor:pointer;aspect-ratio:1;color:#111;text-shadow:0 1px 0 rgba(255,255,255,.3);padding:0}.chess-square.light{background:#ead9b8}.chess-square.dark{background:#8b6b45}.chess-square.selected{outline:4px solid #2dd4ff;outline-offset:-4px}.chess-square.legal{box-shadow:inset 0 0 0 5px rgba(62,235,139,.55)}.chess-note{font-size:10px;color:var(--muted);line-height:1.55}.arena-banner{border:1px solid rgba(255,72,101,.4);border-radius:24px;padding:24px;background:linear-gradient(145deg,rgba(93,15,35,.92),rgba(18,12,31,.95));box-shadow:0 20px 60px rgba(255,45,92,.12)}.arena-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.arena-stat{padding:13px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}.arena-stat b{display:block;font-size:19px}.arena-stat span{font-size:9px;color:#c9bfd0}.game-launcher-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.game-launcher{padding:17px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.035)}.game-launcher span{font-size:26px}.game-launcher h3{margin:9px 0 5px}.game-launcher p{margin:0} body[data-audience="kid"]{--bg:#eaf8ff;--surface:#ffffff;--surface-2:#f4fbff;--text:#17304a;--muted:#5a7187;--line:rgba(32,103,141,.17);--purple:#7a5cff;--cyan:#159bd2;background:linear-gradient(180deg,#dff6ff,#fff5df)}body[data-audience="kid"] .sidebar{background:linear-gradient(180deg,#ffffff,#ecf9ff);box-shadow:8px 0 30px rgba(26,91,129,.08)}body[data-audience="kid"] .brand-name,body[data-audience="kid"] .nav-item b,body[data-audience="kid"] .nav-item span,body[data-audience="kid"] h1,body[data-audience="kid"] h2,body[data-audience="kid"] h3{color:#17304a}body[data-audience="kid"] .card,body[data-audience="kid"] .experience-action,body[data-audience="kid"] .game-panel{box-shadow:0 12px 35px rgba(25,96,132,.08)}body[data-audience="kid"] .ambient{opacity:.12}body[data-audience="kid"] .topbar{background:rgba(255,255,255,.84)}body[data-audience="kid"] .experience-copy{background:linear-gradient(135deg,#fff2bd,#d8f7ff)}body[data-audience="kid"] .btn{font-size:13px;border-radius:16px}body[data-audience="kid"] .nav-item{border-radius:15px} body[data-audience="teen"]{--purple:#8f5dff;--cyan:#34d9ff;--red:#ff4c8b}body[data-audience="teen"] .experience-copy{background:linear-gradient(135deg,rgba(143,93,255,.27),rgba(52,217,255,.11))} body[data-audience="life"]{--purple:#4d93a6;--cyan:#47cdb7;--red:#ef8c62;background:linear-gradient(180deg,#071117,#0b181c)}body[data-audience="life"] .experience-copy{background:linear-gradient(145deg,rgba(71,205,183,.15),rgba(235,173,95,.08))} body[data-audience="family"]{--purple:#c36bc7;--cyan:#5ed0d8;--red:#f57c91}body[data-audience="family"] .experience-copy{background:linear-gradient(145deg,rgba(195,107,199,.16),rgba(94,208,216,.08))} body[data-audience="legacy"]{--bg:#f6f2e8;--surface:#fffdf8;--surface-2:#f5efe3;--text:#2c302e;--muted:#66706a;--line:rgba(66,77,70,.18);--purple:#6b7f62;--cyan:#2a7d78;--red:#a64d56;font-size:18px;background:#f6f2e8}body[data-audience="legacy"] .sidebar{background:#fffdf8;box-shadow:6px 0 24px rgba(58,55,43,.08)}body[data-audience="legacy"] .topbar{background:rgba(255,253,248,.94);min-height:84px}body[data-audience="legacy"] .brand-name,body[data-audience="legacy"] .nav-item b,body[data-audience="legacy"] .nav-item span,body[data-audience="legacy"] h1,body[data-audience="legacy"] h2,body[data-audience="legacy"] h3{color:#2c302e}body[data-audience="legacy"] .brand-tagline,body[data-audience="legacy"] .nav-item small,body[data-audience="legacy"] .nav-label{color:#66706a}body[data-audience="legacy"] .nav-item{min-height:59px;border-radius:14px}body[data-audience="legacy"] .nav-item b{font-size:14px}body[data-audience="legacy"] .content{max-width:1500px}body[data-audience="legacy"] .card,body[data-audience="legacy"] .experience-action,body[data-audience="legacy"] .game-panel{box-shadow:0 10px 30px rgba(67,59,39,.07)}body[data-audience="legacy"] .experience-copy{background:linear-gradient(140deg,#fff9e6,#e8f2e8)}body[data-audience="legacy"] .experience-copy h1{font-size:clamp(38px,5vw,64px)}body[data-audience="legacy"] p,body[data-audience="legacy"] .card p,body[data-audience="legacy"] .experience-action p{font-size:14px;line-height:1.7}body[data-audience="legacy"] .btn,body[data-audience="legacy"] .link{font-size:15px;min-height:48px}body[data-audience="legacy"] .ambient{display:none}body[data-audience="legacy"] *{animation-duration:.01ms!important;scroll-behavior:auto!important}body[data-audience="legacy"] .top-stats{display:none} body[data-play-style="hardcore"]{--red:#ff365f;--purple:#9e4cff;--cyan:#3fe9ff;background:radial-gradient(circle at 70% -10%,rgba(255,36,78,.14),transparent 40%),#05050b}body[data-play-style="hardcore"] .experience-copy{background:linear-gradient(145deg,rgba(116,12,39,.9),rgba(30,14,54,.92));border-color:rgba(255,54,95,.35)}body[data-play-style="hardcore"] .profile-switch-icon{background:linear-gradient(135deg,#ff365f,#9e4cff)} .nav-item[hidden]{display:none!important}.profile-simple-mode .journey-switch{display:none} @media(max-width:1100px){.experience-actions{grid-template-columns:repeat(2,1fr)}.journey-options,.journey-options.play-options{grid-template-columns:repeat(2,1fr)}.arena-stats{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.profile-switch-button{min-width:0}.profile-switch-button span:last-child{display:none}.experience-hero{grid-template-columns:1fr}.experience-portrait{min-height:300px}.game-zone-grid{grid-template-columns:1fr}.game-launcher-grid{grid-template-columns:1fr}.journey-dialog{padding:22px 16px}.journey-options,.journey-options.play-options{grid-template-columns:1fr}.journey-actions{align-items:stretch;flex-direction:column}.journey-save{width:100%}.trail-map{grid-template-columns:1fr}.trail-stage{display:flex;align-items:center;gap:10px;text-align:left}.trail-stage span{margin:0}.card-table{gap:12px}.playing-card{width:76px;height:108px}.profile-trust-strip{align-items:flex-start;flex-direction:column}} .btn.primary{color:#fff} body[data-audience="kid"] .top-stats{display:none} /* V1.2 — TEXT ONLY + BATTLE FIT. Keeps the existing Age Journeys design. */ .battle-view .page-head{margin-bottom:12px} .battle-view > .card:first-of-type{margin-bottom:12px!important;padding:12px 18px} .battle-view > .card:first-of-type .eyebrow{font-size:9px} .battle-view #rangerBattleScore,.battle-view #rivalBattleScore{font-size:42px!important;line-height:1} .battle-view .battle-arena{min-height:340px;padding:12px} .battle-view .fighter img{width:210px;height:210px} .battle-view .fighter h3{margin:4px 0 0} .battle-view .fighter p{margin:5px 0 0} .battle-view .battle-actions{margin-top:10px} .battle-view .battle-actions .btn{min-height:44px;padding:9px 10px} @media(max-height:850px) and (min-width:821px){ .battle-view .page-head{margin-bottom:8px} .battle-view > .card:first-of-type{padding:9px 14px;margin-bottom:9px!important} .battle-view #rangerBattleScore,.battle-view #rivalBattleScore{font-size:36px!important} .battle-view .battle-arena{min-height:285px} .battle-view .fighter img{width:175px;height:175px} .battle-view .vs{font-size:42px} } @media(max-width:820px){ .battle-view .battle-arena{min-height:360px} .battle-view .fighter img{width:160px;height:170px} } @media(max-width:520px){ .battle-view .battle-arena{min-height:auto} .battle-view .fighter img{width:170px;height:150px} } /* Young Explorer Companion Safety V1 */ .parent-controls-button{width:100%;border:1px solid rgba(45,212,255,.3);background:rgba(45,212,255,.08);color:var(--text);border-radius:14px;padding:11px 14px;font:inherit;font-weight:800;cursor:pointer;margin-bottom:10px} .parent-controls-button[hidden]{display:none!important} .parent-pin-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .parent-pin-fields label{display:grid;gap:7px;color:var(--muted);font-weight:700} .parent-pin-fields input{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:14px;padding:13px;font:inherit;font-size:20px;letter-spacing:.2em} .child-safe-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .child-safe-summary span{display:grid;gap:5px;text-align:center;border:1px solid var(--line);background:var(--surface-2);padding:16px;border-radius:16px} .companion-style-copy{padding:11px 12px;border-radius:12px;background:rgba(45,212,255,.06);border:1px solid rgba(45,212,255,.16);line-height:1.45} .companion-power-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .companion-power-row>span{padding:10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:grid;gap:2px} .companion-power-row small{color:var(--muted)} .companion-tag-row{display:flex;flex-wrap:wrap;gap:6px} .companion-tag-row span{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);color:var(--text)} body[data-audience="kid"] .companion-catalogue-card{background:linear-gradient(180deg,#fff,#f2fbff);box-shadow:0 16px 36px rgba(29,96,125,.08)} body[data-audience="kid"] .companion-catalogue-card img{border:3px solid rgba(21,155,210,.14)} body[data-audience="kid"] .young-explorer-gallery-item{box-shadow:0 12px 30px rgba(21,155,210,.1)} body[data-audience="kid"] .nav-item[data-view="battle"],body[data-audience="kid"] .nav-item[data-view="generations"],body[data-audience="kid"] .nav-item[data-view="fusion"],body[data-audience="kid"] .nav-item[data-view="api"],body[data-audience="kid"] .nav-item[data-view="network"],body[data-audience="kid"] .nav-item[data-view="wallet"],body[data-audience="kid"] .nav-item[data-view="legacy"]{display:none!important} @media(max-width:760px){.parent-pin-fields,.child-safe-summary{grid-template-columns:1fr}.companion-power-row{grid-template-columns:1fr}} /* Alongkind V1.0.6 — Journey Status */ .journey-status-wrap{justify-self:end;position:relative;z-index:30} .journey-status-button{min-width:190px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035);display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:9px;padding:8px 10px;text-align:left;cursor:pointer;transition:.2s ease} .journey-status-button:hover,.journey-status-wrap.open .journey-status-button{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.12);box-shadow:0 12px 34px rgba(0,0,0,.2)} .journey-status-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(139,92,246,.9),rgba(45,212,255,.65));color:#fff} .journey-status-button-copy b,.journey-status-button-copy small{display:block} .journey-status-button-copy b{font-size:12px} .journey-status-button-copy small{font-size:9px;color:var(--muted);margin-top:2px;white-space:nowrap} .journey-status-chevron{color:var(--muted);font-size:17px;transition:.2s ease} .journey-status-wrap.open .journey-status-chevron{transform:rotate(180deg)} .journey-status-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(520px,calc(100vw - 28px));padding:20px;border:1px solid var(--line-strong);border-radius:20px;background:rgba(12,13,28,.98);box-shadow:0 28px 90px rgba(0,0,0,.55);backdrop-filter:blur(24px)} .journey-status-panel[hidden]{display:none} .journey-status-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .journey-status-head h2{font-size:20px;margin:6px 0 0} .journey-status-close{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);cursor:pointer;font-size:20px} .journey-status-grid{display:grid;gap:10px;margin-top:17px} .journey-status-item{display:grid;grid-template-columns:38px 1fr;gap:11px;padding:13px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.03)} .journey-status-item-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(139,92,246,.14);font-size:18px} .journey-status-item small,.journey-status-item b{display:block} .journey-status-item small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800} .journey-status-item b{font-size:19px;margin:2px 0 3px} .journey-status-item p{font-size:10px;line-height:1.45;color:var(--muted);margin:0} .journey-status-privacy{margin:14px 2px 0;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.55} body[data-audience="kid"] .journey-status-panel{background:rgba(255,255,255,.99);box-shadow:0 22px 65px rgba(25,96,132,.18)} body[data-audience="kid"] .journey-status-item{background:#f6fbff} body[data-audience="kid"] .journey-status-button{background:rgba(255,255,255,.78)} body[data-audience="legacy"] .journey-status-panel{background:#fffdf8} body[data-audience="legacy"] .journey-status-button-copy small{font-size:11px} @media(max-width:900px){ .journey-status-button{min-width:0;width:48px;height:48px;padding:7px;display:grid;grid-template-columns:1fr} .journey-status-button-copy,.journey-status-chevron{display:none} .journey-status-icon{width:32px;height:32px} .journey-status-panel{position:fixed;right:14px;top:78px} } @media(max-width:520px){ .journey-status-panel{right:10px;top:72px;width:calc(100vw - 20px);padding:16px} } /* Alongkind Ragner Chat V1 */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .ragner-safety-strip{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin-bottom:18px;border:1px solid rgba(45,212,255,.28);border-radius:18px;background:linear-gradient(135deg,rgba(45,212,255,.09),rgba(139,92,246,.08))} .ragner-safety-strip.locked{border-color:rgba(255,200,87,.28);background:linear-gradient(135deg,rgba(255,200,87,.08),rgba(139,92,246,.07))} .ragner-safety-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:13px;background:rgba(255,255,255,.07);font-size:20px} .ragner-safety-strip strong,.ragner-safety-strip span{display:block} .ragner-safety-strip strong{font-size:15px;margin-bottom:4px} .ragner-safety-strip span{color:var(--muted);font-size:13px;line-height:1.55} .ragner-chat-card{min-height:610px;display:flex;flex-direction:column} .ragner-chat-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px} .ragner-chat-heading h2{margin:4px 0 0} .ragner-live-status{padding:7px 11px;border-radius:999px;background:rgba(33,230,165,.1);border:1px solid rgba(33,230,165,.25);color:var(--green);font-size:12px;font-weight:800} .ragner-chat-card .messages{flex:1;min-height:350px;max-height:430px;overflow:auto;padding-right:5px} .ragner-chat-card .message.thinking{opacity:.72;font-style:italic} .ragner-chat-card .message.error{border-color:rgba(255,93,117,.35);color:#ffd5dc} .ragner-chat-card .chat-input input:disabled{opacity:.58;cursor:not-allowed} .ragner-chat-footnote{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.45} .ragner-chat-footnote span:last-child{color:var(--cyan);font-weight:800} @media(max-width:760px){.ragner-chat-card{min-height:540px}.ragner-chat-footnote{display:block}.ragner-chat-footnote span{display:block;margin-top:6px}} /* Alongkind universal bright starting journey accessibility */ .journey-onboarding { background: rgba(31, 38, 43, .56); backdrop-filter: blur(12px); } .journey-dialog { background: linear-gradient(180deg, #fffdf8 0%, #f7fbff 100%) !important; color: #202622 !important; border-color: rgba(42,125,120,.24) !important; box-shadow: 0 35px 100px rgba(24, 35, 39, .28) !important; } .journey-dialog h1, .journey-dialog h2, .journey-dialog h3, .journey-dialog b, .journey-dialog strong { color: #202622 !important; } .journey-intro p, .journey-section-head p, .journey-reassurance, .journey-option small { color: #59665f !important; } .journey-close { background: #ffffff !important; color: #202622 !important; border-color: rgba(42,125,120,.24) !important; } .journey-option { background: #ffffff !important; color: #202622 !important; border: 2px solid rgba(42,125,120,.18) !important; box-shadow: 0 8px 24px rgba(30, 62, 66, .06); } .journey-option:hover { border-color: #2a7d78 !important; box-shadow: 0 12px 30px rgba(42,125,120,.14); } .journey-option.selected { background: #eefbf8 !important; border-color: #2a7d78 !important; box-shadow: 0 0 0 4px rgba(42,125,120,.16) !important; } .journey-option .option-icon { background: linear-gradient(145deg, #e8f8f4, #eef2ff) !important; color: #202622 !important; } .journey-option b { font-size: 16px !important; } .journey-option small { font-size: 12px !important; line-height: 1.6 !important; } .journey-option em { color: #196f6b !important; font-size: 10px !important; font-weight: 800; } .journey-actions { border-top-color: rgba(42,125,120,.18) !important; } .journey-dialog .btn, .journey-dialog button { min-height: 48px; } .journey-dialog button:focus-visible, .journey-option:focus-visible, .journey-close:focus-visible { outline: 4px solid rgba(42,125,120,.25) !important; outline-offset: 3px; } @media (max-width: 820px) { .journey-dialog { padding: 24px 16px !important; } .journey-intro h1 { font-size: clamp(30px, 10vw, 46px) !important; } .journey-option { min-height: 100px; } } /* Alongkind universal bright setup summary cards */ .journey-dialog .child-safe-summary span { background: #ffffff !important; color: #202622 !important; border: 2px solid rgba(42,125,120,.20) !important; box-shadow: 0 8px 24px rgba(30,62,66,.07) !important; min-height: 132px; align-content: center; } .journey-dialog .child-safe-summary span b, .journey-dialog .child-safe-summary span strong { color: #202622 !important; font-size: 16px !important; line-height: 1.35; } .journey-dialog .child-safe-summary span small, .journey-dialog .child-safe-summary span p { color: #59665f !important; font-size: 13px !important; line-height: 1.6 !important; } .journey-dialog .child-safe-summary span:hover { background: #f2fbf9 !important; border-color: #2a7d78 !important; } @media (max-width: 760px) { .journey-dialog .child-safe-summary span { min-height: 112px; padding: 18px 16px; } } /* Alongkind Legacy Keeper accessibility fix */ body[data-audience="legacy"] .legacy-message { background: #fffdf8 !important; border-color: rgba(66,77,70,.22) !important; box-shadow: 0 12px 34px rgba(67,59,39,.09) !important; } body[data-audience="legacy"] .legacy-message label > span { color: #39433d !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.35 !important; } body[data-audience="legacy"] .legacy-message input, body[data-audience="legacy"] .legacy-message select, body[data-audience="legacy"] .legacy-message textarea { width: 100%; background: #ffffff !important; color: #202622 !important; caret-color: #202622 !important; border: 2px solid rgba(42,125,120,.28) !important; border-radius: 14px !important; font-size: 17px !important; line-height: 1.55 !important; padding: 15px 16px !important; opacity: 1 !important; } body[data-audience="legacy"] .legacy-message textarea { min-height: 360px !important; resize: vertical; } body[data-audience="legacy"] .legacy-message input::placeholder, body[data-audience="legacy"] .legacy-message textarea::placeholder { color: #68736d !important; opacity: 1 !important; } body[data-audience="legacy"] .legacy-message select option { background: #ffffff !important; color: #202622 !important; } body[data-audience="legacy"] .legacy-message input:focus, body[data-audience="legacy"] .legacy-message select:focus, body[data-audience="legacy"] .legacy-message textarea:focus { outline: 4px solid rgba(42,125,120,.22) !important; outline-offset: 2px !important; border-color: #2a7d78 !important; } body[data-audience="legacy"] .legacy-message h3, body[data-audience="legacy"] .legacy-message .eyebrow { color: #202622 !important; } /* Alongkind Connected Worlds V1 */ .connected-worlds-view, .connected-world-detail { max-width: 1320px; margin: 0 auto; } .worlds-intro { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 26px; margin-bottom: 24px; border: 1px solid rgba(45,212,255,.22); border-radius: 22px; background: linear-gradient(135deg,rgba(45,212,255,.1),rgba(139,92,246,.1)); } .worlds-intro h2 { margin: 0 0 8px; font-size: clamp(24px,3vw,38px); } .worlds-intro p { margin: 0; max-width: 760px; color: var(--muted); line-height: 1.65; } .worlds-trust-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .worlds-trust-badges span,.world-age { padding: 8px 11px; border-radius: 999px; background: rgba(33,230,165,.12); border: 1px solid rgba(33,230,165,.24); color: #bdfbe4; font-weight: 800; font-size: 12px; } .connected-world-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .connected-world-card { padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: rgba(17,18,35,.9); box-shadow: var(--shadow); } .connected-world-card.active-world { border-color: rgba(45,212,255,.34); } .connected-world-card.future-world { opacity: .76; } .world-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .world-icon { font-size: 42px; } .world-status { font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--cyan); } .connected-world-card h2 { margin: 15px 0 8px; font-size: 25px; } .connected-world-card > p { min-height: 48px; color: var(--muted); line-height: 1.55; } .world-age { display: inline-flex; margin: 8px 0 16px; } .world-manifest { display: grid; gap: 9px; padding: 15px; border-radius: 16px; background: rgba(255,255,255,.035); } .world-manifest div { display: grid; grid-template-columns: 105px 1fr; gap: 10px; } .world-manifest b { color: var(--text); font-size: 12px; } .world-manifest span { color: var(--muted); font-size: 12px; line-height: 1.45; } .world-card-actions { display: flex; justify-content: flex-end; margin-top: 18px; } .world-permission-panel { margin: 0 0 24px; padding: 26px; border: 2px solid rgba(255,200,87,.35); border-radius: 24px; background: linear-gradient(145deg,rgba(255,200,87,.09),rgba(17,18,35,.96)); } .world-permission-panel h2 { margin: 6px 0 8px; font-size: 30px; } .world-permission-panel > p { color: var(--muted); line-height: 1.6; } .world-permission-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; } .world-permission-list { padding: 17px; border-radius: 16px; display: grid; gap: 8px; } .world-permission-list h3 { margin: 0 0 5px; } .world-permission-list span { font-size: 14px; line-height: 1.45; } .world-permission-list.allow { background: rgba(33,230,165,.08); border: 1px solid rgba(33,230,165,.2); } .world-permission-list.block { background: rgba(255,93,117,.07); border: 1px solid rgba(255,93,117,.18); } .world-consent-note { display: grid; gap: 5px; padding: 15px; border-radius: 15px; background: rgba(45,212,255,.08); } .world-consent-note span { color: var(--muted); line-height: 1.5; } .world-permission-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .world-platform-rules { margin-top: 24px; padding: 24px; border-radius: 22px; border: 1px solid var(--line); } .world-rule-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .world-rule-grid article { display: grid; gap: 6px; padding: 15px; border-radius: 15px; background: rgba(255,255,255,.035); } .world-rule-grid span { color: var(--muted); line-height: 1.45; } .kitchen-hero { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 27px; border-radius: 24px; background: linear-gradient(135deg,#fff8e8,#f4fff9); color: #26322c; box-shadow: var(--shadow); } .kitchen-hero h2 { margin: 6px 0 10px; font-size: clamp(27px,4vw,44px); } .kitchen-hero p { max-width: 780px; line-height: 1.65; color: #4d5a53; } .kitchen-icon { font-size: 48px; } .kitchen-safety { display: grid; gap: 4px; margin: 16px 0; padding: 16px 18px; border-radius: 16px; color: #3c3224; background: #fff0cb; border: 1px solid #e4c276; } .kitchen-safety span { line-height: 1.5; } .kitchen-activity-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } .kitchen-activity { padding: 21px; border-radius: 20px; color: #26322c; background: #fffdf8; border: 1px solid rgba(66,77,70,.18); box-shadow: 0 14px 36px rgba(0,0,0,.15); } .kitchen-activity > span { font-size: 38px; } .kitchen-activity h3 { margin: 12px 0 7px; font-size: 21px; } .kitchen-activity p { min-height: 92px; color: #59655f; line-height: 1.55; } .world-chapters,.world-data-boundary { margin-top: 18px; padding: 22px; border-radius: 20px; border: 1px solid var(--line); } .world-chapter-list { display: grid; gap: 10px; } .world-chapter-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 13px; border-radius: 14px; background: rgba(33,230,165,.07); } .world-chapter-list > div > span { color: var(--green); font-weight: 900; } .world-chapter-list small { color: var(--muted); } .world-data-boundary p { color: var(--muted); line-height: 1.6; } body[data-audience="kid"] .connected-worlds-view, body[data-audience="teen"] .connected-worlds-view { --world-minor-surface: #fffdf8; } body[data-audience="kid"] .connected-world-card, body[data-audience="teen"] .connected-world-card, body[data-audience="kid"] .world-platform-rules, body[data-audience="teen"] .world-platform-rules { background: var(--world-minor-surface) !important; color: #24312b !important; } body[data-audience="kid"] .connected-world-card p, body[data-audience="teen"] .connected-world-card p, body[data-audience="kid"] .world-manifest span, body[data-audience="teen"] .world-manifest span, body[data-audience="kid"] .world-rule-grid span, body[data-audience="teen"] .world-rule-grid span { color: #59655f !important; } body[data-audience="kid"] .world-manifest, body[data-audience="teen"] .world-manifest, body[data-audience="kid"] .world-rule-grid article, body[data-audience="teen"] .world-rule-grid article { background: #f5f7f3 !important; } @media (max-width: 900px) { .worlds-intro,.kitchen-hero { flex-direction: column; } .worlds-trust-badges { justify-content: flex-start; } .connected-world-grid,.world-permission-columns,.world-rule-grid,.kitchen-activity-grid { grid-template-columns: 1fr; } .kitchen-activity p { min-height: auto; } } /* Alongkind Grandma's Kitchen Guided Activities V1.0.9 */ .kitchen-workspace { margin-top: 18px; padding: 24px; border-radius: 22px; background: #fffdf8; color: #26322c; border: 1px solid rgba(66,77,70,.18); box-shadow: 0 14px 36px rgba(0,0,0,.14); } .kitchen-workspace-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; } .kitchen-workspace-head > span { font-size:40px; line-height:1; } .kitchen-workspace-head h2 { margin:5px 0 7px; font-size:clamp(25px,3vw,34px); } .kitchen-workspace-head p { margin:0; color:#59655f; line-height:1.55; } .kitchen-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; } .kitchen-checklist label { display:flex; gap:10px; align-items:center; padding:14px; border-radius:14px; background:#f4f8f5; border:1px solid #dbe7df; font-weight:750; } .kitchen-checklist input { width:20px; height:20px; accent-color:#2a7d78; } .kitchen-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; list-style:none; padding:0; margin:18px 0; counter-reset:kitchen-step; } .kitchen-steps li { counter-increment:kitchen-step; display:grid; gap:5px; padding:15px; border-radius:15px; background:#f8f4ea; border:1px solid #eadfc8; } .kitchen-steps li::before { content:counter(kitchen-step); width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#2a7d78; color:white; font-weight:900; } .kitchen-steps span { color:#59655f; line-height:1.45; } .kitchen-action-row { display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; padding-top:16px; border-top:1px solid #e1e6e2; } .kitchen-action-row > span { color:#59655f; line-height:1.45; flex:1 1 300px; } .kitchen-action-row > div { display:flex; gap:8px; flex-wrap:wrap; } .kitchen-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .kitchen-form-grid label { display:grid; gap:7px; } .kitchen-form-grid label.wide { grid-column:1/-1; } .kitchen-form-grid label > span { font-weight:850; } .kitchen-form-grid input,.kitchen-form-grid textarea { width:100%; box-sizing:border-box; border:2px solid rgba(42,125,120,.25); border-radius:14px; padding:13px 14px; background:white; color:#202622; font:inherit; line-height:1.5; } .kitchen-form-grid textarea { min-height:120px; resize:vertical; } .kitchen-form-grid input:focus,.kitchen-form-grid textarea:focus { outline:4px solid rgba(42,125,120,.18); outline-offset:2px; border-color:#2a7d78; } .kitchen-local-notice { display:grid; gap:5px; margin:16px 0; padding:14px; border-radius:14px; background:#edf8f5; border:1px solid #cfe8df; } .kitchen-local-notice span { color:#4f6258; line-height:1.5; } .kitchen-prompt-card blockquote { margin:12px 0 20px; padding:22px; border-radius:18px; background:#f4f0ff; border-left:5px solid #8b5cf6; font-size:clamp(22px,3vw,31px); line-height:1.35; font-weight:800; } .kitchen-workspace .btn[disabled] { opacity:.48; cursor:not-allowed; } @media (max-width:900px){ .kitchen-checklist,.kitchen-form-grid,.kitchen-steps { grid-template-columns:1fr; } .kitchen-form-grid label.wide { grid-column:auto; } .kitchen-action-row { align-items:stretch; } .kitchen-action-row > div,.kitchen-action-row .btn { width:100%; } } /* Alongkind Grandma's Kitchen Recipe Book V1.0.11 */ .kitchen-safety-general { background:#f5f8f5 !important; border-color:#d9e6dd !important; } .recipe-book-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:4px 0 18px; padding:16px; border-radius:16px; background:#edf8f5; border:1px solid #cfe8df; } .recipe-book-toolbar > div { display:grid; gap:4px; } .recipe-book-toolbar span { color:#53655b; line-height:1.45; } .recipe-book-list { display:grid; gap:10px; margin-bottom:22px; } .recipe-book-item { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px; border:1px solid #dce5df; border-radius:16px; background:#f8faf8; } .recipe-book-item.active { border-color:#2a7d78; box-shadow:0 0 0 3px rgba(42,125,120,.12); } .recipe-book-item > div:first-child { display:flex; align-items:center; gap:12px; min-width:0; } .recipe-book-item > div:first-child > span { font-size:28px; } .recipe-book-item b,.recipe-book-item small { display:block; } .recipe-book-item small { margin-top:4px; color:#65736c; } .recipe-book-item > div:last-child { display:flex; gap:8px; flex-wrap:wrap; } .recipe-editor-title { margin:22px 0 14px; padding-top:18px; border-top:1px solid #e1e6e2; } .recipe-editor-title h3 { margin:4px 0 0; font-size:24px; } .recipe-book-empty { margin-bottom:20px; background:#f8faf8; } @media (max-width:900px){ .recipe-book-toolbar,.recipe-book-item { align-items:stretch; flex-direction:column; } .recipe-book-item > div:last-child,.recipe-book-item .btn,.recipe-book-toolbar .btn { width:100%; } } /* Alongkind V1.0.13 — Pip Rewards and Modes Guide */ .rewards-guide{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .rewards-guide-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .rewards-guide-head h3,.reward-history-head h3{margin:5px 0 5px;font-size:18px} .rewards-guide-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.5} .rewards-mode-status{flex:0 0 auto;border:1px solid rgba(45,212,255,.28);background:rgba(45,212,255,.1);border-radius:999px;padding:7px 10px;font-size:9px;font-weight:800} .rewards-mode-status.paused{border-color:var(--line);background:rgba(255,255,255,.04);color:var(--muted)} .rewards-boundary,.rewards-parent-note{display:flex;gap:11px;margin-top:14px;padding:13px;border-radius:14px;border:1px solid rgba(255,200,87,.28);background:rgba(255,200,87,.08)} .rewards-boundary>span{font-size:21px} .rewards-boundary b,.rewards-boundary p,.rewards-parent-note b,.rewards-parent-note span{display:block} .rewards-boundary p,.rewards-parent-note span{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.5} .rewards-parent-note{border-color:rgba(45,212,255,.25);background:rgba(45,212,255,.07)} .reward-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px} .reward-mode-card{display:flex;flex-direction:column;gap:9px;padding:13px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)} .reward-mode-card.selected{border-color:rgba(45,212,255,.55);box-shadow:0 0 0 2px rgba(45,212,255,.1)} .reward-mode-card.locked{opacity:.58} .reward-mode-card-head{display:flex;align-items:center;gap:9px} .reward-mode-card-head>span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(139,92,246,.13);font-size:17px} .reward-mode-card-head b,.reward-mode-card-head small{display:block} .reward-mode-card-head b{font-size:12px}.reward-mode-card-head small{font-size:9px;color:var(--muted);margin-top:2px} .reward-mode-card>p{margin:0;color:var(--muted);font-size:10px;line-height:1.48;min-height:44px} .reward-records{padding:9px;border-radius:10px;background:rgba(255,255,255,.035)} .reward-records b,.reward-records span{display:block}.reward-records b{font-size:9px;text-transform:uppercase;letter-spacing:.07em}.reward-records span{font-size:9px;color:var(--muted);line-height:1.45;margin-top:3px} .reward-mode-card .btn{margin-top:auto;width:100%;font-size:10px;padding:9px} .rewards-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)} .rewards-controls b,.rewards-controls span{display:block}.rewards-controls span{color:var(--muted);font-size:10px;margin-top:3px} .rewards-explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px} .rewards-explain-grid article{display:flex;gap:9px;padding:11px;border:1px solid var(--line);border-radius:13px} .rewards-explain-grid article>span{font-size:17px}.rewards-explain-grid b{display:block;font-size:10px}.rewards-explain-grid p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.45} .reward-history{margin-top:16px} .reward-history-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px} .reward-history-head>span{font-size:9px;color:var(--muted)} .reward-history-empty{display:flex;gap:11px;margin-top:10px;padding:14px;border:1px dashed var(--line-strong);border-radius:14px;background:rgba(255,255,255,.02)} .reward-history-empty>span{font-size:22px}.reward-history-empty b,.reward-history-empty p{display:block}.reward-history-empty p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.5} .reward-history-list{display:grid;gap:8px;margin-top:10px} .reward-history-list article{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:start;padding:11px;border:1px solid var(--line);border-radius:13px} .reward-history-list b,.reward-history-list small{display:block}.reward-history-list small,.reward-history-list p{color:var(--muted);font-size:9px}.reward-history-list p{margin:4px 0 0}.reward-history-list strong{color:var(--cyan)} body[data-audience="kid"] .rewards-guide,body[data-audience="legacy"] .rewards-guide{color:#25312b} body[data-audience="kid"] .reward-mode-card,body[data-audience="kid"] .rewards-controls,body[data-audience="kid"] .rewards-explain-grid article,body[data-audience="kid"] .reward-history-empty{background:#f7fbff} body[data-audience="legacy"] .reward-mode-card,body[data-audience="legacy"] .rewards-controls,body[data-audience="legacy"] .rewards-explain-grid article,body[data-audience="legacy"] .reward-history-empty{background:#fffaf1} @media(max-width:900px){ .journey-status-panel{position:fixed!important;left:12px!important;right:12px!important;top:112px!important;bottom:12px!important;width:auto!important;max-width:none!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;z-index:9999!important;margin:0!important} .journey-status-head{position:sticky;top:-1px;z-index:4;padding-bottom:10px;background:inherit} } @media(max-width:560px){ .journey-status-panel{left:8px!important;right:8px!important;top:92px!important;bottom:8px!important;padding:15px!important} .rewards-guide-head,.rewards-controls,.reward-history-head{align-items:stretch;flex-direction:column} .reward-mode-grid,.rewards-explain-grid{grid-template-columns:1fr} .rewards-mode-status{align-self:flex-start} .rewards-controls .btn{width:100%} } /* Alongkind V1.0.16 - Rewards and Modes dedicated page */ #journeyStatusPanel{ position:absolute; top:calc(100% + 12px); right:0; left:auto; bottom:auto; width:min(480px,calc(100vw - 32px)); max-width:480px; max-height:min(620px,calc(100vh - 130px)); overflow-y:auto; overflow-x:hidden; margin:0; transform:none; z-index:9999; } #journeyStatusPanel .journey-status-head{ position:sticky; top:0; z-index:5; } .journey-status-rewards-link{ width:100%; margin-top:14px; } .rewards-page{ display:grid; gap:22px; padding-bottom:40px; } .rewards-page-summary{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:24px; border:1px solid rgba(78,220,205,.24); border-radius:22px; background:linear-gradient(135deg,rgba(67,42,122,.28),rgba(9,90,98,.18)); } .rewards-page-summary > div{ display:flex; align-items:flex-start; gap:16px; } .rewards-page-icon{ display:grid; place-items:center; width:58px; height:58px; flex:0 0 58px; border-radius:18px; font-size:30px; background:linear-gradient(135deg,#6750d8,#24b9c7); } .rewards-page-summary h2{ margin:4px 0 8px; font-size:clamp(26px,4vw,42px); line-height:1.08; } .rewards-page .rewards-guide{ display:grid; gap:22px; padding:26px; border:1px solid rgba(255,255,255,.1); border-radius:24px; background:rgba(12,13,28,.82); } @media (max-width:900px){ #journeyStatusPanel{ position:fixed; top:86px; right:8px; left:8px; width:auto; max-width:none; max-height:calc(100vh - 96px); } .rewards-page-summary{ flex-direction:column; } .rewards-page-summary > div{ flex-direction:column; } .rewards-page .rewards-guide{ padding:16px; } } /* Alongkind V1.0.17 - Identity and Connection Controls */ .identity-page{display:grid;gap:22px;padding-bottom:48px} .identity-status-hero{ display:flex;justify-content:space-between;align-items:center;gap:20px; padding:24px;border:1px solid rgba(69,214,198,.25);border-radius:24px; background:linear-gradient(135deg,rgba(52,44,119,.34),rgba(9,100,103,.18)); } .identity-status-hero>div{display:flex;align-items:center;gap:16px} .identity-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#6550d8,#2ac8c2);font-size:30px} .identity-status-hero h2{margin:4px 0 6px;font-size:clamp(24px,4vw,38px)} .identity-connection-pill{padding:10px 14px;border-radius:999px;font-weight:900} .identity-connection-pill.online{background:rgba(42,191,137,.15);color:#66edb4;border:1px solid rgba(42,191,137,.34)} .identity-connection-pill.offline{background:rgba(255,110,110,.12);color:#ff9d9d;border:1px solid rgba(255,110,110,.3)} .identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .identity-card{padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(12,13,28,.82)} .identity-card.identity-wide{grid-column:1/-1} .identity-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px} .identity-card-head>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(118,86,220,.22);font-size:22px} .identity-card h3{margin:3px 0 0;font-size:22px} .identity-field{display:grid;gap:7px;margin-top:14px} .identity-field>span{font-weight:800} .identity-field input,.identity-field select{width:100%;padding:13px 14px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:#111223;color:#fff;font:inherit} .identity-handle-input{display:flex;align-items:center;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:#111223;padding-left:13px} .identity-handle-input input{border:0;background:transparent} .identity-feedback{margin-top:9px;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.05);color:#aeb2c8} .identity-feedback.valid{color:#6beab8;background:rgba(42,191,137,.1)} .identity-feedback.invalid{color:#ffaaaa;background:rgba(255,90,90,.1)} .identity-action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px} .identity-action-row>span{color:#aeb2c8;line-height:1.45} .identity-parent-note,.identity-boundary{margin-top:14px;padding:13px;border-radius:13px;background:rgba(251,185,63,.1);border:1px solid rgba(251,185,63,.22)} .identity-parent-note{color:#ffd98b} .identity-boundary{display:grid;gap:4px} .identity-toggle{display:flex;gap:12px;align-items:flex-start;padding:14px;margin-top:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)} .identity-toggle input{margin-top:4px;transform:scale(1.2)} .identity-toggle span{display:grid;gap:4px} .identity-toggle small{color:#aeb2c8;line-height:1.45} .identity-count-preview{display:grid;gap:5px;margin-top:14px;padding:15px;border-radius:14px;background:rgba(64,203,195,.08);border:1px solid rgba(64,203,195,.18)} .identity-count-preview strong{font-size:24px;color:#6de7df} .identity-count-preview span{color:#aeb2c8;line-height:1.45} .identity-session{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px;border-radius:15px;background:rgba(255,255,255,.04)} .identity-session>div{display:flex;align-items:center;gap:12px} .identity-session>div>span{font-size:24px;color:#56dfae} .identity-session small{display:block;margin-top:4px;color:#aeb2c8} .session-online,.session-offline{font-weight:900} .session-online{color:#66edb4}.session-offline{color:#ff9d9d} .identity-policy-list{display:grid;gap:10px;margin-top:12px} .identity-policy-list>div{display:grid;gap:4px;padding:12px;border-radius:12px;background:rgba(255,255,255,.04)} .identity-policy-list span{color:#aeb2c8;line-height:1.45} .identity-boundaries{padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:rgba(12,13,28,.7)} .identity-boundaries>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .identity-boundaries article{display:grid;gap:5px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04)} .identity-boundaries span{color:#aeb2c8;line-height:1.45} @media(max-width:900px){ .identity-grid{grid-template-columns:1fr} .identity-card.identity-wide{grid-column:auto} .identity-status-hero,.identity-session{align-items:stretch;flex-direction:column} .identity-boundaries>div{grid-template-columns:1fr} } /* Alongkind V1.0.21 - Account Foundation readiness preview */ .account-foundation-card{border-color:rgba(94,226,208,.24);background:linear-gradient(145deg,rgba(17,18,42,.94),rgba(9,69,73,.28))} .account-foundation-status{display:grid;gap:8px;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)} .account-foundation-status>div{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .account-foundation-status b{padding:7px 10px;border-radius:999px} .account-foundation-status span{font-weight:800} .account-foundation-status p,.account-foundation-status small{margin:0;color:#aeb2c8;line-height:1.5} .account-foundation-status.warning b{color:#ffd98b;background:rgba(251,185,63,.12);border:1px solid rgba(251,185,63,.24)} .account-foundation-status.safe b{color:#72efbd;background:rgba(42,191,137,.12);border:1px solid rgba(42,191,137,.26)} .account-foundation-status.neutral b{color:#bfc5dc;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)} .account-foundation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .account-foundation-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px} .account-foundation-steps article{display:grid;gap:5px;padding:13px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)} .account-foundation-steps span{color:#aeb2c8;line-height:1.45} .account-foundation-card button[disabled]{opacity:.5;cursor:not-allowed} @media(max-width:900px){ .account-foundation-grid,.account-foundation-steps{grid-template-columns:1fr} } /* Alongkind V1.0.22 - Integrated Account Foundation emulator controls */ .account-foundation-actions{align-items:center;flex-wrap:wrap} .account-foundation-actions .btn{min-width:150px} .account-foundation-card .identity-feedback.valid{border-color:rgba(42,191,137,.34);background:rgba(42,191,137,.10);color:#8bf0c8} .account-foundation-card .identity-feedback.invalid{border-color:rgba(246,92,113,.34);background:rgba(246,92,113,.10);color:#ffb6c1} @media(max-width:700px){ .account-foundation-actions .btn{width:100%} }