@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Urbanist:wght@400;500;600;700;800&display=swap');

:root {
  --coral: #f35353;
  --blush: #ffeded;
  --yellow: #eeff41;
  --lime: #d7ff7c;
  --forest: #0b412f;
  --white: #fff;
  --muted: #617369;
  --line: rgba(11, 65, 47, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--forest);
  background: #fff9f7;
  font-family: "Urbanist", sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.play-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
}
.play-brand { display: flex; align-items: center; flex: 0 0 auto; }
.play-brand-logo { position: relative; width: 100px; height: 56px; overflow: hidden; }
.play-brand-logo img { position: absolute; width: 122px; max-width: none; left: -11px; top: -8px; }
.play-nav { display: flex; align-items: center; gap: 4px; }
.play-nav a, .play-nav .nav-dropdown summary { padding: 10px 12px; border-radius: 9px; color: rgba(11,65,47,.68); font-weight: 600; }
.play-nav a:hover, .play-nav a.active { color: var(--forest); background: var(--yellow); }
.nav-dropdown { position:relative; }
.nav-dropdown summary { display:flex; align-items:center; gap:5px; cursor:pointer; list-style:none; }
.nav-dropdown summary::-webkit-details-marker { display:none; }
.nav-dropdown summary svg { width:14px; height:14px; transition:transform .18s ease; }
.nav-dropdown:hover summary, .nav-dropdown[open] summary { color:var(--forest); background:var(--blush); }
.nav-dropdown[open] summary svg { transform:rotate(180deg); }
.brand-menu { position:absolute; z-index:30; left:0; top:100%; width:270px; display:block; padding:10px; border:1px solid rgba(243,83,83,.16); border-radius:14px; background:var(--blush); box-shadow:0 20px 55px rgba(11,65,47,.18); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-5px); transition:opacity .16s ease,transform .16s ease,visibility .16s ease; }
.nav-dropdown[open] .brand-menu { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.brand-menu-title { display:block; padding:7px 9px 9px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.play-nav .brand-menu a { display:flex; align-items:center; gap:0; padding:9px; color:var(--forest); border-radius:9px; }
.play-nav .brand-menu a:hover { background:white; }
.brand-menu a > span:last-child { min-width:0; }
.brand-menu strong, .brand-menu small { display:block; }
.brand-menu strong { font-size:13px; }
.brand-menu small { margin-top:2px; color:var(--muted); font-size:10px; font-weight:500; }
.brand-dot { display:none; }
.play-nav a.buy-coins { color: white; background: var(--coral); }
.play-nav a.buy-coins:hover { color: white; background: #d94343; }
.play-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.play-actions a { padding: 10px 15px; border-radius: 10px; font-weight: 700; }
.play-actions .login:hover { background: var(--blush); }
.play-actions .signup { color: white; background: var(--coral); }
.play-actions .signup:hover { background: var(--forest); }

.play-main { overflow: hidden; }
.play-hero {
  position: relative;
  min-height: 510px;
  display: grid;
  place-items: center;
  padding: 76px 24px;
  color: white;
  background: var(--forest);
  isolation: isolate;
}
.play-hero::before, .play-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.play-hero::before { width: 360px; height: 360px; left: -105px; top: -110px; background: var(--coral); }
.play-hero::after { width: 300px; height: 300px; right: -75px; bottom: -145px; background: var(--yellow); }
.hero-dots { position: absolute; right: 8%; top: 24%; width: 130px; height: 130px; opacity: .28; background-image: radial-gradient(var(--lime) 3px,transparent 3px); background-size: 19px 19px; }
.play-hero-inner { width: min(920px,100%); text-align: center; }
.kicker { color: var(--yellow); font-weight: 800; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.play-hero h1 { max-width: 790px; margin: 16px auto 18px; font: 700 clamp(45px,8vw,86px)/.96 "Fredoka"; letter-spacing: -3px; }
.play-hero p { max-width: 610px; margin: 0 auto; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.6; }
.hero-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; padding: 13px 18px; color: var(--forest); background: var(--yellow); border-radius: 11px; font-weight: 800; transition: transform .18s ease; }
.hero-cta:hover { transform: translateY(-3px); }

.play-section { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 84px 0; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.section-intro h2 { max-width: 540px; margin: 7px 0 0; font: 600 clamp(31px,4vw,48px)/1.04 "Fredoka"; letter-spacing: -1.4px; }
.section-intro p { max-width: 450px; margin: 0; color: var(--muted); line-height: 1.65; }
.coral-kicker { color: var(--coral); }

.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.step {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  box-shadow: 0 16px 45px rgba(11,65,47,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(11,65,47,.12); }
.step-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--forest); background: var(--yellow); font: 700 17px "Fredoka"; }
.step:nth-child(2) .step-number { background: var(--lime); }
.step:nth-child(3) .step-number { color: white; background: var(--coral); }
.step-icon { display: block; margin: 35px 0 23px; font-size: 52px; }
.step h3 { margin: 0 0 9px; font: 600 23px/1.15 "Fredoka"; }
.step p { margin: 0; color: var(--muted); line-height: 1.55; }

.rules-wrap { padding: 76px 0; background: var(--blush); }
.rules-grid { width: min(1180px,calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.rules-copy h2 { margin: 8px 0 16px; font: 600 clamp(32px,4vw,50px)/1.03 "Fredoka"; letter-spacing: -1.4px; }
.rules-copy p { color: var(--muted); line-height: 1.65; }
.rule-list { display: grid; gap: 12px; }
.rule { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border-radius: 14px; background: white; font-weight: 700; }
.rule-check { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--forest); background: var(--lime); }

.play-cta { width: min(1180px,calc(100% - 40px)); margin: 80px auto; padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; border-radius: 24px; color: white; background: var(--coral); }
.play-cta h2 { max-width: 650px; margin: 0; font: 600 clamp(30px,4vw,48px)/1.05 "Fredoka"; }
.play-cta a { flex: 0 0 auto; padding: 13px 18px; border-radius: 11px; color: var(--forest); background: var(--yellow); font-weight: 800; }
.play-cta a:hover { background: var(--lime); }
.play-footer { padding: 26px 24px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 13px; }

/* Stream page */
.stream-hero {
  position: relative;
  padding: 70px 24px 82px;
  overflow: hidden;
  color: white;
  background: var(--forest);
}
.stream-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -210px;
  border-radius: 50%;
  background: var(--coral);
}
.stream-hero-grid {
  position: relative;
  z-index: 1;
  width: min(1180px,100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 68px;
  align-items: center;
}
.stream-hero h1 { margin: 15px 0 18px; font: 700 clamp(44px,6vw,76px)/.97 "Fredoka"; letter-spacing: -2.6px; }
.stream-hero-copy > p { max-width: 530px; margin: 0; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.62; }
.stream-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 29px; }
.stream-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 17px; border: 0; border-radius: 11px; font-weight: 800; cursor: pointer; }
.stream-button.primary { color: var(--forest); background: var(--yellow); }
.stream-button.primary:hover { background: var(--lime); }
.stream-button.secondary { color: white; background: rgba(255,255,255,.12); }
.stream-button.secondary:hover { background: rgba(255,255,255,.2); }

.studio-preview { padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 23px; background: rgba(255,255,255,.08); box-shadow: 0 25px 70px rgba(0,0,0,.25); transform: rotate(1.5deg); }
.preview-screen { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 15px; background: #162d25 url('assets/featured-blind-box.png') center/cover no-repeat; }
.preview-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,65,47,.55),transparent 52%); }
.preview-live { position: absolute; z-index: 2; left: 13px; top: 13px; padding: 6px 9px; border-radius: 6px; color: white; background: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .7px; }
.preview-chat { position: absolute; z-index: 2; right: 13px; top: 13px; bottom: 13px; width: 31%; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 12px; border-radius: 10px; background: rgba(11,65,47,.82); backdrop-filter: blur(8px); }
.chat-line { height: 7px; border-radius: 99px; background: rgba(255,255,255,.32); }
.chat-line:nth-child(2) { width: 72%; background: var(--lime); }
.chat-line:nth-child(3) { width: 88%; }
.chat-line:nth-child(4) { width: 58%; background: var(--yellow); }
.preview-title { position: absolute; z-index: 2; left: 16px; right: 36%; bottom: 15px; font: 600 clamp(15px,2vw,22px) "Fredoka"; }

