/* ─────────────────────────────────────────────────────────────────────────────
   NARDY — long backgammon, 24 points, no hits, no blocks.
   The 24 point frames and the two off-trays are static markup
   (core/pages/nardy.php); only each point's own checker-stack container is
   ever rewritten, so a re-render never disturbs the board frame itself. The
   violet shell follows the shared social-game palette; tan/blue point
   colouring and the gold/cyan seat colours match the sidebar icon and the
   home-page card art.
   ──────────────────────────────────────────────────────────────────────────── */
.nd-page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 22px 42px; --nd-tan-a:#c99553; --nd-tan-b:#5c3a1a; --nd-blue-a:#59a3ca; --nd-blue-b:#1d4258; --nd-brass:#e8b96a; --nd-cyan:#5fc9ff; --nd-green:#5fd6a0; --nd-red:#ff4f5e; --nd-violet:#a66af2; --nd-line:rgba(198,154,248,.16); box-sizing: border-box; }
.nd-page * { box-sizing: border-box; }
.nd-page .hidden { display: none !important; }

.nd-page-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.nd-page-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.nd-page-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(166,106,242,.32); border-radius: 14px; background: radial-gradient(circle at 30% 20%,rgba(166,106,242,.3),rgba(38,24,48,.9)); box-shadow: 0 12px 30px rgba(17,6,31,.44),inset 0 1px rgba(255,255,255,.1); }
.nd-page-icon img { width: 29px; height: 29px; object-fit: contain; }
.nd-page-kicker { display: block; margin-bottom: 2px; color: #8fa6c4; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nd-page-identity h1 { margin: 0; color: #fff; font-family: var(--site-font-display); font-size: 26px; line-height: 1.05; }
.nd-page-actions { display: flex; align-items: center; gap: 10px; }
.nd-how-button,.nd-top-fair { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(28,18,38,.78); color: #ded2e9; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: .2s ease; }
.nd-how-button:hover,.nd-top-fair:hover { border-color: rgba(166,106,242,.5); background: rgba(166,106,242,.13); color: #fff; }
.nd-top-fair i { color: var(--nd-brass); }

/* ── Lobby ── */
.nd-lobby { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.nd-lobby-intro { width: 100%; margin-bottom: 4px; }
.nd-lobby-intro span { color: var(--nd-brass); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nd-lobby-intro h2 { margin: 6px 0 4px; color: #fff; font-family: var(--site-font-display); font-size: 22px; }
.nd-lobby-intro p { margin: 0; max-width: 780px; color: rgba(255,255,255,.5); font-size: 13px; }

.nd-history-strip { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--nd-line); border-radius: 12px; background: rgba(31,21,42,.82); box-sizing: border-box; overflow: hidden; }
.nd-history-label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nd-history-label i { color: var(--nd-brass); }
.nd-history-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.nd-history-list::-webkit-scrollbar { display: none; }
.nd-history-pill { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-size: 12px; font-weight: 800; }
.nd-history-empty { color: rgba(255,255,255,.3); font-size: 12px; }

.nd-lobby-card { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--nd-line); border-radius: 10px; background: linear-gradient(155deg,#2b2038,#1b1325); box-sizing: border-box; }
.nd-lobby-card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(232,185,106,.14); color: var(--nd-brass); }
.nd-lobby-title { color: #fff; font-size: 16px; font-weight: 700; }
.nd-lobby-heading small { color: rgba(255,255,255,.42); font-size: 11px; }
.nd-lobby-row { display: flex; align-items: center; gap: 10px; }
.nd-lobby-hint { width: 100%; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.45); font-size: 13px; }
.nd-input { min-width: 0; flex: 1; padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(255,255,255,.06); color: #fff; font-size: 14px; outline: none; }
.nd-field-label { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; color: #fff; }
.nd-field-label > span { display: flex; flex-direction: column; }
.nd-field-label strong { font-size: 13px; font-weight: 700; }
.nd-field-label small { color: rgba(255,255,255,.38); font-size: 10px; }
.nd-field-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--nd-brass); }
.nd-value-field { display: flex; align-items: center; gap: 6px; padding-right: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(0,0,0,.24); }
.nd-value-field .nd-input { border: 0; background: none; width: 92px; flex: 0 0 92px; }
.nd-value-field span { color: rgba(255,255,255,.4); font-size: 11px; font-weight: 800; }
.nd-code-field { display: flex; align-items: center; gap: 8px; width: 100%; padding-left: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(0,0,0,.24); }
.nd-code-field i { color: var(--nd-brass); }
.nd-code-field .nd-input { border: 0; background: none; letter-spacing: .28em; font-weight: 800; }
.nd-quick-stakes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.nd-quick { padding: 8px 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.04); color: #d3dced; font-size: 12px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.nd-quick:hover { border-color: rgba(232,185,106,.5); color: #fff; }
.nd-quick.is-selected { border-color: var(--nd-brass); background: rgba(232,185,106,.15); color: #fff; }

.nd-room-limits { display: flex; gap: 12px; flex-wrap: wrap; padding: 12px; border-radius: 8px; background: rgba(0,0,0,.24); }
.nd-room-limits > div { flex: 1; min-width: 128px; display: flex; align-items: center; gap: 9px; }
.nd-limit-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; background: rgba(255,255,255,.05); color: var(--nd-brass); font-size: 12px; }
.nd-limit-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.nd-limit-copy span { color: rgba(255,255,255,.5); font-size: 11px; }
.nd-limit-copy small { color: rgba(255,255,255,.32); font-size: 9px; }
.nd-room-limits strong { color: #fff; font-size: 15px; }
.nd-room-limits > .nd-limit-return .nd-limit-icon { background:rgba(95,214,160,.12);color:var(--nd-green); }
.nd-room-limits > .nd-limit-return strong { color:var(--nd-green); }
.nd-cost-note { display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid rgba(166,106,242,.2);border-radius:9px;background:linear-gradient(135deg,rgba(166,106,242,.1),rgba(0,0,0,.16)); }
.nd-cost-note-icon { display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border-radius:9px;background:rgba(166,106,242,.14);color:#cda5ff; }
.nd-cost-note-copy { min-width:0;display:flex;flex-direction:column;gap:3px; }
.nd-cost-note-copy strong { color:#f4edfa;font-size:11px;line-height:1.3; }
.nd-cost-note-copy small { color:rgba(255,255,255,.48);font-size:10px;line-height:1.4; }

.nd-public-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(0,0,0,.18); cursor: pointer; }
.nd-public-toggle input { accent-color: var(--nd-brass); }
.nd-public-copy { min-width: 0; display: flex; flex-direction: column; }
.nd-public-copy strong { color: #fff; font-size: 12px; font-weight: 700; }
.nd-public-copy strong i { margin-right: 5px; color: var(--nd-green); }
.nd-public-copy em { margin-left: 5px; padding: 2px 6px; border-radius: 8px; background: rgba(95,214,160,.14); color: var(--nd-green); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nd-public-copy small { color: rgba(255,255,255,.4); font-size: 10px; }

.nd-btn { padding: 11px 16px; border: 0; border-radius: 9px; background: linear-gradient(135deg,#f3d9a2,#c8913c); color: #2a1d06; font-size: 14px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.nd-btn:hover { filter: brightness(1.08); }
.nd-btn:disabled { opacity: .5; cursor: default; filter: none; }
.nd-btn-small { padding: 7px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.05); color: #d5dcea; font-size: 12px; font-weight: 700; cursor: pointer; }
.nd-btn-small:hover { border-color: rgba(232,185,106,.45); color: #fff; }

.nd-rules-mini { margin-top: auto; padding: 12px; border-radius: 9px; background: rgba(0,0,0,.24); }
.nd-rules-title { margin-bottom: 8px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nd-rules-grid { display: flex; flex-direction: column; gap: 7px; }
.nd-rule-line { display: grid; grid-template-columns: 20px auto minmax(0,1fr); align-items: baseline; gap: 8px; color: #fff; font-size: 11px; }
.nd-rule-line i { color: var(--nd-brass); }
.nd-rule-line b { font-weight: 800; white-space: nowrap; }
.nd-rule-line small { color: rgba(255,255,255,.42); font-size: 10px; }

.nd-public-card { width: 100%; padding: 16px; border: 1px solid var(--nd-line); border-radius: 10px; background: linear-gradient(155deg,#281d35,#181120); box-sizing: border-box; }
.nd-public-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.nd-public-title { display: flex; align-items: center; gap: 11px; }
.nd-public-title-icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(95,214,160,.12); color: var(--nd-green); }
.nd-public-title-icon > .fa { display: block; width: 1em; height: 1em; margin-top: 12px; font-size: 16px; line-height: 1; text-align: center; }
.nd-public-title-icon b { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--nd-green); box-shadow: 0 0 0 3px rgba(95,214,160,.2); }
.nd-public-title > span { display: flex; flex-direction: column; }
.nd-public-title small { color: var(--nd-green); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.nd-public-title strong { color: #fff; font-size: 15px; }
.nd-public-title em { color: rgba(255,255,255,.38); font-size: 11px; font-style: normal; }
.nd-public-tools { display: flex; align-items: center; gap: 8px; }
.nd-public-count { padding: 5px 10px; border-radius: 20px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); font-size: 11px; font-weight: 700; }
.nd-public-tools button { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.04); color: #c4cede; cursor: pointer; }
.nd-public-tools button.is-refreshing i { animation: nardy-spin .6s linear infinite; }

.nd-public-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 10px; }
.nd-public-row { display: flex; flex-direction: column; gap: 10px; padding: 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.03); transition: .18s ease; }
.nd-public-row:hover { border-color: rgba(232,185,106,.4); background: rgba(232,185,106,.06); }
.nd-public-row-top { display: flex; align-items: center; gap: 10px; }
.nd-public-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: rgba(232,185,106,.12); color: var(--nd-brass); }
.nd-public-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.nd-public-info small { color: rgba(255,255,255,.34); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nd-public-info strong { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-public-info em { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.4); font-size: 10px; font-style: normal; }
.nd-public-info em i { color: var(--nd-green); font-size: 6px; }
.nd-public-code { color: rgba(255,255,255,.3); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.nd-public-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.nd-public-meta span { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.24); }
.nd-public-meta i { color: var(--nd-brass); font-size: 11px; }
.nd-public-meta b { color: #fff; font-size: 12px; }
.nd-public-meta small { margin-left: auto; color: rgba(255,255,255,.32); font-size: 9px; }
.nd-public-join { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px; border: 0; border-radius: 8px; background: linear-gradient(135deg,#f3d9a2,#c8913c); color: #2a1d06; font-size: 12px; font-weight: 800; cursor: pointer; }
.nd-public-join:disabled { opacity: .6; cursor: default; }
.nd-public-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 26px 14px; color: rgba(255,255,255,.35); font-size: 12px; text-align: center; }
.nd-public-empty > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 14px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.3); font-size: 18px; }
.nd-public-empty strong { color: rgba(255,255,255,.6); font-size: 13px; }

/* ── Room ── */
.nd-room { display: flex; flex-direction: column; gap: 14px; }
.nd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--nd-line); border-radius: 10px; background: rgba(31,21,42,.84); flex-wrap: wrap; }
.nd-topbar-left,.nd-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nd-room-code { color: rgba(255,255,255,.4); font-size: 12px; }
.nd-topbar-left b { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .1em; }
.nd-room-meta { color: rgba(255,255,255,.42); font-size: 12px; }
.nd-invite-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: rgba(255,255,255,.04); color: #cfd8e6; font-size: 11px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.nd-invite-button:hover { border-color: rgba(232,185,106,.45); color: #fff; }
.nd-invite-button.is-copied { border-color: var(--nd-green); color: var(--nd-green); }
.nd-hash { color: rgba(255,255,255,.32); font-size: 11px; }
.nd-hash span:last-child { color: rgba(255,255,255,.5); font-family: var(--site-font-mono,monospace); }

.nd-invite-join { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(232,185,106,.3); border-radius: 10px; background: linear-gradient(120deg,rgba(232,185,106,.12),rgba(0,0,0,.2)); flex-wrap: wrap; }
.nd-invite-join-copy { display: flex; flex-direction: column; gap: 2px; }
.nd-invite-join-copy > span { color: var(--nd-brass); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nd-invite-join-copy strong { color: #fff; font-size: 15px; }
.nd-invite-join-copy small { color: rgba(255,255,255,.45); font-size: 11px; }
.nd-join-room-button { display: inline-flex; align-items: center; gap: 10px; }
.nd-join-room-button b { padding: 3px 9px; border-radius: 7px; background: rgba(0,0,0,.2); font-size: 13px; }

/* ── Arena: the two seats above a classic four-quadrant board ── */
.nd-arena { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--nd-line); border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%,rgba(75,45,101,.88),rgba(15,9,22,.97)); }
.nd-players { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.nd-duelist { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(0,0,0,.2); transition: .2s ease; }
.nd-duelist-avatar { flex: 0 0 auto; }
.nd-duelist-body { min-width: 0; display: flex; flex-direction: column; }
.nd-duelist-body b { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.nd-duelist-body small { color: rgba(255,255,255,.42); font-size: 10px; }
.nd-duelist-turn { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nd-brass); box-shadow: 0 0 0 4px rgba(232,185,106,.2); }
.nd-duelist.is-turn { border-color: rgba(232,185,106,.5); background: rgba(232,185,106,.08); }
.nd-duelist.is-turn .nd-duelist-turn { display: block; animation: nardy-pulse 1.1s ease-in-out infinite; }
.nd-duelist.is-me .nd-duelist-body b { color: var(--nd-brass); }
.nd-duelist.is-loser { opacity: .55; }
.nd-duelist-a .nd-duelist-avatar,.nd-duelist-a .nd-checker { --seat-color: var(--nd-brass); }
.nd-duelist-b { flex-direction: row-reverse; text-align: right; }
.nd-duelist-b .nd-duelist-body { align-items: flex-end; }

.nd-board { display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr); grid-template-rows: auto auto auto; grid-template-areas: "qtl bt qtr" "center center center" "qbl bb qbr"; gap: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: linear-gradient(155deg,#241a30,#140e1c); overflow: hidden; }
.nd-quad-top-left { grid-area: qtl; }
.nd-quad-top-right { grid-area: qtr; }
.nd-quad-bottom-left { grid-area: qbl; }
.nd-quad-bottom-right { grid-area: qbr; }
.nd-bar { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32); }
#nd_bar_top { grid-area: bt; align-items: flex-start; padding-top: 10px; }
#nd_bar_bottom { grid-area: bb; align-items: flex-end; padding-bottom: 10px; }

.nd-quadrant { display: flex; padding: 8px 6px 4px; }
.nd-quad-bottom-left,.nd-quad-bottom-right { align-items: flex-end; }

.nd-point { position: relative; flex: 1; min-width: 0; height: 148px; display: flex; flex-direction: column; align-items: center; }
.nd-point-bottom { flex-direction: column-reverse; }
.nd-point::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.nd-point-top::before { clip-path: polygon(6% 0, 94% 0, 50% 92%); }
.nd-point-bottom::before { clip-path: polygon(6% 100%, 94% 100%, 50% 8%); }
.nd-point:nth-child(odd)::before { background: linear-gradient(180deg,var(--nd-tan-a),var(--nd-tan-b)); opacity: .55; }
.nd-point:nth-child(even)::before { background: linear-gradient(180deg,var(--nd-blue-a),var(--nd-blue-b)); opacity: .55; }
.nd-point.is-target::before { opacity: .9; box-shadow: inset 0 0 0 2px var(--nd-brass); }
.nd-point-num { position: relative; z-index: 1; margin: 3px 0; color: rgba(255,255,255,.34); font-size: 9px; font-weight: 800; }
.nd-checkers { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 0; }
.nd-point-bottom .nd-checkers { flex-direction: column-reverse; }
.nd-checker { width: 21px; height: 21px; margin-top: -7px; border-radius: 50%; border: 2px solid rgba(0,0,0,.35); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.nd-checkers .nd-checker:first-child { margin-top: 0; }
.nd-checker-a { background: radial-gradient(circle at 32% 28%,#fbe3ad,var(--nd-brass) 70%); }
.nd-checker-b { background: radial-gradient(circle at 32% 28%,#c9edff,var(--nd-cyan) 70%); }
.nd-checker-more { margin-top: 2px; padding: 1px 5px; border-radius: 8px; background: rgba(0,0,0,.4); color: #fff; font-size: 9px; font-weight: 800; }
.nd-checkers.is-moved { animation: nardy-drop .5s ease; }

.nd-point[data-point] { cursor: default; }
.nd-arena.is-pickable .nd-point[data-point] { cursor: pointer; }
.nd-arena.is-pickable .nd-point[data-point]:hover::before { opacity: .85; }

.nd-off-tray { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nd-off-tray small { color: rgba(255,255,255,.34); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nd-off-stack { min-width: 22px; min-height: 22px; padding: 2px 7px; border-radius: 8px; background: rgba(0,0,0,.3); color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.nd-off-tray-a .nd-off-stack { color: var(--nd-brass); }
.nd-off-tray-b .nd-off-stack { color: var(--nd-cyan); }
.nd-off-stack.is-moved { animation: nardy-drop .5s ease; }

.nd-center { grid-area: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: rgba(0,0,0,.16); }
.nd-dice { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
.nd-die { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(155deg,#f4ece0,#d8cdb8); color: #1a1f28; font-size: 16px; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,.35); cursor: default; transition: .15s ease; }
.nd-dice.is-pickable .nd-die { cursor: pointer; }
.nd-dice.is-pickable .nd-die:hover { transform: translateY(-2px); }
.nd-die.is-selected { background: linear-gradient(155deg,#fff2cf,var(--nd-brass)); box-shadow: 0 0 0 2px var(--nd-brass),0 3px 10px rgba(232,185,106,.5); }
.nd-turnbar { position: relative; width: min(320px,90%); height: 5px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; opacity: 0; transition: opacity .2s ease; }
.nd-turnbar.show { opacity: 1; }
.nd-turnbar span { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg,var(--nd-green),var(--nd-brass)); transition: width .12s linear; }
.nd-turnbar.is-urgent span { background: linear-gradient(90deg,var(--nd-red),#ff8a95); }
.nd-stage { color: #fff; font-size: 15px; font-weight: 800; text-align: center; }
.nd-controls-hint { max-width: 420px; color: rgba(255,255,255,.45); font-size: 11px; text-align: center; }
.nd-stage-rematch { display: none; }
.nd-stage-rematch.show { display: block; }

.nd-log-panel { padding: 14px; border: 1px solid var(--nd-line); border-radius: 12px; background: rgba(20,14,28,.7); }
.nd-log-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: rgba(255,255,255,.4); font-size: 11px; font-weight: 700; }
.nd-log-heading i { margin-right: 6px; color: var(--nd-brass); }
.nd-log { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.nd-log-line { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.03); color: rgba(255,255,255,.65); font-size: 11px; }
.nd-log-line i { flex: 0 0 auto; color: var(--nd-brass); }
.nd-log-result i { color: var(--nd-green); }

.nd-result { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; border: 1px solid var(--nd-line); border-radius: 14px; background: linear-gradient(155deg,#241a30,#140e1c); text-align: center; }
.nd-result-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 22px; }
.nd-result-icon.is-win { background: rgba(95,214,160,.14); color: var(--nd-green); }
.nd-result-icon.is-loss { background: rgba(255,79,94,.14); color: var(--nd-red); }
.nd-result strong { color: #fff; font-size: 19px; }
.nd-result-line { margin: 0; max-width: 480px; color: rgba(255,255,255,.5); font-size: 12px; }
.nd-result-ledger { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nd-result-ledger span { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 9px; background: rgba(0,0,0,.24); }
.nd-result-ledger small { color: rgba(255,255,255,.4); font-size: 10px; }
.nd-result-ledger b { color: #fff; font-size: 14px; }
.nd-result-ledger.is-up b,.nd-result-ledger .is-up b { color: var(--nd-green); }
.nd-result-ledger.is-down b,.nd-result-ledger .is-down b { color: var(--nd-red); }
.nd-result-proof { width: 100%; max-width: 520px; padding: 10px 14px; border-radius: 9px; background: rgba(0,0,0,.2); color: rgba(255,255,255,.55); font-size: 11px; text-align: left; }
.nd-result-proof summary { cursor: pointer; color: rgba(255,255,255,.7); font-weight: 700; }
.nd-result-proof div { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.nd-result-proof code { word-break: break-all; color: #cbe6ff; }
.nd-result-proof small { color: rgba(255,255,255,.35); }
.nd-result-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.nd-result-actions span { color: rgba(255,255,255,.4); font-size: 11px; }

@keyframes nardy-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .5; } }
@keyframes nardy-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes nardy-drop { 0% { transform: translateY(-8px); opacity: .3; } 100% { transform: translateY(0); opacity: 1; } }

@media (max-width: 900px) {
	.nd-board { grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); }
	.nd-point { height: 118px; }
	.nd-checker { width: 18px; height: 18px; margin-top: -6px; }
}

@media (max-width: 767px) {
	.nd-page { padding: 16px 12px 32px; }
	.nd-board { grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); }
	.nd-point { height: 96px; }
	.nd-point-num { font-size: 8px; }
	.nd-checker { width: 15px; height: 15px; margin-top: -5px; border-width: 1.5px; }
	.nd-die { width: 30px; height: 30px; font-size: 14px; }
	.nd-duelist-body b { max-width: 110px; }
}

@media (max-width: 560px) {
	.nd-quadrant { padding: 5px 3px 2px; }
	.nd-point { height: 82px; }
	.nd-off-stack { min-width: 18px; min-height: 18px; font-size: 10px; }
}

@media (max-width: 390px) {
	.nd-players { flex-direction: column; align-items: stretch; }
	.nd-duelist-b { flex-direction: row; text-align: left; }
	.nd-duelist-b .nd-duelist-body { align-items: flex-start; }
}

@media (hover:none) and (pointer:coarse) {
	.nd-arena.is-pickable .nd-point[data-point]:hover::before { opacity: .55; }
}

/* ── Mobile app scene ────────────────────────────────────────────────────
   The shared mobile shell locks game pages to the visible viewport. Nardy
   has a lobby as well as a room, so the lobby owns its scroll while the live
   board stays fixed and fully playable above the bottom navigation. */
@media (max-width:768px), (pointer:coarse) and (max-width:1199px) and (max-height:600px) and (orientation:landscape) {
	body.is-game-page #page_content2 > .nd-page {
		height:100%!important;
		min-height:0!important;
		padding:8px 10px 14px!important;
		overflow-x:hidden!important;
		overflow-y:auto!important;
		overscroll-behavior:contain;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	body.is-game-page #page_content2 > .nd-page::-webkit-scrollbar { display:none; }
	body.is-game-page #page_content2 > .nd-page.is-room-mode { overflow-y:hidden!important; }

	.nd-lobby { gap:10px;margin:0; }
	.nd-lobby-intro { margin:0;padding:2px 2px 0; }
	.nd-lobby-intro span { font-size:9px;letter-spacing:.1em; }
	.nd-lobby-intro h2 { margin:4px 0;font-size:18px;line-height:1.15; }
	.nd-lobby-intro p { font-size:11px;line-height:1.45; }
	.nd-history-strip { padding:8px 10px;border-radius:11px; }
	.nd-lobby-card,.nd-public-card { min-width:0;padding:14px;border-radius:13px; }
	.nd-lobby-card { gap:10px; }
	.nd-lobby-row { align-items:stretch;flex-direction:column;gap:7px; }
	.nd-stake-row { flex-direction:row;align-items:center; }
	.nd-field-label { min-height:42px; }
	.nd-value-field { min-height:44px; }
	.nd-value-field .nd-input { width:76px;flex-basis:76px; }
	.nd-input { min-height:44px;font-size:16px; }
	.nd-code-field { min-height:46px;padding-left:13px; }
	.nd-quick,.nd-btn,.nd-public-join { min-height:44px; }
	.nd-public-toggle { min-height:50px; }
	.nd-room-limits { gap:8px;padding:10px; }
	.nd-room-limits > div { min-width:118px; }
	.nd-rule-line { grid-template-columns:18px auto minmax(0,1fr);gap:6px; }
	.nd-public-list { grid-template-columns:1fr; }
	.nd-lobby-hint { padding:0 2px 4px;font-size:11px;line-height:1.4; }

	.nd-room { position:relative;height:100%;min-height:0;gap:6px;overflow:hidden; }
	.nd-topbar { flex:0 0 auto;min-height:42px;gap:6px;padding:5px 7px;border-radius:12px;flex-wrap:nowrap; }
	.nd-topbar-left { min-width:0;flex:1;gap:6px;flex-wrap:nowrap; }
	.nd-topbar-right { flex:0 0 auto;gap:6px;flex-wrap:nowrap; }
	.nd-room-code { display:none; }
	.nd-topbar-left > b { flex:0 0 auto;font-size:12px; }
	.nd-room-meta { min-width:0;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap; }
	.nd-hash { display:none; }
	.nd-invite-button { width:36px;height:34px;padding:0;justify-content:center; }
	.nd-invite-button span { display:none; }
	.nd-btn-small { min-height:34px;padding:6px 10px; }
	.nd-invite-join { flex:0 0 auto;gap:8px;padding:9px 10px; }
	.nd-invite-join-copy strong { font-size:12px; }
	.nd-invite-join-copy small { display:none; }
	.nd-join-room-button { min-height:40px;padding:8px 11px; }

	.nd-arena { flex:1 1 auto;min-height:0;gap:6px;padding:6px;border-radius:14px;overflow:hidden; }
	.nd-players { min-height:38px;gap:6px;align-items:center;flex-direction:row;flex-wrap:nowrap; }
	.nd-duelist { min-width:0;max-width:48%;gap:6px;padding:4px 7px;border-radius:10px; }
	.nd-duelist-b { flex-direction:row-reverse;text-align:right; }
	.nd-duelist-b .nd-duelist-body { align-items:flex-end; }
	.nd-duelist-avatar .avatar-field { transform:scale(.84);transform-origin:center; }
	.nd-duelist-body b { max-width:90px;font-size:11px; }
	.nd-duelist-body small { max-width:100px;overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap; }
	.nd-duelist-turn { width:6px;height:6px;flex:0 0 6px; }

	.nd-board { width:100%;min-height:0;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);border-radius:10px; }
	.nd-quadrant { min-width:0;padding:3px 2px 1px; }
	.nd-point { min-width:0;height:clamp(68px,14.5dvh,104px);touch-action:manipulation; }
	.nd-point-num { margin:1px 0;font-size:7px; }
	.nd-checkers { padding:2px 0; }
	.nd-checker { width:clamp(13px,4.2vw,18px);height:clamp(13px,4.2vw,18px);margin-top:-5px;border-width:1px; }
	.nd-checker-more { margin-top:1px;padding:0 3px;font-size:7px; }
	#nd_bar_top { padding-top:4px; }
	#nd_bar_bottom { padding-bottom:4px; }
	.nd-off-tray { gap:2px; }
	.nd-off-tray small { font-size:6px;letter-spacing:0; }
	.nd-off-stack { min-width:16px;min-height:18px;padding:1px 3px;font-size:9px; }
	.nd-center { gap:4px;padding:5px 7px; }
	.nd-dice { gap:7px;min-height:42px; }
	.nd-die { width:42px;height:42px;border-radius:10px;font-size:17px; }
	.nd-turnbar { width:min(250px,88%);height:4px; }
	.nd-stage { font-size:12px;line-height:1.2; }
	.nd-controls-hint { max-width:95%;font-size:9px;line-height:1.25; }
	.nd-stage-rematch.show { margin-top:1px; }
	.nd-log-panel { display:none; }

	.nd-result:not(.hidden) { position:absolute;z-index:20;inset:48px 4px auto;max-height:calc(100% - 54px);padding:14px;overflow-y:auto;border-color:rgba(232,185,106,.34);box-shadow:0 22px 60px rgba(0,0,0,.72); }
	.nd-result-icon { width:44px;height:44px;font-size:18px; }
	.nd-result strong { font-size:16px; }
	.nd-result-proof { padding:8px 10px; }
}

@media (max-width:390px) {
	body.is-game-page #page_content2 > .nd-page { padding-right:7px!important;padding-left:7px!important; }
	.nd-lobby-intro p,.nd-cost-note,.nd-lobby-hint { display:none; }
	.nd-lobby-card,.nd-public-card { padding:12px; }
	.nd-quick-stakes { gap:5px; }
	.nd-stake-row { align-items:stretch;flex-direction:column; }
	.nd-room-limits { flex-direction:column; }
	.nd-room-limits > div { min-width:0; }
	.nd-public-heading { align-items:flex-start; }
	.nd-public-title em { display:none; }
	.nd-board { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); }
	.nd-point { height:clamp(64px,13.5dvh,92px); }
	.nd-checker { width:clamp(12px,4vw,15px);height:clamp(12px,4vw,15px); }
	.nd-duelist-body b { max-width:70px; }
	.nd-controls-hint { display:none; }
}

@media (orientation:landscape) and (max-height:600px) {
	body.is-game-page #page_content2 > .nd-page { padding:5px 8px 8px!important; }
	.nd-lobby { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start; }
	.nd-lobby-intro,.nd-public-card,.nd-lobby-hint,.nd-history-strip { grid-column:1/-1; }
	.nd-lobby-card { height:100%; }
	.nd-room { gap:4px; }
	.nd-topbar { min-height:36px;padding:3px 6px; }
	.nd-invite-button { width:32px;height:30px; }
	.nd-btn-small { min-height:30px; }
	.nd-invite-join { position:absolute;z-index:18;top:40px;right:4px;left:4px; }
	.nd-arena { display:grid;grid-template-columns:minmax(130px,23%) minmax(0,1fr);grid-template-rows:1fr;gap:5px;padding:5px; }
	.nd-players { min-height:0;align-content:center;align-items:stretch;flex-direction:column; }
	.nd-duelist,.nd-duelist-b { width:100%;max-width:none;flex-direction:row;text-align:left; }
	.nd-duelist-b .nd-duelist-body { align-items:flex-start; }
	.nd-board { height:100%;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); }
	.nd-point { height:clamp(54px,18dvh,76px); }
	.nd-center { gap:2px;padding:3px 6px; }
	.nd-dice { min-height:32px; }
	.nd-die { width:32px;height:32px;border-radius:8px;font-size:14px; }
	.nd-controls-hint { display:none; }
	.nd-result:not(.hidden) { inset:40px 4px 4px; }
}