/*
 * Crazy Eights table styling.
 * The page uses the same site shell and shared interactive background as the
 * other public games; this file only styles the game-specific controls/table.
 */
.crazy-main { padding-block: clamp(20px, 4vw, 42px); }
.crazy-intro { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.crazy-intro h1 { margin:.2rem 0 .45rem; font-size:clamp(2rem,5vw,3.2rem); }
.crazy-intro p:not(.eyebrow) { max-width:720px; color:var(--muted); }
.crazy-intro-actions { display:flex; gap:10px; flex-wrap:wrap; }
.crazy-login-hint { margin:0 0 16px; color:var(--muted); }
.crazy-bridge { margin:0 0 16px; padding:18px 22px; }
.crazy-online-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.crazy-online-head h2 { margin:.2rem 0 .6rem; }
.crazy-seat-key-wrap { display:grid; gap:6px; margin:12px 0; color:var(--muted); }
.crazy-seat-key-wrap input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#0c1420; color:var(--ink); font:inherit; }
.crazy-bridge-tools { display:flex; flex-wrap:wrap; gap:10px; }
.crazy-caption { color:var(--muted); font-size:.88rem; }
.crazy-controls { display:flex; align-items:end; gap:14px; flex-wrap:wrap; padding:14px 18px; margin-bottom:16px; }
.crazy-controls label { display:grid; gap:6px; color:var(--muted); }
.crazy-controls select { min-width:220px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#0c1420; color:var(--ink); }
.crazy-check-row { display:flex; align-items:center; gap:7px; min-height:42px; color:var(--ink); }
.crazy-check-row input { width:18px; height:18px; accent-color:#78d6a3; }
.crazy-sort-toggle { min-width:145px; }
.crazy-table { padding:clamp(14px,3vw,28px); overflow:hidden; }
.crazy-status-row { display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:32px; }
.crazy-status { margin:0; color:var(--mint); font-weight:700; }
.crazy-turn { margin:0; color:var(--muted); }
.crazy-opponents { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px auto 8px; max-width:820px; }
.crazy-seat { min-width:0; padding:12px; text-align:center; border:1px solid #334155; border-radius:15px; background:linear-gradient(145deg,#101b2b,#131d29); }
.crazy-seat.active { border-color:#78d6a3; box-shadow:0 0 0 2px #54d99535,0 0 24px #54d99518; }
.crazy-seat-name { font-weight:800; }
.crazy-seat-count { display:block; margin-top:4px; color:var(--muted); font-size:.85rem; }
.crazy-mini-hand { display:flex; justify-content:center; gap:3px; margin:9px 0 0; min-height:34px; }
.crazy-mini-hand .card-back { width:24px; height:34px; border-radius:5px; }
.crazy-center { display:flex; justify-content:center; align-items:center; gap:clamp(18px,6vw,60px); flex-wrap:wrap; min-height:210px; margin:8px 0 16px; padding:18px 12px; border:1px solid #365446; border-radius:22px; background:radial-gradient(ellipse at center,#255340 0,#173c32 58%,#123329 100%); }
.crazy-pile-wrap { display:grid; justify-items:center; gap:8px; }
.crazy-pile-label { color:#c8e0d5; font-size:.82rem; font-weight:750; }
.crazy-pile { position:relative; display:grid; place-items:center; width:clamp(78px,15vw,112px); height:clamp(112px,21vw,158px); border:2px solid #edf4f2; border-radius:13px; background:#fdfdf9; box-shadow:0 10px 22px #07120f70; color:#17212b; }
button.crazy-pile { cursor:pointer; }
button.crazy-pile:disabled { opacity:.45; cursor:not-allowed; }
.crazy-stock { background:#152b48; border-color:#9db2d0; }
.card-back { display:grid; place-items:center; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:8px; background:repeating-linear-gradient(45deg,#16365e 0 7px,#234c78 7px 14px); border:1px solid #d9e6f3; color:#eff7ff; font-size:.7rem; font-weight:900; letter-spacing:.08em; }
.pile-count { position:absolute; right:-9px; bottom:-9px; min-width:27px; padding:3px 6px; border-radius:999px; background:#0b1421; border:1px solid #7b8ca6; color:white; font-size:.75rem; }
.crazy-discard { overflow:hidden; transition:transform .24s ease,box-shadow .24s ease; }
.crazy-discard.landing { animation:card-land .42s cubic-bezier(.18,.75,.3,1.25); }
@keyframes card-land { 0%{transform:translateY(-20px) rotate(-8deg) scale(1.12);box-shadow:0 0 0 8px #f4cc7655} 100%{transform:translateY(0) rotate(0) scale(1);box-shadow:0 10px 22px #07120f70} }
.playing-card { position:relative; display:grid; place-items:center; width:100%; height:100%; border-radius:11px; background:#fffefa; color:#142032; font-weight:800; }
.playing-card.red { color:#c82c3d; }
.card-corner { position:absolute; top:7px; left:8px; display:grid; justify-items:center; gap:0; font-size:clamp(.75rem,2vw,1.05rem); line-height:1; }
.card-corner.bottom { top:auto; left:auto; right:8px; bottom:7px; transform:rotate(180deg); }
.card-suit-center { font-size:clamp(2.7rem,8vw,4.5rem); line-height:1; }
.crazy-active-suit { min-width:90px; text-align:center; color:var(--muted); font-weight:750; }
.crazy-active-suit strong { display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.crazy-active-suit span { display:block; font-size:1.7rem; }
.crazy-player { padding:16px; border:1px solid #35445a; border-radius:18px; background:linear-gradient(145deg,#111b2a,#101827); }
.crazy-player-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.crazy-player-heading h2 { margin:0; font-size:1.12rem; }
.crazy-player-heading span { color:var(--muted); }
.crazy-hand { display:flex; justify-content:center; align-items:end; min-height:160px; gap:clamp(3px,1vw,10px); overflow-x:auto; padding:16px 4px 10px; }
.hand-card { flex:0 0 auto; width:clamp(58px,10vw,84px); height:clamp(88px,15vw,124px); border:2px solid #e8edf1; border-radius:10px; background:#fffefa; color:#172233; box-shadow:0 6px 12px #0005; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease; }
.hand-card.red { color:#c82c3d; }
.hand-card:hover:not(:disabled),.hand-card:focus-visible { transform:translateY(-10px); box-shadow:0 13px 18px #0007; outline:2px solid #f1c875; outline-offset:2px; }
.hand-card:disabled { opacity:.48; cursor:not-allowed; }
.card-content { position:relative; display:grid; place-items:center; width:100%; height:100%; }
.card-content .card-corner { top:5px; left:6px; }
.card-content .card-corner.bottom { top:auto; left:auto; right:6px; bottom:5px; }
.hand-card .card-suit-center { font-size:clamp(1.8rem,4vw,2.8rem); }
.crazy-hint { margin:0; color:var(--muted); font-size:.88rem; text-align:center; }
.crazy-hand-actions { display:flex; justify-content:center; margin-top:12px; }
.crazy-rules { margin-top:16px; padding:18px 22px; }
.crazy-rules h2 { margin-top:0; }
.crazy-rules p { color:var(--muted); }
.suit-modal[hidden] { display:none; }
.suit-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:#050a10cf; backdrop-filter:blur(7px); }
.suit-dialog { width:min(430px,100%); padding:24px; border:1px solid #64748b; border-radius:22px; background:linear-gradient(145deg,#172338,#0e1725); box-shadow:0 24px 80px #0009; text-align:center; }
.suit-dialog h2 { margin:.25rem 0 18px; }
.suit-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.suit-choice { min-height:100px; border:1px solid #53647c; border-radius:16px; background:#121e2f; color:#f3f6fa; cursor:pointer; transition:transform .14s ease,border-color .14s ease,background .14s ease; }
.suit-choice:hover,.suit-choice:focus-visible { transform:translateY(-3px); border-color:#f0c56d; background:#20314a; outline:none; }
.suit-choice .suit-symbol { display:block; font-size:2.5rem; }
.suit-choice .suit-name { font-size:.82rem; font-weight:800; }
@media(max-width:680px) { .crazy-intro { align-items:start; flex-direction:column; }.crazy-controls { align-items:stretch; flex-direction:column; }.crazy-controls select { width:100%; }.crazy-opponents { gap:6px; }.crazy-seat { padding:9px 4px; }.crazy-center { gap:18px; }.crazy-active-suit { min-width:100%; order:3; }.crazy-hand { justify-content:flex-start; }.crazy-rules { padding:16px; }.crazy-online-head { align-items:start; flex-direction:column; }.crazy-bridge { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .crazy-discard.landing { animation:none; }.hand-card,.suit-choice { transition:none; } }