.stream-setup { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 82px 0; }
.setup-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: start; }
.setup-copy { position: sticky; top: 98px; }
.setup-copy h2 { margin: 8px 0 15px; font: 600 clamp(34px,4vw,52px)/1.03 "Fredoka"; letter-spacing: -1.4px; }
.setup-copy p { color: var(--muted); line-height: 1.65; }
.setup-list { display: grid; gap: 12px; }
.setup-item { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 10px 35px rgba(11,65,47,.05); }
.setup-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--blush); font-size: 23px; }
.setup-item:nth-child(2) .setup-icon { background: var(--lime); }
.setup-item:nth-child(3) .setup-icon { background: var(--yellow); }
.setup-item:nth-child(4) .setup-icon { color:white; background: var(--coral); }
.setup-item h3 { margin: 0 0 4px; font: 600 18px "Fredoka"; }
.setup-item p { margin: 0; color: var(--muted); font-size: 14px; }
.setup-status { padding: 6px 9px; border-radius: 999px; color: var(--forest); background: var(--lime); font-size: 11px; font-weight: 800; }
.setup-status.pending { color: var(--muted); background: #f4f3f0; }

.stream-tips { padding: 76px 0; background: var(--blush); }
.tips-inner { width: min(1180px,calc(100% - 40px)); margin: 0 auto; }
.tips-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 28px; }
.tip-card { padding: 27px; border-radius: 18px; background: white; }
.tip-card span { display: block; margin-bottom: 20px; font-size: 35px; }
.tip-card h3 { margin: 0 0 8px; font: 600 20px "Fredoka"; }
.tip-card p { margin: 0; color: var(--muted); line-height: 1.55; }

