:root {
  --ink: #2d2145;
  --muted: #806d87;
  --cream: #fff7e9;
  --pink: #fb5f83;
  --coral: #ff836e;
  --yellow: #ffc947;
  --mint: #c7f4d9;
  --lavender: #dbd0ff;
  --navy: #33254f;
  --shadow: 0 16px 0 rgba(45, 33, 69, 0.12);
}

.theme-ayush { --theme-accent: #fb5f83; --theme-accent-dark: #ce3e66; --theme-ink: #2d2145; }
.theme-adheeraj { --theme-accent: #60e8ff; --theme-accent-dark: #1c79d1; --theme-ink: #e9f7ff; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cream); color: var(--ink); font-family: "Baloo 2", system-ui, sans-serif; overflow-x: hidden; }
button { font: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.app-shell { min-height: 100vh; position: relative; overflow: hidden; }
.screen { min-height: 100vh; width: 100%; position: relative; padding: 38px 6vw; }
.selection-screen { display: flex; align-items: center; flex-direction: column; background: radial-gradient(circle at 10% 10%, #ffe3bb 0 9%, transparent 10%), radial-gradient(circle at 92% 78%, #c9e9ff 0 11%, transparent 12%), var(--cream); transition: background .35s ease, color .35s ease; }
.selection-screen.theme-adheeraj { color: #e9f7ff; background: radial-gradient(circle at 84% 15%, rgba(68, 223, 255, .28) 0 5%, transparent 6%), radial-gradient(circle at 13% 82%, rgba(87, 105, 255, .2) 0 12%, transparent 13%), #0b1132; }
.selection-screen.theme-adheeraj::before, .selection-screen.theme-adheeraj::after { border-color: #60e8ff; opacity: .35; }
.selection-screen.theme-adheeraj .eyebrow, .selection-screen.theme-adheeraj .kicker { color: #60e8ff; }
.selection-screen.theme-adheeraj .kicker { background: rgba(96, 232, 255, .12); }
.selection-screen.theme-adheeraj .selection-copy h2 span { color: #60e8ff; }
.selection-screen.theme-adheeraj .selection-copy h2 span::after { border-color: #855dff; }
.selection-screen.theme-adheeraj .subcopy, .selection-screen.theme-adheeraj .character-tag { color: #9fb8d4; }
.selection-screen.theme-adheeraj .brand-mark { background: #1b64d1; color: #a9f7ff; box-shadow: 4px 5px 0 #02051c; }
.selection-screen.theme-adheeraj .brand-lockup h1 { color: #e9f7ff; }
.selection-screen.theme-adheeraj .brand-lockup h1 span { color: #60e8ff; }
.selection-screen.theme-adheeraj .character-card { color: #e9f7ff; background: rgba(18, 28, 72, .82); border-color: rgba(96, 232, 255, .28); box-shadow: 0 7px 0 rgba(0, 0, 0, .28); }
.selection-screen.theme-adheeraj .character-card.is-selected { background: rgba(40, 72, 143, .9); border-color: #60e8ff; box-shadow: 0 8px 0 #1c79d1; }
.selection-screen.theme-adheeraj .avatar-ring { background: #111b4e; border-color: #60e8ff; box-shadow: 0 0 24px rgba(96, 232, 255, .48); }
.selection-screen.theme-adheeraj .selection-dot { background: #101841; border-color: #3f5f96; }
.selection-screen.theme-adheeraj .is-selected .selection-dot { background: #60e8ff; border-color: #60e8ff; color: #07102b; }
.selection-screen::before, .selection-screen::after { content: ""; position: absolute; border: 3px solid var(--pink); border-radius: 999px; opacity: .22; transform: rotate(-13deg); }
.selection-screen::before { width: 160px; height: 48px; top: 11%; left: -40px; }
.selection-screen::after { width: 190px; height: 70px; bottom: 11%; right: -70px; border-color: #58b6d9; transform: rotate(22deg); }
.brand-lockup { width: min(960px, 100%); display: flex; align-items: center; gap: 13px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--pink); color: white; font-size: 28px; transform: rotate(8deg); box-shadow: 4px 5px 0 var(--ink); }
.eyebrow, .kicker { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 10px; }
.brand-lockup h1 { font-family: "Fredoka", sans-serif; font-size: 21px; line-height: .8; letter-spacing: .03em; margin: 0; }
.brand-lockup h1 span { color: var(--pink); }
.selection-copy { text-align: center; margin-top: clamp(48px, 9vh, 92px); max-width: 600px; }
.kicker { display: inline-block; color: var(--pink); background: #ffe0d5; border-radius: 100px; padding: 7px 14px; }
.selection-copy h2 { font-family: "Fredoka", sans-serif; margin: 18px 0 8px; font-size: clamp(38px, 6vw, 70px); letter-spacing: -.04em; line-height: .96; }
.selection-copy h2 span { color: var(--pink); position: relative; display: inline-block; }
.selection-copy h2 span::after { content: ""; position: absolute; left: 2px; right: 0; bottom: -7px; border-bottom: 5px solid var(--yellow); border-radius: 80%; transform: rotate(-2deg); }
.subcopy { margin: 0; color: var(--muted); font-size: 17px; }
.character-grid { display: grid; grid-template-columns: repeat(2, minmax(170px, 240px)); gap: 22px; margin-top: 42px; }
.character-card { position: relative; border: 2px solid rgba(45,33,69,.15); background: rgba(255,255,255,.7); border-radius: 28px; padding: 22px 17px 18px; cursor: pointer; color: var(--ink); transition: transform .2s, border-color .2s, box-shadow .2s; box-shadow: 0 7px 0 rgba(45,33,69,.08); }
.character-card:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--pink); }
.character-card.is-selected { background: #ffe9eb; border-color: var(--pink); box-shadow: 0 8px 0 var(--pink); transform: translateY(-3px); }
.avatar-ring { display: block; width: 145px; height: 145px; margin: 0 auto 11px; border-radius: 50%; padding: 8px; background: white; border: 3px solid var(--yellow); overflow: visible; position: relative; }
.avatar-lollipop { border-width: 9px; border-color: #fb5f83; background: repeating-conic-gradient(#ffcf50 0 14deg, #fb5f83 14deg 28deg); box-shadow: 0 0 0 4px #fff, 0 0 0 7px #ffd15c; }
.avatar-lollipop::after { content: ""; position: absolute; z-index: -1; width: 10px; height: 47px; left: 50%; top: 126px; transform: translateX(-50%); background: repeating-linear-gradient(-45deg, #fff 0 6px, #ff8fa5 6px 11px); border-radius: 0 0 10px 10px; }
.avatar-lollipop img { border: 4px solid #fff; }
.avatar-soul { border: 3px solid #60e8ff; background: radial-gradient(circle, #bbf8ff, #2651b3 55%, #131a56 72%); box-shadow: 0 0 28px rgba(96,232,255,.75), inset 0 -18px 20px rgba(20, 3, 76, .5); border-radius: 52% 52% 47% 47%; }
.avatar-soul::after { content: ""; position: absolute; width: 55px; height: 22px; left: 50%; bottom: -17px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(96,232,255,.75), transparent 67%); filter: blur(2px); }
.character-card:nth-child(2) .avatar-ring { border-color: #5fc9bb; }
.avatar-ring img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #ffe5ae; }
.character-name { display: block; font-family: "Fredoka", sans-serif; font-size: 25px; }
.character-tag { display: block; color: var(--muted); font-family: "Fredoka", sans-serif; font-size: 10px; letter-spacing: .1em; margin-top: 2px; }
.selection-dot { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #c8bbc8; color: transparent; background: white; }
.is-selected .selection-dot { color: white; background: var(--pink); border-color: var(--pink); }
.card-spark { position: absolute; left: 12px; top: 17px; color: var(--yellow); font-size: 23px; transform: rotate(-15deg); }
.spark-b { color: #5fc9bb; }
.primary-button { border: 0; border-radius: 999px; color: white; background: var(--pink); padding: 13px 23px 14px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 17px; cursor: pointer; box-shadow: 0 5px 0 #ce3e66; transition: transform .15s, box-shadow .15s; }
.primary-button:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #ce3e66; }
.primary-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #ce3e66; }
.primary-button span { font-size: 22px; margin-left: 8px; line-height: 0; }
.selection-screen > .primary-button { margin-top: 37px; min-width: 196px; }
.is-hidden { display: none !important; }

.game-screen { background: #e9f8f1; padding: 26px 5vw; transition: background .35s ease, color .35s ease; }
.game-screen.theme-adheeraj { color: #e9f7ff; background: #080d29; }
.game-screen::before { content: ""; position: absolute; width: 700px; height: 500px; top: -230px; right: -160px; border-radius: 50%; background: var(--lavender); opacity: .7; }
.game-screen.theme-adheeraj::before { background: #203d90; opacity: .52; }
.game-header { position: relative; z-index: 1; width: min(1080px, 100%); margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; }
.game-logo { font-family: "Fredoka", sans-serif; font-size: 21px; font-weight: 700; letter-spacing: .04em; }
.game-logo span { color: var(--pink); }
.game-screen.theme-adheeraj .game-logo, .game-screen.theme-adheeraj .back-button { color: #e9f7ff; }
.game-screen.theme-adheeraj .game-logo span { color: #60e8ff; }
.back-button, .ghost-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-family: "Fredoka", sans-serif; }
.back-button { font-size: 14px; font-weight: 600; }
.back-button span { margin-left: 3px; font-size: 12px; }
.score-pills { display: flex; gap: 8px; }
.score-pills > div { background: white; min-width: 70px; padding: 5px 11px 4px; border-radius: 12px; text-align: center; box-shadow: 0 3px 0 rgba(45,33,69,.08); }
.game-screen.theme-adheeraj .score-pills > div { background: #111b4e; color: #e9f7ff; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.score-pills small, .final-stats small { display: block; font: 600 9px "Fredoka", sans-serif; color: var(--muted); letter-spacing: .12em; }
.score-pills strong { font: 700 22px "Fredoka", sans-serif; }
.game-layout { width: min(1080px, 100%); margin: 0 auto; display: block; }
.play-area { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
#gameCanvas { display: block; width: 100%; height: auto; border-radius: 32px; background: #a9e7ff; box-shadow: 0 11px 0 rgba(45,33,69,.13); touch-action: none; }
.game-badge { position: absolute; z-index: 2; top: 15px; left: 17px; border-radius: 999px; padding: 6px 11px; color: var(--ink); background: rgba(255,255,255,.78); font: 600 10px "Fredoka", sans-serif; letter-spacing: .09em; box-shadow: 0 2px 0 rgba(45,33,69,.1); }
.canvas-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(180deg, rgba(255,247,233,.05), rgba(45,33,69,.22)); border-radius: 32px; }
.ready-sticker { transform: rotate(-4deg); padding: 8px 18px; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 11px; box-shadow: 5px 5px 0 var(--ink); font: 700 29px "Fredoka", sans-serif; }
.canvas-overlay p { color: white; text-shadow: 1px 2px 0 rgba(45,33,69,.4); font-size: 16px; line-height: 1.2; }
.small-button { font-size: 15px; padding: 11px 20px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(45,33,69,.5); padding: 20px; }
.game-over-card { width: min(460px, 100%); padding: 31px 34px 26px; border: 3px solid var(--ink); border-radius: 31px; background: var(--cream); text-align: center; box-shadow: 9px 9px 0 var(--ink); animation: pop .32s ease-out; }
.game-screen.theme-adheeraj .game-over-card { color: #e9f7ff; background: #111b4e; border-color: #60e8ff; box-shadow: 9px 9px 0 #02051c; }
.game-screen.theme-adheeraj .roast-quote { background: #1c326e; }
.game-screen.theme-adheeraj .final-stats > div { background: #081235; }
.game-screen.theme-adheeraj .ghost-button { color: #9fb8d4; }
@keyframes pop { from { transform: scale(.85) rotate(2deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.over-icon { display: grid; place-items: center; width: 57px; height: 57px; margin: -58px auto 13px; border-radius: 50%; border: 3px solid var(--ink); background: var(--yellow); font-size: 27px; transform: rotate(-10deg); }
.game-over-card .eyebrow { color: var(--pink); }
.game-over-card h2 { font: 700 42px "Fredoka", sans-serif; margin: 7px 0 8px; letter-spacing: -.04em; }
.game-over-card h2 span { color: var(--pink); }
.roast-quote { min-height: 95px; display: flex; align-items: center; justify-content: center; position: relative; margin: 11px 0 14px; padding: 18px 32px; background: #ffe5d5; border-radius: 17px; transform: rotate(-1deg); }
.roast-quote p { margin: 0; font-size: 18px; line-height: 1.12; }
.quote-mark { position: absolute; top: 6px; left: 12px; color: var(--coral); font: 700 38px Georgia, serif; }
.quote-mark.close { top: auto; left: auto; right: 12px; bottom: -9px; }
.final-stats { display: flex; justify-content: center; gap: 12px; margin: 14px 0 20px; }
.final-stats > div { min-width: 85px; padding: 8px 12px; background: white; border-radius: 12px; }
.final-stats b { font: 700 25px "Fredoka", sans-serif; }
.modal-actions { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.ghost-button { text-decoration: underline; font-size: 13px; }

@media (max-width: 750px) {
  .screen { padding: 26px 20px; }
  .brand-lockup { justify-content: center; }
  .selection-copy { margin-top: 55px; }
  .selection-copy h2 { font-size: 44px; }
  .subcopy { font-size: 15px; }
  .character-grid { gap: 12px; margin-top: 30px; width: 100%; justify-content: center; }
  .character-card { padding: 17px 10px 14px; border-radius: 22px; }
  .avatar-ring { width: min(31vw, 130px); height: min(31vw, 130px); }
  .character-name { font-size: 21px; }
  .character-tag { font-size: 8px; }
  .game-screen { padding: 19px 14px; }
  .game-header { margin-bottom: 13px; }
  .game-logo { font-size: 17px; }
  .back-button span { display: none; }
  .score-pills > div { min-width: 54px; padding-inline: 6px; }
  .score-pills strong { font-size: 18px; }
  .game-layout { display: block; }
  .play-area { max-width: 420px; }
}