:root {
  --nn-ink: #172033;
  --nn-muted: #6b7280;
  --nn-primary: #635bff;
  --nn-primary-dark: #4f46e5;
  --nn-surface: #ffffff;
  --nn-bg: #f5f7fb;
  --nn-success: #149b68;
  --nn-border: #e8ebf2;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--nn-ink); background: var(--nn-bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.nn-shell { min-height: 100vh; background: radial-gradient(circle at 20% 0%, #eeeaff 0, transparent 38%), var(--nn-bg); }
.nn-nav { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 6vw; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--nn-border); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); }
.nn-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .04em; }
.nn-mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #766aff, #3f37c9); box-shadow: 0 8px 24px rgba(99,91,255,.26); }
.nn-nav-actions { display: flex; align-items: center; gap: 12px; }
.nn-user { display: inline-flex; align-items: center; gap: 8px; color: var(--nn-muted); font-size: 14px; }
.nn-user-trigger { display:inline-flex; align-items:center; gap:8px; min-width:0; border:0; padding:4px; background:transparent; color:var(--nn-muted); cursor:pointer; text-align:left; }
.nn-user-trigger > span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.nn-user-meta { display:grid; min-width:0; line-height:1.25; }
.nn-user-meta strong,.nn-user-meta small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nn-user-meta strong { color:var(--nn-ink); font-size:13px; }
.nn-user-meta small { margin-top:2px; color:var(--nn-muted); font-size:11px; }
.nn-user-trigger em { padding:3px 6px; border-radius:999px; color:#4c44cf; background:#eef0ff; font-size:11px; font-style:normal; font-weight:800; }
.nn-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#f59e0b,#ef4444); font-size: 13px; font-weight: 700; overflow: hidden; }
.nn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nn-main { width: min(1120px, 92vw); margin: 0 auto; padding: 40px 0 64px; }
.nn-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.nn-card { background: var(--nn-surface); border: 1px solid var(--nn-border); border-radius: 22px; box-shadow: 0 16px 40px rgba(28,35,66,.06); }
.nn-card-pad { padding: 26px; }
.nn-hero { grid-column: span 8; min-height: 250px; padding: 36px; background: linear-gradient(135deg,#29266f,#645bff 60%,#8c83ff); color: #fff; overflow: hidden; position: relative; }
.nn-hero:after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -60px; bottom: -90px; background: rgba(255,255,255,.14); }
.nn-hero h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.nn-hero p { margin: 0; max-width: 520px; color: rgba(255,255,255,.8); line-height: 1.7; }
.nn-hero-copy { white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
.nn-feature { grid-column: span 4; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; }
.nn-feature-clickable { cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.nn-feature-clickable:hover { transform:translateY(-2px); box-shadow:0 20px 45px rgba(28,35,66,.1); }
.nn-feature-clickable:focus-visible { outline:3px solid rgba(99,91,255,.35); outline-offset:3px; }
.nn-feature h3, .nn-card h2, .nn-card h3 { margin: 0; }
.nn-feature ul { padding-left: 18px; margin: 18px 0 0; color: var(--nn-muted); line-height: 2; }
.nn-lobby-stats { grid-column:span 12; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; background:var(--nn-border); }
.nn-lobby-stat { display:flex; align-items:center; gap:12px; min-height:88px; padding:18px 22px; background:var(--nn-surface); }
.nn-lobby-stat small { display:block; color:var(--nn-muted); font-size:12px; }
.nn-lobby-stat strong { display:block; margin-top:4px; color:var(--nn-ink); font-size:25px; line-height:1; }
.nn-stat-icon { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#eef0ff; color:var(--nn-primary); position:relative; }
.nn-stat-icon:before,.nn-stat-icon:after { content:""; position:absolute; border-radius:50%; background:currentColor; }
.nn-stat-icon-online:before { width:13px; height:13px; top:9px; left:14px; }
.nn-stat-icon-online:after { width:22px; height:10px; bottom:8px; left:9px; border-radius:10px 10px 7px 7px; }
.nn-stat-icon-rooms { background:#e8faf2; color:#149b68; }
.nn-stat-icon-rooms:before { width:21px; height:16px; top:11px; left:10px; border-radius:3px; box-shadow:inset 0 0 0 2px currentColor; background:transparent; }
.nn-stat-icon-rooms:after { width:5px; height:5px; top:16px; left:18px; border-radius:1px; background:currentColor; box-shadow:-7px 0 0 currentColor,7px 0 0 currentColor; }
.nn-section { grid-column: span 12; }
.nn-section-head { display:flex; align-items:center; justify-content:space-between; gap: 16px; margin-bottom: 14px; }
.nn-section-head p { margin: 5px 0 0; color: var(--nn-muted); font-size: 14px; }
.nn-btn { border: 0; border-radius: 12px; padding: 11px 17px; cursor: pointer; transition: .18s ease; font-weight: 700; }
.nn-btn:hover { transform: translateY(-1px); }
.nn-btn-primary { background: var(--nn-primary); color: #fff; box-shadow: 0 8px 20px rgba(99,91,255,.24); }
.nn-btn-primary:hover { background: var(--nn-primary-dark); }
.nn-btn-light { color: var(--nn-ink); background: #f0f1f8; }
.nn-btn-danger { color: #b42318; background: #fff0ee; }
.nn-btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.nn-form { display:grid; gap: 16px; }
.nn-form-row { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nn-check-row { display:flex; align-items:flex-start; gap:8px; margin-top:12px; color:var(--muted,#64748b); font-size:13px; line-height:1.45; cursor:pointer; }
.nn-check-row input { margin-top:2px; accent-color:var(--accent,#2563eb); }
.nn-label { display:block; margin-bottom: 7px; color: var(--nn-muted); font-size: 13px; font-weight: 600; }
.nn-input, .nn-select { width:100%; border: 1px solid var(--nn-border); border-radius: 11px; background: #fff; padding: 11px 12px; color: var(--nn-ink); outline: none; }
.nn-input:focus, .nn-select:focus { border-color: var(--nn-primary); box-shadow: 0 0 0 3px rgba(99,91,255,.12); }
.nn-room-list { display:grid; gap: 11px; }
.nn-room-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.nn-room { display:grid; grid-template-columns: 1.3fr .8fr .8fr auto; gap: 12px; align-items:center; border:1px solid var(--nn-border); border-radius: 15px; padding: 15px 16px; background:#fff; }
.nn-room strong { display:block; font-size: 15px; }
.nn-room small { color: var(--nn-muted); }
.nn-pill { display:inline-flex; align-items:center; border-radius: 999px; padding: 5px 9px; font-size: 12px; background: #eef0ff; color: #4c44cf; font-weight: 700; }
.nn-pill-green { background:#e8faf2; color:#14805a; }
.nn-empty { padding: 38px 18px; text-align:center; color: var(--nn-muted); border: 1px dashed #d9ddea; border-radius: 15px; }
.nn-alert { border-radius: 12px; padding: 11px 13px; font-size: 14px; }
.nn-alert-error { background:#fff0ee; color:#b42318; }
.nn-alert-success { background:#e8faf2; color:#147b57; }
.nn-create-dialog { width:min(460px,calc(100vw - 32px)); max-width:460px; margin:auto; padding:0; border:0; border-radius:20px; background:#f6f7fb; color:var(--nn-ink); box-shadow:0 24px 80px rgba(15,23,42,.35); }
.nn-create-dialog::backdrop { background:rgba(15,23,42,.56); backdrop-filter:blur(3px); }
.nn-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:21px 24px 16px; background:#fff; border-bottom:1px solid var(--nn-border); }
.nn-dialog-head h2 { margin:2px 0 0; font-size:21px; }
.nn-dialog-form { padding:22px 24px 26px; }
.nn-login { min-height: 100vh; display:grid; place-items:center; padding: 24px; background: linear-gradient(145deg,#1e1b4b,#554fca 50%,#e5e7ff); }
.nn-login-card { width:min(440px,100%); padding: 38px; background:rgba(255,255,255,.96); border-radius: 25px; box-shadow: 0 24px 90px rgba(14,15,54,.3); }
.nn-login-card h1 { margin: 22px 0 8px; font-size: 34px; letter-spacing:-.04em; }
.nn-login-card p { color:var(--nn-muted); line-height:1.7; }
.nn-login-note { margin-top: 18px; color:#8a8fa2; font-size:12px; text-align:center; }
.nn-room-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom: 20px; }
.nn-room-code { color: var(--nn-muted); font-size: 13px; margin-top: 7px; }
.nn-status { display:inline-flex; align-items:center; gap:7px; font-size:13px; color: var(--nn-muted); }
.nn-dot { width:8px; height:8px; border-radius:50%; background:#d1d5db; }
.nn-dot-online { background:#22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.14); }
.nn-players { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.nn-player { border:1px solid var(--nn-border); border-radius:16px; padding: 16px; min-height: 118px; }
.nn-player-top { display:flex; align-items:center; gap:10px; }
.nn-player-name { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nn-seat { color: var(--nn-muted); font-size:12px; }
.nn-player-meta { margin-top:16px; display:flex; justify-content:space-between; align-items:center; color:var(--nn-muted); font-size:12px; }
.nn-cards { display:flex; flex-wrap:wrap; gap:9px; margin-top: 14px; }
.nn-card-chip { width:48px; height:68px; display:grid; place-items:center; border-radius:10px; border:1px solid #e5e7ef; background:#fff; box-shadow:0 6px 14px rgba(20,26,55,.08); font-weight:800; font-size:13px; }
.nn-card-chip.red { color:#dc2626; }
.nn-card-chip.hidden { background: linear-gradient(135deg,#4f46e5,#8b5cf6); color:rgba(255,255,255,.78); border-color:transparent; }
.nn-rule-box { background:#f8f9ff; border:1px solid #e7e7ff; border-radius:15px; padding:16px; color:#4b4e68; line-height:1.8; }
.nn-footer { width:min(1120px,92vw); margin:0 auto; padding: 0 0 35px; color:#8a8fa2; font-size:12px; }

.nn-account-panel { width:min(680px,100vw); max-width:680px; height:min(860px,100vh); margin:auto; padding:0; border:0; background:#f6f7fb; color:var(--nn-ink); box-shadow:0 24px 80px rgba(15,23,42,.35); }
.nn-account-panel::backdrop { background:rgba(15,23,42,.56); backdrop-filter:blur(3px); }
.nn-account-head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px 16px; background:#fff; border-bottom:1px solid var(--nn-border); }
.nn-account-head h2 { margin:2px 0 0; font-size:22px; }
.nn-eyebrow { margin:0; color:#7a75d7; font-size:10px; font-weight:800; letter-spacing:.12em; }
.nn-icon-btn { width:36px; height:36px; border:0; border-radius:50%; background:#f0f1f8; color:#4b5563; cursor:pointer; font-size:26px; line-height:1; }
.nn-account-tabs { display:flex; gap:20px; padding:0 24px; background:#fff; border-bottom:1px solid var(--nn-border); }
.nn-account-tab { border:0; border-bottom:3px solid transparent; padding:13px 2px 11px; background:transparent; color:var(--nn-muted); font-weight:800; cursor:pointer; }
.nn-account-tab.is-active { border-bottom-color:var(--nn-primary); color:var(--nn-primary-dark); }
.nn-account-panel > .nn-alert { margin:14px 24px 0; }
.nn-account-view { height:calc(min(860px, 100vh) - 132px); overflow:auto; padding:20px 24px 32px; }
.nn-profile-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:16px; border:1px solid #dddffd; border-radius:16px; color:#fff; background:linear-gradient(135deg,#302d79,#6259eb); }
.nn-profile-summary .nn-profile-avatar { width:48px; height:48px; font-size:19px; box-shadow:0 0 0 3px rgba(255,255,255,.18); }
.nn-profile-summary strong { display:block; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nn-profile-summary small { display:block; margin-top:4px; color:rgba(255,255,255,.72); font-size:11px; }
.nn-profile-summary > b { min-width:76px; text-align:right; font-size:19px; }
.nn-profile-form { margin-top:16px; padding:16px; border:1px solid var(--nn-border); border-radius:16px; background:#fff; }
.nn-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:24px; }
.nn-panel-head h3 { margin:0; font-size:16px; }
.nn-panel-head p,.nn-agent-help { margin:5px 0 0; color:var(--nn-muted); font-size:12px; line-height:1.55; }
.nn-ledger-list,.nn-member-list { display:grid; gap:9px; margin-top:12px; }
.nn-ledger { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid var(--nn-border); border-radius:13px; background:#fff; }
.nn-ledger summary { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; cursor:pointer; list-style:none; }
.nn-ledger summary::-webkit-details-marker { display:none; }
.nn-ledger-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.nn-ledger-tools .is-active,.log-filter .is-active { color:#fff; background:#4d46d8; border-color:#4d46d8; }
.nn-agent-ledger-head { align-items:center; }
.nn-agent-ledger-head .nn-ledger-tools { flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
.nn-agent-ledger-head .nn-ledger-tools::-webkit-scrollbar { display:none; }
.nn-agent-ledger-head .nn-ledger-tools .nn-btn { flex:0 0 auto; white-space:nowrap; }
.nn-log-category { display:inline-block; margin-right:4px; padding:1px 5px; border-radius:5px; color:#4d46d8; background:#eeedff; }.nn-log-category-agent { color:#047857; background:#d1fae5; }.nn-log-category-admin { color:#b45309; background:#fef3c7; }
.nn-round-ledger { margin-top:11px; padding-top:10px; border-top:1px solid var(--nn-border); font-size:11px; }
.nn-round-ledger-head,.nn-round-ledger-row { display:grid; grid-template-columns:1.1fr 1fr 1.2fr .65fr; gap:8px; align-items:center; padding:5px 0; }
.nn-round-ledger-head { color:var(--nn-muted); font-weight:700; }
.nn-round-ledger-row { border-top:1px solid #f0f1f7; }
.nn-round-ledger-row b { text-align:right; }
.nn-round-ledger-total { margin-top:7px; padding-top:7px; border-top:1px solid var(--nn-border); text-align:right; font-weight:700; }
.nn-ledger strong,.nn-ledger b { display:block; font-size:14px; }
.nn-ledger small { display:block; margin-top:4px; color:var(--nn-muted); font-size:11px; }
.nn-ledger b { text-align:right; }.nn-ledger .is-in { color:#14805a; }.nn-ledger .is-out { color:#b42318; }
.nn-ledger-delete { flex:0 0 auto; border:0; border-radius:8px; padding:6px 8px; color:#b42318; background:#fff0ee; cursor:pointer; font-size:11px; font-weight:700; }
.nn-ledger-delete:hover { background:#ffe0dc; }
.nn-agent-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.nn-agent-summary > div { padding:13px 10px; border:1px solid #dddffd; border-radius:14px; background:#fff; }
.nn-agent-summary > button { padding:13px 10px; border:1px solid #dddffd; border-radius:14px; background:#fff; color:inherit; text-align:left; cursor:pointer; }
.nn-agent-summary > button:hover,.nn-agent-summary > button.is-selected { border-color:#8b84ff; background:#f1f0ff; }
.nn-agent-summary small,.nn-member-balance small { display:block; color:var(--nn-muted); font-size:11px; }.nn-agent-summary strong { display:block; margin-top:5px; color:#4f46e5; font-size:17px; }
.nn-agent-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-top:16px; }
.nn-agent-help { padding:10px 12px; border-left:3px solid #8b84ff; background:#eeefff; color:#4b4e68; }
.nn-member { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; border:1px solid var(--nn-border); border-radius:14px; background:#fff; }
.nn-member-user { min-width:0; display:flex; align-items:center; gap:9px; }.nn-member-user strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.nn-member-user small { display:block; margin-top:4px; color:var(--nn-muted); font-size:11px; }
.nn-member-balance { color:#4f46e5; font-size:15px; font-weight:800; text-align:right; }.nn-member-actions { grid-column:span 2; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }.nn-balance-input { width:90px; padding:8px 9px; }

/* The room is a real table scene, not a text-only debug screen. The card
   faces use the original Niuniu sprite copied into this standalone package. */
.nn-table-page { background:#101632 url('/assets/table-bg.jpg') center top / cover fixed no-repeat; color:#f8fafc; }
.nn-table-page:before { content:""; position:fixed; inset:0; background:linear-gradient(180deg,rgba(9,14,40,.2),rgba(9,14,40,.74)); pointer-events:none; }
.nn-table-page .nn-nav { background:rgba(13,18,49,.78); border-bottom-color:rgba(255,255,255,.12); color:#fff; position:relative; }
.nn-table-page .nn-main, .nn-table-page .nn-footer { position:relative; z-index:1; }
.nn-table-card { background:rgba(12,20,56,.82); border:1px solid rgba(255,255,255,.14); border-radius:28px; box-shadow:0 24px 60px rgba(4,8,31,.38), inset 0 1px rgba(255,255,255,.07); backdrop-filter:blur(12px); }
.nn-table-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px; border-bottom:1px solid rgba(255,255,255,.1); }
.nn-table-head h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.nn-table-meta { margin-top:6px; color:rgba(226,232,240,.68); font-size:13px; }
.nn-table-status { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:8px 12px; font-size:12px; color:#d8d9ff; background:rgba(99,91,255,.2); }
.nn-table-body { padding:24px 26px 30px; }
.nn-seat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.nn-seat-card { min-height:166px; padding:17px; border:1px solid rgba(255,255,255,.14); border-radius:19px; background:linear-gradient(160deg,rgba(46,57,116,.8),rgba(16,24,63,.82)); position:relative; overflow:hidden; }
.nn-seat-card:after { content:""; position:absolute; width:110px; height:110px; right:-50px; bottom:-45px; border-radius:50%; border:1px solid rgba(255,255,255,.1); box-shadow:0 0 0 12px rgba(255,255,255,.03),0 0 0 24px rgba(255,255,255,.02); }
.nn-seat-card .nn-player-meta { color:rgba(226,232,240,.66); }
.nn-table-page .nn-player-name { color:#fff; }
.nn-table-page .nn-seat { color:rgba(226,232,240,.56); }
.nn-table-page .nn-avatar { box-shadow:0 0 0 3px rgba(255,255,255,.1); }
.nn-table-page .nn-pill { background:rgba(154,145,255,.22); color:#e6e3ff; }
.nn-table-page .nn-rule-box { background:rgba(12,20,56,.6); border-color:rgba(255,255,255,.12); color:rgba(226,232,240,.84); }
.nn-table-page .nn-alert-error { background:rgba(180,35,24,.85); color:#fff; }
.nn-hand-panel { margin-top:24px; padding:22px; border:1px solid rgba(255,255,255,.12); border-radius:21px; background:rgba(8,13,38,.58); }
.nn-hand-panel h3 { margin:0; font-size:18px; }
.nn-hand-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:15px; margin-top:14px; }
.nn-hand { padding:17px; border-radius:17px; background:rgba(37,48,105,.72); border:1px solid rgba(255,255,255,.1); }
.nn-hand-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nn-hand-result { font-size:13px; color:#d6d4ff; font-weight:800; }
.nn-hand-score { margin-top:12px; display:flex; align-items:center; justify-content:space-between; color:rgba(226,232,240,.7); font-size:12px; }
.nn-hand-score strong { font-size:19px; color:#fff; }
.nn-playing-cards { display:flex; gap:7px; margin-top:15px; min-height:95px; }
.nn-playing-card { width:64px; height:92px; border-radius:9px; border:2px solid rgba(255,255,255,.84); box-shadow:0 10px 18px rgba(0,0,0,.28); background-image:url('/assets/cards.jpg'); background-size:832px 368px; background-repeat:no-repeat; background-color:#fff; transform:translateY(0) rotate(0deg); animation:nn-deal .55s cubic-bezier(.2,.9,.2,1) both; }
.nn-playing-card:nth-child(2){animation-delay:.07s}.nn-playing-card:nth-child(3){animation-delay:.14s}.nn-playing-card:nth-child(4){animation-delay:.21s}.nn-playing-card:nth-child(5){animation-delay:.28s}
.nn-playing-card.back { background-image:url('/assets/card-back.png'); background-size:cover; background-position:center; }
.nn-playing-card.joker { display:grid; place-items:center; background:linear-gradient(145deg,#27204f,#e11d48); color:#fff; font-size:11px; text-align:center; line-height:1.3; padding:5px; }
.nn-winning-hand { border-color:rgba(250,204,21,.7); box-shadow:0 0 0 1px rgba(250,204,21,.15),0 13px 30px rgba(250,204,21,.12); }
.nn-winning-hand:before { content:"庄"; position:absolute; top:11px; right:11px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#f59e0b; color:#3b2200; font-weight:900; font-size:12px; box-shadow:0 5px 13px rgba(245,158,11,.3); animation:nn-pulse 1.3s ease-in-out infinite; }
.nn-mascot { position:absolute; width:130px; right:20px; bottom:0; filter:drop-shadow(0 12px 18px rgba(0,0,0,.3)); transform:rotate(4deg); animation:nn-float 4s ease-in-out infinite; }
@keyframes nn-deal { from { opacity:0; transform:translateY(-22px) rotate(-8deg) scale(.82); } to { opacity:1; transform:translateY(0) rotate(0) scale(1); } }
@keyframes nn-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
@keyframes nn-float { 0%,100% { transform:translateY(0) rotate(4deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@media (max-width: 780px) {
  .nn-nav { padding: 0 4vw; }
  .nn-main { padding-top: 24px; }
  .nn-hero, .nn-feature { grid-column: span 12; }
  .nn-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .nn-room { grid-template-columns: 1fr 1fr; }
  .nn-room > :last-child { grid-column: span 2; }
  .nn-room-actions { width:100%; justify-content:flex-start; }
  .nn-room-head { flex-direction: column; }
  .nn-seat-grid { grid-template-columns:1fr; }
  .nn-table-head, .nn-table-body { padding-left:17px; padding-right:17px; }
  .nn-table-head { align-items:flex-start; flex-direction:column; }
  .nn-playing-card { width:56px; height:81px; background-size:728px 331px; }
  .nn-mascot { width:95px; right:10px; }
  .nn-nav { height:62px; }.nn-brand > span:last-child { display:none; }.nn-nav-actions { gap:5px; }.nn-user-trigger > span:nth-child(2) { max-width:118px; font-size:12px; }.nn-user-trigger em { display:none; }.nn-nav-actions > .nn-btn { padding:8px 9px; }
  .nn-account-panel { width:100vw; height:100vh; max-width:none; max-height:none; }.nn-account-head { padding:17px 16px 12px; }.nn-account-tabs { padding:0 16px; }.nn-account-panel > .nn-alert { margin:12px 16px 0; }.nn-account-view { height:calc(100vh - 120px); padding:16px; }.nn-profile-summary { padding:13px; }.nn-profile-summary > b { min-width:60px; font-size:16px; }.nn-agent-search { grid-template-columns:1fr; }.nn-member { padding:11px; }.nn-member-balance { grid-column:2; grid-row:1; }.nn-member-actions { grid-column:span 2; }.nn-agent-summary > div { padding:11px 8px; }.nn-agent-summary strong { font-size:14px; }.nn-create-dialog { width:calc(100vw - 24px); }.nn-dialog-head { padding-left:17px; padding-right:17px; }.nn-dialog-form { padding:18px 17px 21px; }
}

/* The lobby is intentionally phone-first at every viewport. The game room
   remains responsive separately, while this entry screen stays compact and
   predictable for mobile players. */
.nn-lobby-page { min-width:320px; overflow-x:hidden; }
.nn-lobby-page .nn-nav { padding:0 12px; }
.nn-lobby-page .nn-brand > span:last-child { display:none; }
.nn-lobby-page .nn-main { width:min(480px,calc(100vw - 24px)); padding:24px 0 42px; }
.nn-lobby-page .nn-grid { display:block; }
.nn-lobby-page .nn-hero,
.nn-lobby-page .nn-feature,
.nn-lobby-page .nn-lobby-stats { width:100%; margin:0 0 14px; }
.nn-lobby-page .nn-lobby-stats { display:grid; }
.nn-lobby-page .nn-hero { min-height:226px; padding:28px 22px; }
.nn-lobby-page .nn-hero h1 { font-size:34px; }
.nn-lobby-page .nn-feature { min-height:204px; padding:22px; }
.nn-lobby-page .nn-mascot { width:95px; right:10px; top:50%; bottom:auto; animation-name:nn-float-center; }
.nn-lobby-page .nn-feature > div { max-width:calc(100% - 112px); }
@keyframes nn-float-center { 0%,100% { transform:translateY(-50%) rotate(4deg); } 50% { transform:translateY(calc(-50% - 7px)) rotate(1deg); } }
.nn-lobby-page .nn-footer { width:min(480px,calc(100vw - 24px)); padding-bottom:24px; }
.nn-lobby-page .nn-user-trigger > span:nth-child(2) { max-width:145px; font-size:12px; }
.nn-lobby-page .nn-user-trigger em { display:none; }
.nn-lobby-page .nn-nav-actions { gap:5px; }
.nn-lobby-page .nn-nav-actions > .nn-btn { padding:8px 9px; }
.nn-lobby-page .nn-room { grid-template-columns:1fr 1fr; }
.nn-lobby-page .nn-room > :last-child { grid-column:span 2; }
.nn-lobby-page .nn-room-actions { width:100%; justify-content:flex-start; }

.nn-rooms-dialog { width:min(480px,calc(100vw - 24px)); max-width:480px; max-height:calc(100vh - 24px); margin:auto; padding:0; border:0; background:transparent; overflow:visible; }
.nn-rooms-dialog::backdrop { background:rgba(15,23,42,.62); backdrop-filter:blur(4px); }
.nn-rooms-dialog .nn-section { width:100%; max-height:calc(100vh - 24px); overflow:auto; padding:20px; border-radius:20px; }
.nn-rooms-dialog .nn-section-head { align-items:flex-start; margin-bottom:12px; }
.nn-rooms-dialog .nn-section-head > div { min-width:0; }
.nn-rooms-dialog .nn-section-head h2 { font-size:20px; }
.nn-rooms-dialog .nn-section-head p { font-size:12px; }
.nn-rooms-dialog .nn-room-actions { margin-bottom:12px; }

/* Lobby room list: each room is presented as a compact table with only
   occupied seats rendered around the felt surface. */
.nn-lobby-page .nn-room-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.nn-lobby-page .nn-room-table { display:block; min-width:0; padding:0; border:0; background:transparent; box-shadow:none; }
.nn-lobby-page .nn-room-surface { position:relative; width:100%; aspect-ratio:1.62 / 1; min-height:210px; border-radius:50%; padding:34px 54px; background:radial-gradient(ellipse at 50% 42%,#237a54 0%,#155c3e 64%,#0d432e 100%); border:10px solid #7b4a28; box-shadow:inset 0 0 0 3px rgba(247,191,106,.42),inset 0 0 0 8px rgba(46,23,10,.5),0 14px 28px rgba(30,20,10,.22); overflow:visible; }
.nn-lobby-page .nn-room-surface:after { content:""; position:absolute; inset:17px; border:1px solid rgba(255,255,255,.2); border-radius:50%; pointer-events:none; }
.nn-lobby-page .nn-room-seats { position:absolute; inset:0; z-index:2; pointer-events:none; }
/* The room list shows table occupancy through the count only; player avatars
   remain visible inside an opened game room and in account views. */
.nn-room-list-page .nn-room-seats,
.nn-lobby-page .nn-room-list .nn-room-seats { display:none; }
.nn-lobby-page .nn-room-seat { position:absolute; display:flex; flex-direction:column; align-items:center; gap:3px; width:64px; min-width:0; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); transform:translate(-50%,-50%); }
.nn-lobby-page .nn-room-avatar { width:36px; height:36px; border:2px solid rgba(255,255,255,.92); box-shadow:0 3px 8px rgba(0,0,0,.3); font-size:12px; }
/* Room cards use a compact 12-seat table: four avatars across the top and
   bottom, with two vertically stacked on each side. The server seat number
   is retained so the owner remains visible in their actual seat. */
.nn-lobby-page .nn-room-seat[data-seat="1"] { left:20%; top:0; }
.nn-lobby-page .nn-room-seat[data-seat="2"] { left:40%; top:0; }
.nn-lobby-page .nn-room-seat[data-seat="3"] { left:60%; top:0; }
.nn-lobby-page .nn-room-seat[data-seat="4"] { left:80%; top:0; }
.nn-lobby-page .nn-room-seat[data-seat="5"] { left:1%; top:32%; }
.nn-lobby-page .nn-room-seat[data-seat="6"] { left:1%; top:68%; }
.nn-lobby-page .nn-room-seat[data-seat="7"] { left:99%; top:32%; }
.nn-lobby-page .nn-room-seat[data-seat="8"] { left:99%; top:68%; }
.nn-lobby-page .nn-room-seat[data-seat="9"] { left:20%; top:100%; }
.nn-lobby-page .nn-room-seat[data-seat="10"] { left:40%; top:100%; }
.nn-lobby-page .nn-room-seat[data-seat="11"] { left:60%; top:100%; }
.nn-lobby-page .nn-room-seat[data-seat="12"] { left:80%; top:100%; }
.nn-lobby-page .nn-room-center { position:relative; z-index:3; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; }
.nn-lobby-page .nn-room-center-title { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-width:0; }
.nn-lobby-page .nn-room-center strong { min-width:0; max-width:72%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.nn-lobby-page .nn-room-center small { flex:0 0 auto; margin:0; color:rgba(255,255,255,.8); font-size:10px; white-space:nowrap; }
.nn-lobby-page .nn-room-center-meta { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:9px; }
.nn-lobby-page .nn-room-score,.nn-lobby-page .nn-room-status { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; color:#fff; background:rgba(0,0,0,.25); font-size:11px; font-weight:700; }
.nn-lobby-page .nn-room-round { display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; color:#fff4cf; background:rgba(125,79,22,.62); font-size:11px; font-weight:700; white-space:nowrap; }
.nn-lobby-page .nn-room-status.is-waiting { color:#d7ffe9; background:rgba(11,117,67,.6); }
.nn-lobby-page .nn-room-join { margin-top:10px; padding:7px 14px; border:1px solid rgba(255,255,255,.35); background:rgba(20,20,35,.62); box-shadow:0 4px 10px rgba(0,0,0,.18); font-size:12px; }
.nn-lobby-page .nn-room-join:hover { background:rgba(20,20,35,.82); }
.nn-room-destroy { margin-top:9px; padding:5px 10px; border:1px solid rgba(255,150,150,.62); border-radius:6px; color:#ffe1e1; background:rgba(112,24,32,.72); box-shadow:0 3px 8px rgba(0,0,0,.16); font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.nn-room-destroy:hover { background:rgba(145,30,40,.9); }
.nn-room-destroy:focus-visible { outline:2px solid rgba(255,255,255,.9); outline-offset:2px; }
.nn-room-destroy:disabled { opacity:.55; cursor:wait; }
@media (max-width:520px) {
  .nn-lobby-page .nn-room-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .nn-lobby-page .nn-room-surface { min-height:200px; padding-left:48px; padding-right:48px; }
  .nn-lobby-page .nn-room-seat { width:56px; }
  .nn-lobby-page .nn-room-avatar { width:32px; height:32px; }
  .nn-lobby-page .nn-room-seat small { width:62px; font-size:9px; }
}

/* On the dedicated room route the list fills the viewport instead of
   appearing as an overlay. The same markup remains reusable from /lobby. */
.nn-room-list-page { background:var(--nn-bg); }
.nn-room-list-page .nn-main,
.nn-room-list-page .nn-footer { display:none; }
.nn-room-list-page .nn-rooms-dialog { position:fixed; inset:0; width:100%; max-width:none; max-height:none; height:100vh; margin:0; background:var(--nn-bg); }
.nn-room-list-page .nn-rooms-dialog::backdrop { background:transparent; }
.nn-room-list-page .nn-rooms-dialog .nn-section { width:100%; height:100%; max-height:none; padding:24px max(18px,4vw) 36px; border-radius:0; overflow:auto; }
.nn-room-list-page .nn-room-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.nn-room-list-page .nn-room-table { cursor:pointer; outline:none; }
.nn-room-list-page .nn-room-table:focus-visible .nn-room-surface { box-shadow:0 0 0 3px rgba(99,91,255,.48),inset 0 0 0 3px rgba(247,191,106,.42),inset 0 0 0 8px rgba(46,23,10,.5),0 14px 28px rgba(30,20,10,.22); }
.nn-room-list-page .nn-room-table.is-joining { opacity:.62; pointer-events:none; }
.nn-room-list-page .nn-room-surface { width:100%; min-height:0; margin:0 auto; padding:18px 22px; aspect-ratio:1.9 / 1; border-radius:16px; }
.nn-room-list-page .nn-room-surface:after { inset:12px; border-radius:10px; }
.nn-room-list-page .nn-room-center strong,.nn-room-list-page .nn-room-center small { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:clamp(8px,2.4vw,12px); font-weight:700; }
.nn-room-list-page .nn-room-center-title { gap:3px; }
.nn-room-list-page .nn-room-center-title strong { width:auto; max-width:72%; }
.nn-room-list-page .nn-room-center-title small { width:auto; font-size:clamp(8px,2.3vw,11px); }
.nn-room-list-page .nn-room-center-meta { gap:3px; margin-top:6px; }
.nn-room-list-page .nn-room-score,.nn-room-list-page .nn-room-status { padding:4px 6px; font-size:clamp(8px,2.3vw,12px); }
.nn-room-list-page .nn-room-round { padding:4px 6px; font-size:clamp(8px,2.3vw,12px); }
.nn-room-list-page .nn-room-join { margin-top:9px; font-size:13px; }
.nn-room-list-page .nn-room-destroy { margin-top:7px; padding:4px 8px; font-size:clamp(8px,2.2vw,11px); }
@media (max-width:380px) {
  .nn-room-list-page .nn-rooms-dialog .nn-section { padding-left:10px; padding-right:10px; }
  .nn-room-list-page .nn-room-list { gap:8px; }
  .nn-room-list-page .nn-room-surface { border-width:7px; padding-left:16px; padding-right:16px; }
  .nn-room-list-page .nn-room-seat { width:42px; }
  .nn-room-list-page .nn-room-avatar { width:26px; height:26px; font-size:10px; }
  .nn-room-list-page .nn-room-join { padding:5px 7px; font-size:10px; }
  .nn-room-list-page .nn-room-destroy { padding:4px 6px; }
}