/* Live watch page */
.watch-topbar { position: sticky; }
.watch-search { width: min(380px,32vw); height: 40px; margin-left: auto; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--blush); }
.watch-search input { min-width: 0; flex: 1; padding: 0 13px; border: 0; outline: 0; color: var(--forest); background: transparent; font: inherit; }
.watch-search button { width: 44px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--line); color: var(--forest); background: rgba(243,83,83,.08); cursor: pointer; }
.watch-actions { margin-left: 0; }
.watch-coin { padding: 10px 13px; border-radius: 9px; color: white; background: var(--coral); font-size: 13px; font-weight: 700; white-space: nowrap; }
.watch-coin:hover { background: #d94343; }
.watch-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--coral); font-weight: 800; }

.watch-page { padding: 24px; background: #fff9f7; }
.watch-layout { width: min(1500px,100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 355px; gap: 18px; align-items: start; }
.watch-main { min-width: 0; }
.video-player { position: relative; aspect-ratio: 16/9; overflow: hidden; color: white; border-radius: 16px; background: #061b14 url('assets/featured-blind-box.png') center/cover no-repeat; box-shadow: 0 20px 55px rgba(11,65,47,.16); cursor: pointer; }
.watch-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-player::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 32%),linear-gradient(90deg,transparent 75%,rgba(0,0,0,.2)); }
.watch-live-badge { position: absolute; z-index: 2; left: 16px; top: 16px; padding: 6px 9px; border-radius: 6px; background: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .8px; }
.video-center { position:absolute; z-index:3; inset:0; display:grid; place-items:center; transition: opacity .2s ease; }
.video-center button { width: 68px; height: 68px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--forest); background: rgba(238,255,65,.94); cursor: pointer; box-shadow: 0 10px 35px rgba(0,0,0,.28); }
.video-center button svg { width: 29px; height: 29px; fill: currentColor; stroke: none; transform: translateX(2px); }
.video-player.playing .video-center { opacity: 0; }
.video-player.playing:hover .video-center { opacity: 1; }
.video-controls { position:absolute; z-index:3; left:16px; right:16px; bottom:13px; display:flex; align-items:center; gap:13px; }
.control-button { width: 28px; height: 28px; display:grid; place-items:center; padding:0; border:0; color:white; background:transparent; cursor:pointer; }
.control-button svg { width:19px; height:19px; }
.video-progress { flex:1; height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.35); }
.video-progress span { display:block; width:78%; height:100%; background:var(--coral); }
.live-time { font-size:12px; font-weight:700; }

