/* =========================================
   SUSHI UNO — "Omakase Counter" theme
   Palette:
   --nori   #14100c  (wrap / deep bg)
   --rice   #f2e8d5  (plate / text-on-dark accents)
   --salmon #ff7a5c  (red suit)
   --wasabi #7cb518  (green suit)
   --tamago #f4b731  (yellow suit)
   --ocean  #2a8c8c  (blue suit — glaze teal, not neon blue)
   --soy    #241a13  (panel wood)
   --hanko  #d94a38  (stamp-red accent / primary CTA)
========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Nunito', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
html { height: -webkit-fill-available; }
body {
    background: #0c0906;
    color: #f2e8d5;
    height: 100vh; height: 100dvh; height: -webkit-fill-available;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden; position: relative; padding: 12px;
    background-image:
        radial-gradient(circle at top, #221913 0%, #0c0906 70%),
        repeating-linear-gradient(115deg, rgba(242,232,213,0.025) 0px, rgba(242,232,213,0.025) 2px, transparent 2px, transparent 26px);
    transition: background-color 0.6s ease;
}
/* Subtle plate-color wash keyed to the card in play */
body.theme-red    { background-color: #1d1210; }
body.theme-green  { background-color: #121a10; }
body.theme-yellow { background-color: #1d1810; }
body.theme-blue   { background-color: #0f1a1a; }

/* =========================================
   LOBBY SCREEN
========================================= */
#lobby-screen { position: fixed; inset: 0; background: rgba(12, 9, 6, 0.96); display: flex; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; }
.login-box { background: #1a130d; padding: 35px 25px; border-radius: 20px; text-align: center; border: 2px solid #2e2015; width: 100%; max-width: 380px; box-shadow: 0 15px 35px rgba(0,0,0,0.8), inset 0 1px 0 rgba(242,232,213,0.04); }
h2 { font-family: 'Baloo 2', 'Segoe UI', sans-serif; font-size: 34px; margin-bottom: 25px; font-weight: 800; letter-spacing: -0.5px; text-transform: uppercase; background: linear-gradient(90deg, #ff7a5c, #f4b731); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
input { padding: 15px; width: 100%; border-radius: 12px; border: 2px solid #2e2015; background: #0c0906; color: #f2e8d5; font-size: 16px; margin-bottom: 15px; text-align: center; outline: none; font-weight: bold; transition: all 0.2s; }
input::placeholder { color: #8a7a68; }
input:focus { border-color: #2a8c8c; box-shadow: 0 0 15px rgba(42, 140, 140, 0.25); }
.btn-group { display: flex; gap: 12px; margin-top: 10px; }
button { padding: 15px; background: #d94a38; border: none; color: #fff2ea; font-weight: 800; border-radius: 12px; cursor: pointer; font-size: 14px; flex: 1; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(217, 74, 56, 0.35); font-family: 'Nunito', sans-serif; }
button.alt { background: #2a8c8c; box-shadow: 0 4px 15px rgba(42, 140, 140, 0.35); }
button:active { transform: scale(0.95); }

.avatar-selection { margin-bottom: 25px; }
.avatar-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.avatar-option { font-size: 26px; padding: 10px; background: #241a13; border-radius: 16px; cursor: pointer; transition: all 0.2s; border: 2px solid #2e2015; }
.avatar-option.selected { border-color: #7cb518; background: rgba(124, 181, 24, 0.15); transform: translateY(-4px); box-shadow: 0 8px 20px rgba(124, 181, 24, 0.25); }

/* TOP BAR & OPPONENTS */
.top-bar { display: flex; flex-direction: column; gap: 8px; background: #1a130d; padding: 12px 18px; border-radius: 16px; border: 2px solid #2e2015; font-size: 13px; font-weight: bold; }
.top-row-meta { display: flex; justify-content: space-between; align-items: center; width: 100%; color: #b7a893; }
.utility-icons { font-size: 16px; display: flex; gap: 20px; align-items: center; }
#bot-injection-tray button { padding: 6px 12px; font-size: 11px; background: #7cb518; color: #14100c; box-shadow: 0 0 10px rgba(124,181,24,0.4); }

/* seats are positioned around the table — the container mirrors the table's own
   box exactly, so seat % coordinates are table-relative on every screen size */
.opponents { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 620px); aspect-ratio: 1.5 / 1; max-height: 96%; pointer-events: none; z-index: 6; }
.opp-card { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: auto; text-align: center; transition: all 0.3s; width: 118px; }
.seat-chip { background: #1a130d; border: 2px solid #2e2015; border-radius: 14px; padding: 6px 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.55); max-width: 100%; transition: all 0.3s; }
.seat-chip strong { font-size: 12px; display: block; color: #f2e8d5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-chip .seat-count { font-size: 10px; font-weight: 900; color: #ff9d85; letter-spacing: 0.5px; }

.active-border .seat-chip, .active-border { border-color: #7cb518 !important; }
.active-border .seat-chip { animation: radar-pulse 2s infinite; }
@keyframes radar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(124, 181, 24, 0.4); transform: translateY(-2px); }
    70% { box-shadow: 0 0 0 10px rgba(124, 181, 24, 0); transform: translateY(-2px); }
    100% { box-shadow: 0 0 0 0 rgba(124, 181, 24, 0); transform: translateY(-2px); }
}

.catchable { cursor: pointer; }
.catchable .seat-chip { border-color: #ff7a5c !important; animation: catch-pulse 1s infinite; }
@keyframes catch-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 92, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(255, 122, 92, 0); }
}

/* ARENA BOARD */
.board-center { display: flex; justify-content: center; align-items: center; flex-grow: 1; position: relative; margin: 6px 0 2px; overflow: visible; min-height: min(46vh, 420px); }
.direction-arrow { position: absolute; font-size: 11px; color: #b7a893; border: 2px solid #2e2015; padding: 8px 18px; border-radius: 20px; top: -15px; background: #1a130d; font-weight: 800; letter-spacing: 1.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }

/* Conveyor belt running behind the board */
/* linear conveyor retired — replaced by the orbiting ring on the table rim */
@keyframes conveyor-scroll { from { transform: translateY(-50%) translateX(0); } to { transform: translateY(-50%) translateX(-50%); } }

/* Sushi-rain confetti on victory */
.sushi-confetti { position: fixed; top: -40px; font-size: 1.8rem; pointer-events: none; z-index: 10050; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(115vh) rotate(360deg); opacity: 0.85; } }

/* NIGIRI CARDS */
.card { width: 95px; height: 140px; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; font-weight: 800; border: 4px solid #f2e8d5; box-shadow: 0 8px 20px rgba(0,0,0,0.6); text-transform: uppercase; cursor: pointer; user-select: none; position: relative; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.card:active { transform: scale(0.9) translateY(10px); z-index: 9999 !important; filter: brightness(1.15); }
.card-inner-icon { font-size: 2rem; margin: auto; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.card-corner { font-size: 0.9rem; line-height: 1; font-weight: 800; display: flex; width: 100%; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.card-corner.bottom { justify-content: flex-end; transform: rotate(180deg); }

.red    { background: linear-gradient(145deg, #ff9270, #d9503a); }
.blue   { background: linear-gradient(145deg, #3fb5b5, #1e6b6b); }
.green  { background: linear-gradient(145deg, #9bd93f, #5c8f13); }
.yellow { background: linear-gradient(145deg, #ffd166, #d99a1f); }
.wild   { background: conic-gradient(from 45deg, #ff7a5c 25%, #2a8c8c 25% 50%, #7cb518 50% 75%, #f4b731 75% 100%); border-color: #f2e8d5; }

.back {
    background: radial-gradient(circle at center, #f2e8d5 0%, #f2e8d5 34%, #ff9270 34% 58%, #14100c 58% 66%, #241a13 66% 100%);
    border-color: #14100c; color: #14100c; justify-content: center; align-items: center; font-size: 13px; letter-spacing: 1px;
}
.back::after { content: "🍣"; font-size: 1.8rem; position: absolute; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.back .card-inner-icon, .back span { display: none; }

/* HAND SCROLL & BOTTOM UTILITIES */
.hand-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding-bottom: env(safe-area-inset-bottom, 10px); }
.hand-utilities { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 450px; padding: 0 15px; }

.sort-btn { padding: 6px 14px; background: #241a13; border: 2px solid #2e2015; font-size: 12px; border-radius: 10px; color: #f2e8d5; font-weight: 800; cursor: pointer; text-transform: uppercase; transition: background 0.2s; }
.sort-btn:active { background: #d94a38; border-color: #d94a38; }
.danger-btn { background: #d94a38 !important; border: 2px solid #d94a38; padding: 6px 14px; font-size: 12px; border-radius: 10px; font-weight: 800; color: #fff2ea; cursor: pointer; animation: pulse-danger 1s infinite; text-transform: uppercase; }

@keyframes pulse-danger { 0%, 100% { box-shadow: 0 0 10px rgba(217,74,56,0.5); } 50% { box-shadow: 0 0 25px rgba(217,74,56,1); } }

#game-status { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; color: #b7a893; }
.pulse-text { color: #7cb518; text-shadow: 0 0 10px rgba(124,181,24,0.5); }

.hand-scroll { display: flex; width: 100%; max-width: 100vw; padding: 15px 25px 5px 25px; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; align-items: center; height: 170px; scrollbar-width: none; -webkit-overflow-scrolling: touch; perspective: 800px; }
.hand-scroll::-webkit-scrollbar { display: none; }
.hand-scroll .card { margin-right: -45px; flex-shrink: 0; transform-origin: bottom center; transform: rotate(var(--rot)) translateY(var(--ty, 0px)); transition: margin 0.3s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.game-controls-tray { display: flex; align-items: center; gap: 10px; width: 100%; background: #1a130d; padding: 10px 14px; border-radius: 18px; border: 2px solid #2e2015; }
.game-controls-tray input { padding: 12px 16px; font-size: 14px; border-radius: 12px; background: #0c0906; border: 2px solid #2e2015; color: #f2e8d5; outline: none; flex-grow: 1; font-weight: bold; }
.game-controls-tray button { padding: 12px 18px; font-size: 14px; border-radius: 12px; background: #2a8c8c; color: #fff2ea; border: none; font-weight: 800; }
.mini-emoji-bar { display: flex; gap: 10px; font-size: 1.4rem; padding-right: 10px; border-right: 2px solid #2e2015; }
.mini-emoji-bar span { cursor: pointer; transition: transform 0.1s; }
.mini-emoji-bar span:active { transform: scale(1.3); }

/* OVERLAYS, BUTTONS & MODALS */
#uno-call-btn { position: fixed; right: 20px; bottom: 85px; width: 65px; height: 65px; background: #f4b731; color: #14100c; font-weight: 800; font-size: 14px; border-radius: 50%; border: 4px solid #f2e8d5; cursor: pointer; z-index: 3000; display: flex; justify-content: center; align-items: center; transform: scale(0); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#uno-call-btn.active { transform: scale(1); animation: uno-panic 1.5s infinite; }
@keyframes uno-panic { 0%, 100% { box-shadow: 0 0 10px #f4b731; } 50% { box-shadow: 0 0 30px #f4b731; transform: scale(1.1); } }

#action-banner { position: fixed; top: 12%; left: 50%; transform: translateX(-50%) translateY(-30px); opacity: 0; padding: 12px 25px; border-radius: 25px; font-size: 15px; font-weight: 800; border: 2px solid rgba(242,232,213,0.15); z-index: 5000; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: #1a130d; color: #f2e8d5; pointer-events: none; text-align: center; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; }
#action-banner.show-banner { transform: translateX(-50%) translateY(0); opacity: 1; }

#color-picker { position: fixed; inset: 0; background: rgba(12,9,6,0.92); display: none; justify-content: center; align-items: center; z-index: 8888; }
.wheel { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: #1a130d; padding: 25px; border-radius: 24px; border: 2px solid #2e2015; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.color-btn { width: 90px; height: 90px; border-radius: 20px; cursor: pointer; border: 4px solid #f2e8d5; transition: transform 0.1s; }
.color-btn:active { transform: scale(0.9); }
.color-btn.red { background: linear-gradient(145deg, #ff9270, #d9503a); }
.color-btn.blue { background: linear-gradient(145deg, #3fb5b5, #1e6b6b); }
.color-btn.green { background: linear-gradient(145deg, #9bd93f, #5c8f13); }
.color-btn.yellow { background: linear-gradient(145deg, #ffd166, #d99a1f); }

#challenge-modal, #victory-screen, #howto-screen, #settings-screen { position: fixed; inset: 0; background: rgba(12,9,6,0.96); z-index: 10000; justify-content: center; align-items: center; }
.victory-box { background: #1a130d; padding: 45px 35px; border-radius: 24px; text-align: center; border: 2px solid #2e2015; box-shadow: 0 20px 60px rgba(0,0,0,0.8); animation: slamIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 90%; max-width: 400px; }
#victory-title { font-family: 'Baloo 2', 'Segoe UI', sans-serif; font-size: 40px; margin-bottom: 15px; font-weight: 800; color: #f4b731; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 4px 10px rgba(244,183,49,0.3); }
#victory-subtitle { font-size: 16px; color: #b7a893; margin-bottom: 30px; font-weight: bold; }
.play-again-btn { background: #7cb518; color: #14100c; font-size: 16px; font-weight: 800; padding: 16px 28px; border-radius: 12px; border: none; text-transform: uppercase; letter-spacing: 1px; width: 100%; cursor: pointer; }

@keyframes slamIn { 0% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.live-pop-bubble { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%) scale(0); background: #f2e8d5; color: #14100c; padding: 8px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; white-space: nowrap; opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; z-index: 100; box-shadow: 0 5px 15px rgba(0,0,0,0.4); }
.live-pop-bubble.pop-active { transform: translateX(-50%) scale(1); opacity: 1; }

.floating-emoji { position: fixed; bottom: -20px; font-size: 2.5rem; pointer-events: none; z-index: 9999; animation: float-up 2.5s ease-out forwards; left: var(--start-x); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
@keyframes float-up { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 1; transform: translateY(-20vh) scale(1.2); } 100% { transform: translateY(-100vh) scale(1); opacity: 0; } }

.vfx-card-fly { position: fixed; z-index: 9999; pointer-events: none; animation: flyAcross 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes flyAcross { 0% { transform: translate(var(--start-x), var(--start-y)) scale(1) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.3) rotate(360deg); opacity: 0; } }

/* =========================================
   SPLASH SCREEN
========================================= */
#splash-screen { position: fixed; inset: 0; background: #0c0906; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity 0.6s ease; }
#splash-screen.fade-out { opacity: 0; pointer-events: none; }
.splash-roll { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at center, #f2e8d5 0%, #f2e8d5 34%, #ff9270 34% 58%, #14100c 58% 66%, #241a13 66% 100%); animation: splash-spin-in 1.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
@keyframes splash-spin-in { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 70% { transform: scale(1.15) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); } }
.splash-title { font-family: 'Baloo 2', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: 1px; background: linear-gradient(90deg, #ff7a5c, #f4b731); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; animation: splash-fade-in 0.8s ease 0.4s forwards; }
@keyframes splash-fade-in { to { opacity: 1; } }
.splash-bar-track { width: 180px; height: 6px; border-radius: 6px; background: #241a13; overflow: hidden; }
.splash-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff7a5c, #f4b731); animation: splash-progress 1.7s ease 0.2s forwards; }
@keyframes splash-progress { to { width: 100%; } }

/* =========================================
   SETTINGS: toggle switches & swatches
========================================= */
.toggle-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 13px; font-weight: bold; color: #e4d6ba; }
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: #3d2b1f; border-radius: 26px; transition: 0.2s; }
.switch .slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #f2e8d5; border-radius: 50%; transition: 0.2s; }
.switch input:checked + .slider { background: #7cb518; }
.switch input:checked + .slider::before { transform: translateX(20px); }

.backstyle-swatches { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.backstyle-swatch { width: 60px; height: 84px; border-radius: 8px; border: 3px solid #2e2015; cursor: pointer; }
.backstyle-swatch.active { border-color: #7cb518; box-shadow: 0 0 10px rgba(124,181,24,0.4); }

.tutorial-dots { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.tutorial-dot { width: 8px; height: 8px; border-radius: 50%; background: #3d2b1f; }
.tutorial-dot.active { background: #7cb518; }

/* Alternate card-back styles, chosen in Settings */
body.backstyle-wrap .back { background: radial-gradient(circle at center, #14100c 0%, #14100c 60%, #241a13 100%); }
body.backstyle-wrap .back::after { content: "海"; font-size: 1.6rem; color: #d94a38; }
body.backstyle-bento .back { background: repeating-conic-gradient(#241a13 0% 25%, #1a130d 0% 50%) 0 / 20px 20px; border-color: #d94a38; }
body.backstyle-bento .back::after { content: "🍱"; font-size: 1.6rem; }

/* =========================================
   NEW: house rules, taunts, disconnect badges,
   swap picker, connection banner, leaderboard,
   locked skins, victory-screen scoreboard
========================================= */

/* Settings: disabled house-rule toggles for non-hosts mid-game */
.house-rule-toggle input:disabled + .slider { opacity: 0.4; cursor: not-allowed; }

/* Locked card-back skins (XP-gated) */
.backstyle-swatch { position: relative; }
.backstyle-swatch.locked { filter: grayscale(0.85) brightness(0.6); }
.skin-lock-icon { display: none; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; color: #f2e8d5; text-shadow: 0 2px 4px rgba(0,0,0,0.8); align-items: center; justify-content: center; }
.backstyle-swatch.locked .skin-lock-icon { display: flex; }

/* Taunt buttons */
.taunt-bar { display: flex; gap: 6px; overflow-x: auto; max-width: 150px; scrollbar-width: none; }
.taunt-bar::-webkit-scrollbar { display: none; }
.taunt-btn { flex-shrink: 0; padding: 8px 10px !important; font-size: 10px !important; background: #3d2b1f !important; color: #f4b731 !important; border-radius: 10px !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; font-weight: 800 !important; }
.taunt-btn:active { background: #7cb518 !important; color: #14100c !important; }

/* Disconnected opponent badge */
.opp-card.opp-offline { opacity: 0.55; }

/* 7-0 swap picker */
.swap-target { padding: 14px; background: #241a13; border: 2px solid #2e2015; border-radius: 12px; margin-bottom: 10px; cursor: pointer; font-weight: 800; font-size: 14px; transition: all 0.15s; }
.swap-target:hover, .swap-target:active { border-color: #f4b731; background: rgba(244,183,49,0.1); }

/* Connection banner (Firebase reconnect / PWA offline) */
#connection-banner { position: fixed; top: 0; left: 0; right: 0; background: #d94a38; color: #fff2ea; text-align: center; font-size: 12px; font-weight: 800; padding: 10px; z-index: 20000; transform: translateY(-100%); transition: transform 0.3s ease; text-transform: uppercase; letter-spacing: 1px; }
#connection-banner.show-connection-banner { transform: translateY(0); }

/* Victory screen: round scoreline + action stack */
#victory-actions { display: flex; flex-direction: column; }
#victory-actions button { width: 100%; }

/* Lobby table-rules collapsible */
.lobby-rules-box { background: #14100c; border: 2px solid #2e2015; border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
#lobby-rules-chevron { transition: transform 0.2s ease; display: inline-block; }

/* Leaderboard entries inherit victory-box, no extra rules needed beyond spacing already inline */

/* Alternate card-back styles: XP-unlockable skins */
body.backstyle-sakura .back { background: radial-gradient(circle at center, #2a1a20 0%, #2a1a20 55%, #ff9ec4 55% 62%, #14100c 62% 100%); }
body.backstyle-sakura .back::after { content: "🌸"; font-size: 1.6rem; }
body.backstyle-gold .back { background: radial-gradient(circle at center, #241a13 0%, #241a13 55%, #f4b731 55% 64%, #14100c 64% 100%); border-color: #f4b731; }
body.backstyle-gold .back::after { content: "🍤"; font-size: 1.6rem; }

/* Google sign-in */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #f2e8d5 !important; color: #14100c !important; box-shadow: 0 4px 15px rgba(242,232,213,0.15) !important; font-size: 13px !important; }
.google-btn:active { background: #e4d6ba !important; }
#auth-profile { animation: slamIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* iOS Add-to-Home-Screen hint */
#ios-install-hint { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; background: #1a130d; border: 2px solid #7cb518; border-radius: 16px; padding: 14px 16px; z-index: 20001; box-shadow: 0 10px 30px rgba(0,0,0,0.7); animation: slamIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* =========================================
   Lobby waiting room, turn timer, teams,
   spectators, daily challenge
========================================= */
#lobby-wait-screen { position: fixed; inset: 0; background: rgba(12,9,6,0.97); z-index: 7000; display: flex; justify-content: center; align-items: center; padding: 16px; }
.lobby-wait-box { background: #1a130d; border: 3px solid #2e2015; border-radius: 22px; padding: 22px; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
.lobby-player-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: #241a13; border: 2px solid #2e2015; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; font-weight: 800; font-size: 14px; text-align: left; }
.rule-chip { background: #241a13; border: 1px solid #3d2b1f; color: #e4d6ba; font-size: 10px; font-weight: 800; padding: 5px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
#lobby-chat-log { background: #0c0906; border: 2px solid #2e2015; border-radius: 12px; height: 120px; overflow-y: auto; padding: 10px; text-align: left; font-size: 12px; }
.lobby-chat-msg { margin-bottom: 6px; color: #e4d6ba; line-height: 1.4; word-break: break-word; }
.lobby-chat-msg strong { color: #f4b731; }
.lobby-chat-msg.mine strong { color: #7cb518; }

/* Turn timer pill */
#turn-timer { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: #1a130d; border: 2px solid #3d2b1f; color: #f2e8d5; font-weight: 900; font-size: 13px; padding: 5px 14px; border-radius: 20px; z-index: 50; }
#turn-timer.timer-urgent { border-color: #ff4757; color: #ff4757; animation: uno-panic 0.6s infinite; }

/* Team chips on avatars & lobby rows */
.team-chip { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; border-radius: 8px; padding: 2px 6px; margin-right: 4px; color: #14100c; font-weight: 900; }

/* Spectator mode: hide interactive hand controls, keep chat visible */
.hand-wrapper.spectating .hand-scroll,
.hand-wrapper.spectating .hand-utilities { display: none; }

/* Colorblind symbols */
.cb-symbol { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.6); pointer-events: none; }
.card { position: relative; }
.cb-wheel-symbol { font-size: 20px; color: rgba(20,16,12,0.75); font-weight: 900; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* =========================================
   THE OMAKASE COUNTER — elliptical table,
   orbiting conveyor, seated card fans
========================================= */
.table-surface {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(94vw, 620px); aspect-ratio: 1.5 / 1; max-height: 96%;
    border-radius: 50%;
    /* lacquered wooden rim */
    background: linear-gradient(160deg, #4a3323 0%, #2e2015 45%, #1a130d 100%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.75), inset 0 2px 2px rgba(255,220,160,0.12);
    z-index: 1;
}
.table-surface::before {
    /* the felt: warm light pooling from above */
    content: ""; position: absolute; inset: 5.5%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 32%, #33241733 0%, transparent 60%),
                radial-gradient(ellipse at center, #241a13 0%, #1c1410 55%, #171009 100%);
    box-shadow: inset 0 10px 28px rgba(0,0,0,0.7), inset 0 -2px 2px rgba(255,210,150,0.05);
}

/* Conveyor: dishes drifting around the rim. A square ring rotates inside a
   scaleY-squashed wrapper, so the circular orbit renders as the table's ellipse. */
.conveyor-orbit { position: absolute; inset: 0; transform: scaleY(0.62); display: flex; justify-content: center; align-items: center; overflow: visible; }
.conveyor-ring { position: relative; width: 78%; aspect-ratio: 1 / 1; animation: ring-spin 60s linear infinite; }
.conveyor-ring span { position: absolute; left: 50%; top: 50%; font-size: 20px; opacity: 0.16; filter: saturate(0.8); }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .conveyor-ring { animation: none; } }

/* Center piles sit on the felt */
.table-piles { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.piles-row { display: flex; gap: 26px; align-items: center; }
.piles-row .card { box-shadow: 0 10px 24px rgba(0,0,0,0.7), 0 2px 0 rgba(255,220,160,0.06); }
#current-pile .card { transform: rotate(3.5deg); }
.draw-pile { transform: rotate(-2deg); }
#turn-timer { position: static; transform: none; margin-top: 2px; }

/* Opponent seats: name chip + fanned card backs, like hands held at a table */
.seat-fan { display: flex; justify-content: center; height: 44px; margin-top: -2px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.55)); }
.mini-back { width: 27px; height: 40px; border-radius: 5px; border: 2px solid #f2e8d5; margin-left: -15px; transform-origin: bottom center; position: relative; }
.mini-back:first-child { margin-left: 0; }
.mini-back::after { font-size: 0.65rem !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mini-back .card-inner-icon, .mini-back span { display: none; }
.fan-overflow { align-self: flex-end; background: #14100c; border: 1px solid #3d2b1f; color: #f4b731; font-size: 9px; font-weight: 900; border-radius: 10px; padding: 2px 6px; margin-left: 4px; }

/* My seat chip on the near rim */
#my-seat { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); z-index: 6; background: #1a130d; border: 2px solid #3d2b1f; border-radius: 14px; padding: 5px 14px; font-size: 12px; font-weight: 800; color: #f2e8d5; box-shadow: 0 4px 12px rgba(0,0,0,0.55); white-space: nowrap; }
#my-seat.my-turn { border-color: #7cb518; animation: radar-pulse 2s infinite; }

/* Direction label rides above the piles, quieter */
.table-piles .direction-arrow { position: static; font-size: 10px; opacity: 0.7; }

/* Small screens: tighten the fan and chips */
@media (max-width: 420px) {
    .opp-card { width: 100px; }
    .mini-back { width: 22px; height: 33px; margin-left: -13px; }
    .seat-fan { height: 36px; }
    .conveyor-ring span { font-size: 16px; }
}