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

:root {
    font-family: 'DM Sans', sans-serif;
    color: #18212f;
    background: #f4f7fb;
    --ink: #18212f;
    --muted: #687386;
    --line: #dfe5ee;
    --blue: #2956d7;
    --blue-dark: #1f43ad;
    --board: #2956d7;
    --red: #ff5d68;
    --yellow: #ffc94d;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
#blazor-error-ui { display: none; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.app-version { position: fixed; right: 14px; bottom: 10px; z-index: 10; color: var(--muted); font-size: .72rem; opacity: .72; }
.loading-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #e7edff 0, #f4f7fb 48%, #eef2f8 100%); }
.loading-card { display: flex; align-items: center; gap: 28px; width: min(100%, 430px); padding: 28px; background: rgba(255,255,255,.9); border: 1px solid rgba(223,229,238,.9); border-radius: 24px; box-shadow: 0 22px 60px rgba(34,52,84,.13); }
.loading-board { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 9px; background: var(--board); border-radius: 13px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), 0 10px 20px rgba(41,86,215,.2); }
.loading-board span { width: 18px; height: 18px; border-radius: 50%; background: #f1f5ff; box-shadow: inset 0 2px 3px rgba(0,0,0,.08); }
.loading-board .loading-piece { animation: loading-drop 1.8s cubic-bezier(.2,.8,.25,1.15) infinite; }
.loading-board .loading-piece.red { background: var(--red); box-shadow: inset 0 2px 3px rgba(160,25,39,.25), 0 2px 0 #dc414e; }
.loading-board .loading-piece.yellow { background: var(--yellow); box-shadow: inset 0 2px 3px rgba(166,112,0,.22), 0 2px 0 #e0aa2a; }
.loading-board .loading-piece:nth-child(9) { animation-delay: .1s; }
.loading-board .loading-piece:nth-child(17) { animation-delay: .22s; }
.loading-board .loading-piece:nth-child(18) { animation-delay: .34s; }
.loading-copy { display: grid; gap: 5px; }
.loading-copy strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; letter-spacing: -.03em; }
.loading-copy > span { color: var(--muted); font-size: .9rem; }
.loading-progress-text { min-height: 1.2em; color: var(--blue); font-size: .78rem; font-weight: 700; }
@keyframes loading-drop {
    0%, 12% { transform: translateY(-13px); opacity: .35; }
    32%, 100% { transform: translateY(0); opacity: 1; }
}

.game-shell { max-width: 1120px; margin: 0 auto; padding: 56px 24px 72px; }
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 34px; }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .14em; font-size: .73rem; font-weight: 700; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; margin: 8px 0; letter-spacing: -.04em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: .98; max-width: 620px; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.35rem; }
p { color: var(--muted); line-height: 1.55; }
.hero p { max-width: 560px; font-size: 1.05rem; }
.panel { background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 55px rgba(34, 52, 84, .08); }
.mode-picker { max-width: 760px; padding: clamp(24px, 5vw, 48px); margin: 0 auto; text-align: center; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: #f8faff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; color: var(--ink); transition: transform .2s, border-color .2s, box-shadow .2s; }
.mode-card:hover { transform: translateY(-4px); border-color: #9aaff3; box-shadow: 0 12px 28px rgba(41, 86, 215, .12); }
.mode-card span:last-child { color: var(--muted); font-size: .92rem; }
.mode-icon { color: var(--blue); font-size: 1.8rem; }
.online-panel { max-width: 680px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); }
.back-link, .ghost-button { background: none; border: 0; color: var(--blue); padding: 0; font-weight: 600; }
.online-actions { display: grid; gap: 14px; margin-top: 28px; }
.join-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; outline-color: var(--blue); text-transform: uppercase; }
.primary-button, .secondary-button, .special-button { border: 0; border-radius: 12px; padding: 13px 18px; font-weight: 700; transition: transform .2s, background .2s; }
.primary-button { color: white; background: var(--blue); }
.primary-button:hover { background: var(--blue-dark); transform: translateY(-1px); }
.secondary-button { color: var(--blue); background: #eaf0ff; }
.special-button { width: 100%; color: var(--ink); background: #fff5d8; text-align: left; }
.special-button:hover { transform: translateY(-2px); }
.special-symbol { color: #c18b00; margin-right: 8px; }
.full-width { width: 100%; margin-top: 18px; }
.error-message { color: #bf3242; background: #fff0f2; border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.board-panel { padding: clamp(18px, 3vw, 32px); }
.controls-panel { padding: 26px; }
.game-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.game-header h2 { margin-bottom: 0; }
.board-wrap { max-width: 690px; margin: 0 auto; }
.column-actions, .board { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(4px, 1vw, 9px); }
.column-actions { margin-bottom: 8px; }
.drop-button { border: 0; border-radius: 9px; background: #eff3ff; color: var(--blue); height: 30px; font-weight: 700; }
.drop-button:not(:disabled):hover { background: #dce5ff; }
.board { background: var(--board); border: 8px solid var(--board); border-radius: 18px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.08), 0 20px 35px rgba(41,86,215,.2); }
.cell { aspect-ratio: 1; display: grid; place-items: center; background: #f1f5ff; border-radius: 50%; overflow: visible; }
.piece { width: 82%; height: 82%; border-radius: 50%; background: #dce3f1; box-shadow: inset 0 3px 5px rgba(0,0,0,.08); }
.cell.red .piece { background: var(--red); box-shadow: inset 0 3px 5px rgba(160, 25, 39, .25), 0 3px 0 #dc414e; }
.cell.yellow .piece { background: var(--yellow); box-shadow: inset 0 3px 5px rgba(166, 112, 0, .22), 0 3px 0 #e0aa2a; }
.cell.last-move { position: relative; z-index: 3; }
.cell.last-move .piece { position: relative; z-index: 4; outline: 4px solid rgba(255,255,255,.7); outline-offset: -8px; animation: piece-fall .82s cubic-bezier(.2,.8,.25,1.15); }
.cell.special-move .piece { outline-color: #fff4a8; animation: special-fall 1.05s cubic-bezier(.18,.82,.25,1.2); }
.game-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.player-status { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; border: 1px solid transparent; }
.player-status.active { background: #f5f7ff; border-color: #cbd7ff; }
.player-status strong, .player-status small { display: block; }
.player-status small { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.player-token { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.player-token.red { background: var(--red); }
.player-token.yellow { background: var(--yellow); }
.waiting { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; margin-bottom: 18px; background: #f7f9ff; border-radius: 14px; text-align: center; }
.waiting span { color: var(--muted); }
.waiting b { color: var(--blue); letter-spacing: .12em; }
.pulse-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 7px #e2e9ff; animation: pulse 1.5s infinite; margin: 6px; }
.hint { font-size: .85rem; color: #ad7900; }
@keyframes piece-fall {
    0% { transform: translateY(var(--fall-distance)); opacity: .35; }
    72% { transform: translateY(4px); opacity: 1; }
    88% { transform: translateY(-2px); }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes special-fall {
    0% { transform: translateY(var(--fall-distance)) rotate(-24deg) scale(.65); opacity: .2; filter: brightness(1.8) saturate(.8); box-shadow: 0 0 0 0 rgba(255, 215, 72, 0); }
    48% { transform: translateY(5px) rotate(16deg) scale(1.08); opacity: 1; filter: brightness(1.35) saturate(1.2); box-shadow: 0 0 22px 8px rgba(255, 215, 72, .65); }
    72% { transform: translateY(-4px) rotate(-7deg) scale(.98); }
    88% { transform: translateY(2px) rotate(3deg) scale(1.02); box-shadow: 0 0 12px 3px rgba(255, 215, 72, .35); }
    100% { transform: translateY(0) rotate(0) scale(1); filter: brightness(1) saturate(1); box-shadow: none; }
}
@keyframes pulse { 50% { box-shadow: 0 0 0 12px #e2e9ff; opacity: .65; } }
@media (max-width: 760px) {
    .game-shell { padding: 30px 14px 46px; }
    .loading-card { gap: 20px; padding: 22px; }
    .loading-board span { width: 15px; height: 15px; }
    .hero { margin-bottom: 24px; }
    .mode-grid, .game-layout { grid-template-columns: 1fr; }
    .controls-panel { order: -1; }
    .board-panel { padding: 14px; }
    .board { border-width: 5px; border-radius: 13px; }
    .game-header { margin-bottom: 14px; }
    .game-footer { gap: 6px; }
    .player-status { padding: 9px 7px; font-size: .85rem; }
    .player-status small { font-size: .66rem; }
}