.watch-info { padding: 20px 4px 12px; }
.watch-info h1 { margin:0 0 8px; font:600 clamp(25px,3vw,36px)/1.15 "Fredoka"; letter-spacing:-.7px; }
.watch-meta { color:var(--muted); font-size:14px; }
.watch-creator-row { display:flex; align-items:center; gap:12px; margin-top:20px; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.watch-creator-avatar { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border:3px solid var(--coral); border-radius:50%; color:var(--forest); background:var(--yellow); font:700 17px "Fredoka"; }
.watch-creator-copy { min-width:0; }
.watch-creator-copy strong { display:block; }
.watch-creator-copy span { color:var(--muted); font-size:13px; }
.watch-follow { margin-left:auto; padding:10px 14px; border:0; border-radius:10px; color:var(--forest); background:var(--lime); font-weight:800; cursor:pointer; }
.watch-follow.following { color:white; background:var(--coral); }
.watch-description { margin-top:16px; padding:18px; border-radius:14px; background:var(--blush); line-height:1.6; }
.watch-description strong { display:block; margin-bottom:5px; font-family:"Fredoka"; }
.watch-description p { margin:0; color:var(--muted); }

.live-chat { height: calc(100vh - 112px); min-height: 560px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 15px 45px rgba(11,65,47,.08); }
.chat-header { height:54px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--line); }
.chat-header strong { font:600 16px "Fredoka"; }
.chat-header span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.chat-header i { width:7px; height:7px; border-radius:50%; background:#25c67a; }
.chat-messages { flex:1; overflow-y:auto; padding:15px; scrollbar-color:#d9d4d0 transparent; }
.chat-message { display:grid; grid-template-columns:30px 1fr; gap:9px; margin-bottom:15px; }
.chat-avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--forest); background:var(--avatar,#d7ff7c); font-size:10px; font-weight:800; }
.message-copy { min-width:0; font-size:13px; line-height:1.45; }
.message-copy strong { margin-right:5px; color:var(--name,var(--forest)); font-size:12px; }
.system-message { margin:5px 0 16px; padding:10px 11px; border-radius:10px; color:var(--forest); background:var(--blush); font-size:12px; line-height:1.45; }
.chat-compose { flex:0 0 auto; padding:12px; border-top:1px solid var(--line); }
.chat-compose .bet-button { width:100%; height:40px; margin-bottom:8px; border:0; border-radius:10px; color:var(--forest); background:var(--lime); font-weight:800; cursor:pointer; }
.chat-compose .bet-button:hover { background:var(--yellow); }
.chat-compose form { display:flex; gap:8px; }
.chat-compose input { min-width:0; flex:1; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--forest); background:#fff9f7; font:inherit; }
.chat-compose input:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(243,83,83,.1); }
.chat-compose button { width:42px; display:grid; place-items:center; border:0; border-radius:10px; color:white; background:var(--coral); cursor:pointer; }
.chat-compose button:hover { background:var(--forest); }
.chat-note { display:block; margin-top:8px; color:var(--muted); font-size:10px; text-align:center; }

.up-next { width:min(1500px,100%); margin:38px auto 20px; }
.up-next h2 { margin:0 0 16px; font:600 24px "Fredoka"; }
.next-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.next-card { display:flex; gap:12px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:14px; background:white; transition:transform .18s ease; }
.next-card:hover { transform:translateY(-4px); }
.next-thumb { width:42%; flex:0 0 auto; aspect-ratio:16/10; border-radius:9px; background:var(--image) center/cover no-repeat; }
.next-copy { min-width:0; align-self:center; }
.next-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; }
.next-copy span { display:block; margin-top:4px; color:var(--muted); font-size:11px; }

