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

:root {
  --sand: #f4ead8;
  --paper: #fffaf0;
  --paper-deep: #f7f0e3;
  --ink: #173b4d;
  --muted: #667d82;
  --line: #d9c9aa;
  --turquoise: #159a9c;
  --turquoise-dark: #087477;
  --lapis: #174b77;
  --coral: #c85b45;
  --gold: #d6a84f;
  --mint: #c8e6dc;
  --shadow: 0 22px 50px rgba(23, 59, 77, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--sand);
  font-family: 'Vazirmatn', sans-serif;
  background-image:
    linear-gradient(45deg, rgba(23, 75, 119, .045) 25%, transparent 25%, transparent 75%, rgba(23, 75, 119, .045) 75%),
    linear-gradient(45deg, rgba(21, 154, 156, .04) 25%, transparent 25%, transparent 75%, rgba(21, 154, 156, .04) 75%);
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
}

button { font-family: inherit; }
.hidden { display: none !important; }
.app-shell { max-width: 1240px; min-height: 100vh; margin: auto; padding: 28px 48px 22px; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 19px; border-bottom: 2px solid var(--gold); }
.logo { color: var(--lapis); font-size: 16px; font-weight: 800; letter-spacing: .12em; }
.logo span { color: var(--coral); font-size: 23px; margin-right: 8px; }
.logo b { color: var(--turquoise-dark); font-size: 10px; letter-spacing: .24em; margin-left: 5px; }
.top-actions { display: flex; align-items: center; gap: 20px; }
.round-label { color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .13em; }
.round-label strong { color: var(--ink); }
.sound-button { width: 40px; height: 40px; border: 1px solid var(--gold); border-radius: 50%; color: var(--lapis); background: var(--paper); font-size: 21px; cursor: pointer; box-shadow: 0 3px 8px rgba(23, 59, 77, .1); }
.layout { display: grid; grid-template-columns: minmax(280px, 390px) minmax(400px, 570px); justify-content: space-between; align-items: center; gap: 70px; flex: 1; padding: 45px 4% 30px; }
.sidebar { align-self: center; }
.intro { margin-bottom: 48px; }
.kicker, .panel-heading > span, .player-name, .best-of, footer, .game-heading { font: 10px 'DM Mono', monospace; letter-spacing: .15em; }
.kicker { color: var(--coral); margin: 0 0 16px; }
.intro h1 { color: var(--lapis); font-size: clamp(50px, 6vw, 74px); letter-spacing: -.07em; line-height: .95; margin: 0; font-weight: 800; }
.intro h1 span { color: var(--turquoise-dark); }
.description { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 20px 0 0; }
.panel { margin-top: 30px; }
.panel-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.panel-heading > span { color: var(--coral); }
.panel-heading h2 { color: var(--lapis); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin: 0; font-weight: 800; }
.mode-options, .difficulty-options { display: flex; gap: 8px; }
.mode, .difficulty { position: relative; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); text-align: left; cursor: pointer; transition: .2s; }
.mode { display: flex; align-items: center; gap: 11px; flex: 1; padding: 12px 13px; }
.mode:hover, .difficulty:hover { border-color: var(--turquoise); transform: translateY(-1px); }
.mode.active, .difficulty.active { border-color: var(--turquoise-dark); background: #e1f1eb; box-shadow: 0 0 0 2px var(--turquoise-dark); }
.option-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: var(--turquoise-dark); background: var(--mint); font-size: 17px; }
.option-icon.people { color: var(--lapis); background: #dce5f1; font-size: 15px; letter-spacing: -6px; padding-right: 6px; }
.mode strong, .difficulty strong { display: block; font-size: 12px; }
.mode small, .difficulty small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; white-space: nowrap; }
.mode i, .difficulty i { display: none; color: var(--turquoise-dark); font-style: normal; font-size: 11px; margin-left: auto; }
.mode.active i, .difficulty.active i { display: block; }
.difficulty-options { flex-direction: column; }
.difficulty { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.difficulty-icon { width: 30px; text-align: center; font-size: 23px; line-height: 30px; }
.easy-icon { color: var(--turquoise); }.hard-icon { color: var(--coral); }.impossible-icon { color: var(--lapis); font-size: 27px; }

.game-card { position: relative; overflow: hidden; padding: 28px 31px 27px; border: 1px solid var(--gold); border-radius: 90px 90px 22px 22px; background: var(--paper); box-shadow: var(--shadow); }
.game-card::before { content: ''; position: absolute; top: 0; left: 50%; width: 92px; height: 8px; transform: translateX(-50%); background: var(--turquoise); border-radius: 0 0 8px 8px; }
.scoreboard { display: flex; align-items: center; gap: 10px; margin-bottom: 31px; }
.score-card { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 12px 13px; border: 1px solid transparent; border-radius: 11px; background: var(--paper-deep); }
.score-card.active { border-color: var(--lapis); background: #ead79f; }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; font-size: 21px; }
.player-avatar { color: var(--coral); background: #f2d3c5; }.bot-avatar { color: var(--lapis); background: #d4e4eb; }
.score-card > div:nth-child(2) { min-width: 0; }.player-name { display: block; color: var(--muted); font-size: 9px; letter-spacing: .11em; white-space: nowrap; }.score-card strong { display: block; font-size: 25px; line-height: 1.1; margin-top: 3px; }.mark { margin-left: auto; font-size: 27px; font-weight: 600; }.x { color: var(--coral); }.o { color: var(--turquoise-dark); }.versus { color: var(--gold); font: 10px 'DM Mono', monospace; }
.game-heading { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; margin-bottom: 9px; }.game-heading > div { display: flex; align-items: center; gap: 7px; color: var(--ink); }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 4px rgba(21, 154, 156, .16); }.best-of { color: var(--muted); font-size: 9px; }.status { text-align: center; font-size: 14px; font-weight: 700; margin: 0 0 15px; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.cell { aspect-ratio: 1; border: 1px solid #d4c29d; border-radius: 8px; color: var(--ink); background: #f8f0df; font-size: clamp(62px, 10vw, 106px); line-height: 1; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }.cell:hover:not(:disabled) { background: #e6f2ec; transform: translateY(-2px); box-shadow: 0 5px 14px rgba(23, 75, 119, .14); }.cell:disabled { cursor: default; }.cell.x { color: var(--coral); }.cell.o { color: var(--turquoise-dark); }.cell.winner { background: #ead79f; border-color: var(--lapis); transform: scale(.97); }
.actions { display: flex; gap: 9px; margin-top: 17px; }.actions button { border: 1px solid var(--line); border-radius: 6px; padding: 12px 15px; font-size: 12px; font-weight: 700; cursor: pointer; }.secondary { color: var(--muted); background: transparent; }.primary { margin-left: auto; color: #fff; background: var(--lapis); }.primary span { color: #e8c66d; font-size: 17px; margin-left: 12px; }
footer { padding-top: 10px; color: var(--muted); } footer span { margin-right: 11px; } footer span:nth-child(2) { color: var(--coral); }
@media (max-width: 850px) { .app-shell { padding: 23px 25px 20px; }.layout { grid-template-columns: 1fr; gap: 38px; width: 100%; max-width: 570px; margin: auto; padding: 38px 0 25px; }.intro { margin-bottom: 32px; }.panel { margin-top: 23px; }.difficulty-options { flex-direction: row; }.difficulty { flex: 1; }.difficulty small { white-space: normal; }.game-card { order: -1; } .sidebar { width: 100%; } }
@media (max-width: 520px) { .app-shell { padding: 19px 16px; }.logo b, .round-label { display: none; }.layout { padding-top: 25px; }.game-card { padding: 20px 17px 19px; border-radius: 60px 60px 17px 17px; }.intro h1 { font-size: 56px; }.mode-options { flex-direction: column; }.difficulty-options { gap: 6px; }.difficulty { gap: 6px; padding: 9px 7px; }.difficulty-icon { width: 24px; }.difficulty strong { font-size: 11px; }.difficulty small { font-size: 9px; }.difficulty i { display: none !important; }.actions button { padding: 11px 12px; } }

/* Old Persian house / manuscript edition */
:root { --sand: #d8c39d; --paper: #efe1bf; --paper-deep: #e4d0a5; --ink: #38271d; --muted: #806a50; --line: #a6875c; --turquoise: #176f70; --turquoise-dark: #0d5154; --lapis: #214b5c; --coral: #8b3f2e; --gold: #ae7b31; --mint: #c4d2b4; --shadow: 0 12px 0 rgba(56,39,29,.12); }
body { color: var(--ink); background-color: var(--sand); background-image: radial-gradient(rgba(56,39,29,.12) .7px, transparent .8px), linear-gradient(90deg, transparent 49%, rgba(139,63,46,.08) 50%, transparent 51%); background-size: 7px 7px, 100% 100%; }
body::before, body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; border: 10px solid var(--turquoise-dark); outline: 2px solid var(--gold); outline-offset: -5px; }
body::before { inset: 13px; background: repeating-linear-gradient(45deg, transparent 0 11px, rgba(239,225,191,.22) 11px 13px); }
body::after { inset: 25px; border-width: 2px; border-color: var(--gold); }
.app-shell { max-width: 1320px; padding: 49px 70px 35px; }
.topbar { border-bottom: 3px double var(--gold); padding-bottom: 18px; }
.logo { color: var(--ink); font-family: Georgia, serif; font-size: 20px; letter-spacing: .18em; }.logo span { color: var(--coral); }.logo b { color: var(--turquoise-dark); font-family: 'DM Mono', monospace; }
.top-actions { gap: 25px; }.round-label { color: var(--muted); }.sound-button { border: 2px solid var(--gold); border-radius: 3px; color: var(--ink); background: var(--paper); box-shadow: none; }
.layout { gap: 75px; padding: 54px 2% 38px; }
.intro { margin-bottom: 44px; }.kicker { color: var(--coral); font-family: Georgia, serif; font-size: 12px; letter-spacing: .2em; }.intro h1 { color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(54px, 6vw, 82px); font-weight: 700; letter-spacing: -.08em; line-height: .88; }.intro h1 span { color: var(--turquoise-dark); }.description { color: var(--muted); font-family: Georgia, serif; font-size: 16px; line-height: 1.65; }
.panel { margin-top: 34px; }.panel-heading { border-bottom: 1px solid var(--line); padding-bottom: 7px; }.panel-heading > span { color: var(--coral); }.panel-heading h2 { color: var(--ink); font-family: Georgia, serif; font-size: 15px; letter-spacing: .02em; }
.mode-options, .difficulty-options { gap: 9px; }.mode, .difficulty { border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: rgba(239,225,191,.72); box-shadow: inset 0 0 0 3px rgba(174,123,49,.08); }.mode { padding: 13px 12px; }.mode:hover, .difficulty:hover { border-color: var(--coral); transform: none; }.mode.active, .difficulty.active { border-color: var(--coral); background: #e0c98f; box-shadow: inset 0 0 0 3px rgba(139,63,46,.12); }.option-icon { border-radius: 2px; color: var(--turquoise-dark); background: #bdd0b2; }.option-icon.people { color: var(--lapis); background: #c2c9b3; }.mode strong, .difficulty strong { font-family: Georgia, serif; font-size: 14px; }.mode small, .difficulty small { color: var(--muted); }.mode i, .difficulty i { color: var(--coral); }
.game-card { border: 4px solid var(--turquoise-dark); border-radius: 0; background: var(--paper); box-shadow: var(--shadow); padding: 34px 36px 31px; }
.game-card::before { top: 0; width: 150px; height: 13px; border-radius: 0; background: var(--coral); box-shadow: 0 0 0 2px var(--gold); }
.game-card::after { content: '✦  ◇  ✦'; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); color: var(--gold); font: 13px Georgia, serif; letter-spacing: 8px; white-space: nowrap; }
.scoreboard { margin-bottom: 32px; }.score-card { border-radius: 0; background: rgba(216,195,157,.38); border-bottom: 2px solid var(--line); }.score-card.active { border-color: var(--coral); background: #dfc58a; }.avatar { border-radius: 2px; }.player-avatar { background: #e7c5ad; }.bot-avatar { background: #c7d5cb; }.player-name, .best-of, .game-heading { font-family: 'DM Mono', monospace; }.score-card strong { font-family: Georgia, serif; }.versus { color: var(--coral); }
.game-heading { color: var(--muted); }.game-heading > div { color: var(--ink); }.live-dot { border-radius: 0; background: var(--coral); box-shadow: none; }.status { font-family: Georgia, serif; font-size: 17px; }
.board { gap: 7px; padding: 7px; border: 2px solid var(--gold); background: var(--turquoise-dark); }.cell { border: 1px solid #b69661; border-radius: 0; color: var(--ink); background: #ead7ab; font-family: Georgia, serif; }.cell:hover:not(:disabled) { background: #e1c789; transform: none; box-shadow: none; }.cell.x { color: var(--coral); }.cell.o { color: var(--turquoise-dark); }.cell.winner { background: #caa85b; border-color: var(--coral); transform: none; }
.actions button { border-radius: 2px; font-family: Georgia, serif; }.secondary { color: var(--muted); }.primary { color: var(--paper); background: var(--turquoise-dark); }.primary span { color: #e5c878; } footer { color: var(--muted); font-family: 'DM Mono', monospace; }
@media (max-width: 850px) { .app-shell { padding: 43px 48px 28px; } }
@media (max-width: 520px) { .app-shell { padding: 38px 30px 25px; }.game-card { padding: 29px 19px 22px; border-radius: 0; }.game-card::after { font-size: 11px; letter-spacing: 4px; }.intro h1 { font-size: 57px; } }

/* Modern baddie edition */
:root { --sand: #eef8ff; --paper: rgba(255,255,255,.82); --paper-deep: #f4fbff; --ink: #17243d; --muted: #71809a; --line: #d8e8f5; --turquoise: #4bb9ff; --turquoise-dark: #167ee8; --lapis: #1d4ed8; --coral: #ff5c91; --gold: #ffd166; --mint: #d9f6ff; --shadow: 0 24px 70px rgba(37, 105, 170, .16); }
body { color: var(--ink); overflow-x: hidden; background: #eef8ff; background-image: radial-gradient(circle at 12% 8%, rgba(105,205,255,.4), transparent 25%), radial-gradient(circle at 88% 85%, rgba(255,113,174,.22), transparent 28%), linear-gradient(135deg, #f9fdff 0%, #e8f6ff 52%, #f3efff 100%); }
body::before { z-index: -1; inset: auto; top: -160px; right: -100px; width: 440px; height: 440px; border: 0; outline: 0; border-radius: 50%; background: rgba(255,255,255,.36); filter: blur(2px); }
body::after { z-index: -1; inset: auto; bottom: -190px; left: -140px; width: 480px; height: 480px; border: 0; outline: 0; border-radius: 50%; background: rgba(192,235,255,.4); }
.app-shell { max-width: 1280px; padding: 28px 54px 24px; }
.topbar { padding-bottom: 18px; border-bottom: 1px solid rgba(116,170,211,.25); }.logo { color: var(--ink); font-family: 'Vazirmatn', sans-serif; font-size: 16px; letter-spacing: .16em; }.logo span { color: var(--coral); }.logo b { color: var(--turquoise-dark); font-family: 'DM Mono', monospace; }
.top-actions { gap: 16px; }.round-label { color: var(--muted); }.round-label strong { color: var(--ink); }.sound-button { width: 42px; height: 42px; border: 1px solid rgba(105,170,219,.32); border-radius: 50%; color: var(--lapis); background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(46,117,171,.1); backdrop-filter: blur(12px); }
.layout { grid-template-columns: minmax(280px, 390px) minmax(420px, 590px); gap: 80px; padding: 50px 3% 35px; }
.intro { margin-bottom: 45px; }.kicker { color: var(--coral); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em; }.intro h1 { color: var(--ink); font-family: 'Vazirmatn', sans-serif; font-size: clamp(52px, 6vw, 78px); font-weight: 800; letter-spacing: -.09em; line-height: .95; }.intro h1 span { color: var(--turquoise-dark); }.description { color: var(--muted); font-family: 'Vazirmatn', sans-serif; font-size: 14px; line-height: 1.7; }
.panel { margin-top: 30px; }.panel-heading { gap: 11px; margin-bottom: 12px; }.panel-heading > span { color: var(--coral); }.panel-heading h2 { color: var(--ink); font-family: 'Vazirmatn', sans-serif; font-size: 13px; }
.mode-options, .difficulty-options { gap: 9px; }.mode, .difficulty { border: 1px solid rgba(131,182,218,.3); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.68); box-shadow: 0 7px 18px rgba(46,117,171,.05); backdrop-filter: blur(10px); }.mode { padding: 13px 12px; }.mode:hover, .difficulty:hover { border-color: var(--turquoise); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(46,117,171,.12); }.mode.active, .difficulty.active { border-color: var(--turquoise-dark); background: rgba(211,243,255,.9); box-shadow: 0 0 0 2px var(--turquoise-dark), 0 8px 20px rgba(46,117,171,.12); }.option-icon { border-radius: 11px; color: var(--turquoise-dark); background: #d7f5ff; }.option-icon.people { color: var(--lapis); background: #e4e2ff; }.mode strong, .difficulty strong { font-family: 'Vazirmatn', sans-serif; font-size: 12px; }.mode small, .difficulty small { color: var(--muted); }.mode i, .difficulty i { color: var(--turquoise-dark); }
.game-card { border: 1px solid rgba(115,184,226,.38); border-radius: 30px; background: rgba(255,255,255,.78); box-shadow: var(--shadow); backdrop-filter: blur(20px); padding: 30px 32px 28px; }.game-card::before { top: 0; width: 110px; height: 7px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, var(--turquoise-dark), var(--coral)); box-shadow: none; }.game-card::after { content: ''; }
.scoreboard { margin-bottom: 31px; }.score-card { border: 1px solid transparent; border-radius: 16px; background: rgba(232,245,252,.72); }.score-card.active { border-color: var(--turquoise); background: linear-gradient(135deg, #d9f5ff, #e9f7ff); }.avatar { border-radius: 12px; }.player-avatar { background: #ffe0ec; color: var(--coral); }.bot-avatar { background: #d9eeff; color: var(--lapis); }.player-name { font-family: 'DM Mono', monospace; }.score-card strong { font-family: 'Vazirmatn', sans-serif; }.versus { color: var(--coral); font-weight: 700; }
.game-heading { color: var(--muted); }.game-heading > div { color: var(--ink); }.live-dot { background: #28c987; border-radius: 50%; box-shadow: 0 0 0 4px rgba(40,201,135,.13); }.status { color: var(--ink); font-family: 'Vazirmatn', sans-serif; font-size: 14px; }
.board { gap: 10px; padding: 0; border: 0; background: transparent; }.cell { border: 1px solid #d4e8f4; border-radius: 18px; color: var(--ink); background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(237,249,255,.9)); font-family: 'Vazirmatn', sans-serif; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 15px rgba(46,117,171,.06); }.cell:hover:not(:disabled) { background: #e1f6ff; transform: translateY(-4px); box-shadow: 0 12px 22px rgba(46,117,171,.15); }.cell.x { color: var(--coral); }.cell.o { color: var(--turquoise-dark); }.cell.winner { background: linear-gradient(145deg, #fff0ae, #ffe082); border: 3px solid #f1b82d; transform: scale(.97); animation: winning-cell 1s ease-in-out infinite alternate; box-shadow: 0 0 0 4px rgba(255,209,102,.28), 0 0 24px rgba(255,184,45,.5); }
.actions { gap: 10px; margin-top: 19px; }.actions button { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-family: 'Vazirmatn', sans-serif; }.secondary { color: var(--muted); background: rgba(255,255,255,.5); }.primary { color: #fff; background: linear-gradient(135deg, var(--lapis), var(--turquoise-dark)); box-shadow: 0 8px 16px rgba(29,78,216,.2); }.primary span { color: var(--gold); } footer { color: var(--muted); font-family: 'DM Mono', monospace; }
@media (max-width: 850px) { .app-shell { padding: 24px 28px 20px; }.layout { gap: 40px; padding-top: 38px; } }
@media (max-width: 520px) { .app-shell { padding: 19px 16px; }.game-card { padding: 22px 17px 19px; border-radius: 24px; }.intro h1 { font-size: 56px; }.cell { border-radius: 14px; }.mode { border-radius: 14px; } }

/* Surprise option: Midnight Glow */
.midnight { --sand: #0d1830; --paper: rgba(20, 35, 65, .86); --paper-deep: #18294b; --ink: #eef8ff; --muted: #91a9c9; --line: #2d4a78; --turquoise: #65d6ff; --turquoise-dark: #3b9dff; --lapis: #86a9ff; --coral: #ff70b1; --gold: #ffe08a; --mint: #173b62; background-color: #0d1830; background-image: radial-gradient(circle at 15% 12%, rgba(88,183,255,.2), transparent 25%), radial-gradient(circle at 84% 84%, rgba(255,93,177,.17), transparent 28%), linear-gradient(135deg, #0d1830, #14284b 60%, #1b1d48); transition: background .45s ease, color .3s ease; }
.midnight .game-card { border-color: rgba(101,214,255,.6); box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 35px rgba(59,157,255,.12); }.midnight .cell { background: linear-gradient(145deg, #1d345b, #142743); border-color: #355887; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 15px rgba(0,0,0,.18); }.midnight .cell:hover:not(:disabled) { background: #244974; box-shadow: 0 0 20px rgba(101,214,255,.2); }.midnight .score-card { background: rgba(28,52,88,.72); }.midnight .score-card.active { background: linear-gradient(135deg, #264d73, #263a76); }.midnight .mode, .midnight .difficulty { background: rgba(23,46,80,.7); }.midnight .mode.active, .midnight .difficulty.active { background: #1d456b; }.midnight .sound-button { color: var(--gold); background: rgba(21,40,72,.8); border-color: #38618e; }.midnight .game-card::after { content: '✦  ✧  ✦'; color: var(--gold); }
.cell:active:not(:disabled) { transform: scale(.94); }
.celebration { position: fixed; z-index: 20; inset: 0; pointer-events: auto; display: grid; place-items: center; overflow: hidden; background: rgba(30,70,125,.2); backdrop-filter: blur(5px); }
.celebration-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: min(560px, 90vw); min-height: 520px; justify-content: center; padding: 55px 45px 40px; border: 1px solid rgba(255,255,255,.95); border-radius: 32px; color: #17243d; background: rgba(255,255,255,.97); box-shadow: 0 30px 90px rgba(22,76,145,.3), 0 0 0 10px rgba(255,255,255,.28); animation: victory-pop .6s cubic-bezier(.2,1.5,.4,1) both; text-align: center; }.celebration-close { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #71809a; background: #eef6fc; font-size: 29px; line-height: 1; cursor: pointer; transition: .2s; }.celebration-close:hover { color: #fff; background: #ff5c91; transform: rotate(90deg); }.trophy { font-size: clamp(90px, 17vw, 145px); line-height: .9; filter: drop-shadow(0 12px 10px rgba(100,35,80,.2)); animation: trophy-bounce 1s ease-in-out infinite alternate; }.celebration-card strong { color: #167ee8; font-size: clamp(52px, 10vw, 86px); line-height: 1; letter-spacing: -.08em; text-shadow: 0 4px 0 #d9edff; }.celebration-card span { color: #71809a; font-size: 14px; font-weight: 700; letter-spacing: .12em; }.celebration-action { margin-top: 22px; border: 0; border-radius: 13px; padding: 14px 22px; color: #fff; background: linear-gradient(135deg, #1d4ed8, #167ee8); font: 700 13px 'Vazirmatn', sans-serif; cursor: pointer; box-shadow: 0 9px 18px rgba(29,78,216,.2); }.celebration-action b { color: #ffd166; margin-left: 10px; font-size: 17px; }.celebration i { position: absolute; top: -12vh; left: calc(50% + var(--x)); width: 10px; height: 21px; border-radius: 3px; background: hsl(calc(var(--i) * 37), 90%, 62%); box-shadow: 0 2px 5px rgba(35,45,115,.18); animation: paper-fall 3.8s cubic-bezier(.18,.7,.3,1) var(--delay) both; transform: rotate(0); }.celebration i:nth-of-type(3n) { width: 6px; height: 27px; }.celebration i:nth-of-type(4n) { border-radius: 50%; }.celebration i:nth-of-type(5n) { width: 15px; height: 8px; }
@keyframes victory-pop { from { opacity: 0; transform: scale(.45) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes trophy-bounce { from { transform: rotate(-6deg) translateY(2px) scale(1); } to { transform: rotate(6deg) translateY(-8px) scale(1.06); } }
@keyframes paper-fall { 0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(0deg); } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 125vh, 0) rotate(var(--spin)); } }
.loss-celebration .celebration-card { background: linear-gradient(145deg, #fff, #fff1f7); }.loss-celebration .celebration-card strong { color: #ff5c91; text-shadow: 0 4px 0 #ffe0ec; }.loss-celebration .trophy { filter: grayscale(.25) drop-shadow(0 10px 8px rgba(100,35,80,.16)); }.draw-celebration { background: rgba(30,70,125,.12); backdrop-filter: blur(3px); }.draw-celebration .celebration-card { min-height: 430px; background: #fff; box-shadow: 0 20px 60px rgba(37,105,170,.18); }.draw-celebration .celebration-card strong { color: #71809a; text-shadow: none; }.draw-celebration .trophy { filter: grayscale(1); animation: none; }
.clown-difficulty { border-color: rgba(255,92,145,.35); }.clown-difficulty .clown-icon { font-size: 21px; filter: saturate(1.3); }.clown-difficulty.active { border-color: #ff5c91; background: #fff0f7; box-shadow: 0 0 0 2px #ff5c91, 0 8px 20px rgba(255,92,145,.15); }
.series-score { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -17px auto 24px; padding: 9px 16px; width: fit-content; border: 1px solid rgba(105,170,219,.26); border-radius: 999px; color: var(--muted); background: rgba(232,245,252,.68); box-shadow: 0 5px 14px rgba(46,117,171,.06); animation: series-in .35s ease both; }.series-label { color: var(--turquoise-dark); font: 9px 'DM Mono', monospace; letter-spacing: .12em; }.series-score strong { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 17px; }.series-score b:first-child { color: var(--coral); }.series-score b:last-child { color: var(--turquoise-dark); }.series-score em { color: #a8bad0; font-size: 13px; font-style: normal; }.series-score small { font-size: 9px; white-space: nowrap; }.midnight .series-score { border-color: #355887; background: rgba(28,52,88,.72); }.midnight .series-label { color: var(--turquoise); }
@keyframes series-in { from { opacity: 0; transform: translateY(-5px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.game-card { overflow: visible; }.board { position: relative; }.clown-outside-mark { position: absolute; z-index: 3; left: var(--outside-left); top: var(--outside-top); display: grid; place-items: center; width: 30%; aspect-ratio: 1; border: 2px solid #167ee8; border-radius: 18px; color: #167ee8; background: #fff; font-size: clamp(52px, 8vw, 88px); line-height: 1; box-shadow: 0 8px 18px rgba(46,117,171,.14); transform: translate(-50%, -50%); animation: clown-cheat .45s cubic-bezier(.2,1.5,.4,1) both; }.clown-outside-mark::after { content: 'OUTSIDE'; position: absolute; top: -18px; left: 50%; color: #167ee8; font-size: 9px; font-weight: 900; letter-spacing: .12em; transform: translateX(-50%); }
@keyframes clown-cheat { from { opacity: 0; transform: translate(-50%, -50%) scale(.45); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 520px) { .clown-outside-mark { border-radius: 14px; font-size: 44px; }.clown-outside-mark::after { top: -15px; font-size: 7px; } }
@keyframes winning-cell { from { box-shadow: 0 0 0 3px rgba(255,209,102,.24), 0 0 12px rgba(255,184,45,.25); } to { box-shadow: 0 0 0 7px rgba(255,209,102,.35), 0 0 30px rgba(255,184,45,.62); } }
@keyframes confetti { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(calc((var(--i) - 16) * 7vw), 65vh) rotate(540deg); } }