/* Profile page */
.profile-page { min-height:calc(100vh - 64px); padding:30px 24px 70px; background:#fff9f7; }
.profile-shell { width:min(1240px,100%); margin:0 auto; }
.profile-cover { position:relative; min-height:210px; overflow:hidden; display:flex; align-items:flex-end; padding:28px; border-radius:22px; color:white; background:var(--forest); }
.profile-cover::before { content:""; position:absolute; width:330px; height:330px; right:-70px; top:-145px; border-radius:50%; background:var(--coral); }
.profile-cover::after { content:""; position:absolute; width:210px; height:210px; right:185px; bottom:-155px; border-radius:50%; background:var(--yellow); }
.profile-identity { position:relative; z-index:1; display:flex; align-items:center; gap:16px; }
.profile-avatar-large { width:82px; height:82px; flex:0 0 auto; display:grid; place-items:center; border:4px solid white; border-radius:50%; color:var(--forest); background:var(--yellow); font:700 30px "Fredoka"; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.profile-identity h1 { margin:0 0 3px; font:600 30px "Fredoka"; }
.profile-identity p { margin:0; color:rgba(255,255,255,.68); }
.profile-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:22px; margin-top:22px; align-items:start; }
.profile-sidebar, .profile-content { border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 12px 40px rgba(11,65,47,.06); }
.coin-card { margin:14px; padding:21px; overflow:hidden; border-radius:14px; color:var(--forest); background:var(--lime); }
.coin-label { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; }
.coin-label span { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); }
.coin-value { display:block; margin:12px 0 3px; font:700 38px/1 "Fredoka"; }
.coin-card small { color:rgba(11,65,47,.65); }
.coin-card a { display:block; margin-top:17px; padding:9px; border-radius:9px; color:white; background:var(--coral); text-align:center; font-size:13px; font-weight:800; }
.coin-card a:hover { background:var(--forest); }
.profile-menu { display:grid; gap:4px; padding:5px 14px 14px; }
.profile-menu button { width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; border:0; border-radius:10px; color:var(--muted); background:transparent; text-align:left; font-weight:700; cursor:pointer; }
.profile-menu button svg { width:18px; height:18px; }
.profile-menu button:hover, .profile-menu button.active { color:var(--forest); background:var(--blush); }
.profile-menu button.active { box-shadow:inset 3px 0 var(--coral); }

.profile-content { min-width:0; padding:27px; }
.panel-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:25px; }
.panel-heading h2 { margin:0 0 5px; font:600 27px "Fredoka"; }
.panel-heading p { margin:0; color:var(--muted); }
.profile-save { padding:10px 14px; border:0; border-radius:10px; color:white; background:var(--coral); font-weight:800; cursor:pointer; }
.profile-save:hover { background:var(--forest); }
.customize-grid { display:grid; grid-template-columns:1fr 230px; gap:28px; }
.profile-form { display:grid; gap:17px; }
.form-field label { display:block; margin-bottom:7px; font-size:12px; font-weight:800; }
.form-field input, .form-field textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--forest); background:#fffdfc; font:inherit; }
.form-field textarea { min-height:96px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(243,83,83,.1); }
.form-hint { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.color-options { display:flex; gap:9px; }
.color-choice { width:34px; height:34px; border:3px solid white; border-radius:50%; background:var(--choice); box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.color-choice.selected { box-shadow:0 0 0 2px var(--forest); }
.profile-preview { padding:18px; border-radius:15px; background:var(--blush); text-align:center; }
.preview-avatar { width:76px; height:76px; margin:2px auto 12px; display:grid; place-items:center; border-radius:50%; color:var(--forest); background:var(--yellow); font:700 27px "Fredoka"; }
.profile-preview strong { display:block; font-family:"Fredoka"; font-size:18px; }
.profile-preview small { color:var(--muted); }
.profile-preview p { margin:13px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }

.saved-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.saved-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }
.saved-thumb { position:relative; aspect-ratio:16/9; background:var(--image) center/cover no-repeat; }
.saved-duration { position:absolute; right:9px; bottom:8px; padding:4px 6px; border-radius:5px; color:white; background:rgba(0,0,0,.7); font-size:10px; font-weight:700; }
.saved-copy { padding:13px; }
.saved-copy strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; }
.saved-copy span { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.empty-note { grid-column:1/-1; padding:12px; color:var(--muted); border-radius:10px; background:var(--blush); font-size:12px; text-align:center; }

.settings-list { display:grid; gap:1px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.setting-row:first-child { padding-top:0; }
.setting-copy strong { display:block; margin-bottom:3px; }
.setting-copy span { color:var(--muted); font-size:13px; }
.switch { position:relative; width:44px; height:25px; flex:0 0 auto; }
.switch input { position:absolute; opacity:0; }
.switch-track { position:absolute; inset:0; border-radius:99px; background:#d8d8d5; cursor:pointer; transition:.18s ease; }
.switch-track::after { content:""; position:absolute; width:19px; height:19px; left:3px; top:3px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:.18s ease; }
.switch input:checked + .switch-track { background:var(--coral); }
.switch input:checked + .switch-track::after { transform:translateX(19px); }
.profile-toast { position:fixed; z-index:50; right:24px; bottom:24px; padding:12px 16px; border-radius:11px; color:var(--lime); background:var(--forest); box-shadow:0 12px 30px rgba(11,65,47,.24); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; }
.profile-toast.show { opacity:1; transform:none; }

@media (max-width: 800px) {
  .section-intro, .play-cta { align-items: flex-start; flex-direction: column; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .rules-grid { grid-template-columns: 1fr; gap: 30px; }
  .stream-hero-grid, .setup-grid { grid-template-columns: 1fr; }
  .studio-preview { max-width: 650px; }
  .setup-copy { position: static; }
  .tips-grid { grid-template-columns: 1fr; }
  .watch-layout { grid-template-columns:1fr; }
  .live-chat { height:560px; }
  .next-grid { grid-template-columns:1fr; }
  .profile-layout { grid-template-columns:1fr; }
  .profile-sidebar { display:grid; grid-template-columns:240px 1fr; }
  .profile-menu { align-content:center; padding:14px; }
}
@media (max-width: 580px) {
  .play-topbar { height: 58px; padding: 0 12px; gap: 4px; }
  .play-brand-logo { width: 84px; }
  .play-nav a { padding: 8px 9px; font-size: 13px; }
  .play-nav > a:not(.active):not(.buy-coins), .play-actions .login { display: none; }
  .play-actions .signup { padding: 8px 10px; font-size: 12px; }
  .play-hero { min-height: 480px; padding: 62px 18px; }
  .play-hero h1 { letter-spacing: -2px; }
  .play-hero p { font-size: 16px; }
  .play-section { width: min(100% - 28px,1180px); padding: 64px 0; }
  .rules-grid, .play-cta { width: min(100% - 28px,1180px); }
  .play-cta { padding: 34px 26px; }
  .stream-hero { padding: 55px 16px 64px; }
  .stream-hero-grid { gap: 42px; }
  .stream-setup, .tips-inner { width: min(100% - 28px,1180px); }
  .setup-item { grid-template-columns: auto 1fr; }
  .setup-status { grid-column: 2; justify-self: start; }
  .watch-topbar .play-nav, .watch-topbar .watch-search { display:none; }
  .watch-topbar .watch-actions { margin-left:auto; }
  .watch-page { padding:12px; }
  .video-player { border-radius:11px; }
  .watch-info { padding-inline:2px; }
  .live-chat { min-height:500px; height:65vh; }
  .profile-page { padding:14px 14px 50px; }
  .profile-cover { min-height:190px; padding:22px; }
  .profile-avatar-large { width:68px; height:68px; font-size:24px; }
  .profile-sidebar { display:block; }
  .profile-content { padding:20px; }
  .customize-grid, .saved-grid { grid-template-columns:1fr; }
  .profile-preview { order:-1; }
  .panel-heading { flex-direction:column; }
}
@media (max-width: 430px) {
  .play-actions { display: none; }
  .play-nav { margin-left: auto; }
}