/* =====================================================================
   NEVERLAND CASINO — 共有デザインシステム (app-ui.css)
   プレミアム・ダークカジノ / グラスモーフィズム / リッチアニメーション
   ※ style.css の名前色・称号・演出クラスとは独立。両方読み込んでOK。
   ===================================================================== */

:root {
    --bg-0:#070a12; --bg-1:#0e1424; --bg-2:#161f38;
    --gold:#e7c76d; --gold-2:#c9962f; --gold-soft:#ffe9b8;
    --royal:#8b5cf6; --royal-2:#a855f7;
    --cyan:#22d3ee; --emerald:#34d399; --rose:#fb7185; --amber:#f59e0b;
    --ink:#eef2fb; --muted:#9aa6c0; --faint:#6b7691;
    --line:rgba(255,255,255,.09);
    --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075);
    --shadow:0 18px 50px rgba(0,0,0,.55);
    --radius:18px;
    --font:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
}

* { box-sizing:border-box; }

body.nc {
    margin:0; padding:0; min-height:100vh;
    font-family:var(--font); color:var(--ink); line-height:1.6;
    background:var(--bg-0);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

/* ---- 背景：オーロラ + グリッド（固定・GPU負荷を抑えた軽量版） ---- */
.nc-bg { position:fixed; inset:0; z-index:-2; overflow:hidden;
    background:
        radial-gradient(1200px 700px at 15% -10%, rgba(139,92,246,.18), transparent 60%),
        radial-gradient(1000px 600px at 90% 0%, rgba(34,211,238,.13), transparent 55%),
        radial-gradient(900px 800px at 50% 120%, rgba(231,199,109,.12), transparent 60%),
        linear-gradient(180deg,#070a12 0%, #0b1120 45%, #070a12 100%);
}
/* ゆっくり明滅するオーロラ光（transform/blurを使わず opacity のみ＝軽量） */
.nc-bg::before { content:''; position:absolute; inset:0;
    background:radial-gradient(700px 500px at 80% 90%, rgba(139,92,246,.10), transparent 60%);
    animation:nc-glow 12s ease-in-out infinite; }
@keyframes nc-glow { 0%,100%{opacity:.5} 50%{opacity:1} }

/* うっすらグリッド */
.nc-bg::after { content:''; position:absolute; inset:0; opacity:.3;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:44px 44px; mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); }

/* ---- レイアウト ---- */
.nc-container { max-width:1040px; margin:0 auto; padding:0 18px 64px; }
.nc-narrow { max-width:460px; }

/* ---- ヒーロー / ヘッダー ---- */
.nc-hero { position:relative; text-align:center; padding:64px 20px 46px; }
.nc-hero .kicker { letter-spacing:.42em; font-size:11px; color:var(--muted); text-transform:uppercase; margin:0 0 14px; }
.nc-hero h1 { margin:0; font-size:clamp(30px,7vw,52px); font-weight:900; letter-spacing:.04em;
    background:linear-gradient(100deg,#fff 0%,var(--gold-soft) 40%,var(--gold) 60%,#fff 100%);
    background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    animation:nc-sheen 6s linear infinite; text-shadow:0 6px 40px rgba(231,199,109,.18); }
@keyframes nc-sheen { to { background-position:220% center; } }
.nc-hero .sub { margin:12px 0 0; color:var(--muted); font-size:13px; letter-spacing:.18em; }
.nc-hero .rule { width:120px; height:3px; margin:22px auto 0; border-radius:3px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent); box-shadow:0 0 18px rgba(231,199,109,.5); }

/* スティッキー・グラスヘッダー */
.nc-topbar { position:sticky; top:0; z-index:40; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    background:linear-gradient(180deg,rgba(10,14,26,.86),rgba(10,14,26,.55)); border-bottom:1px solid var(--line); }
.nc-topbar .in { max-width:1040px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nc-brand { font-weight:900; letter-spacing:.16em; font-size:15px; color:var(--gold-soft); text-decoration:none; white-space:nowrap; }
.nc-brand span { color:var(--muted); font-weight:600; }
.nc-topbar-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---- カード（グラス） ---- */
.nc-card { position:relative; background:var(--glass); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    overflow:hidden; }
.nc-card::before { content:''; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); opacity:.6; }
.nc-card + .nc-card { margin-top:20px; }
.nc-card h2, .nc-card h3 { margin:0 0 18px; }
.nc-card-title { font-size:19px; font-weight:800; letter-spacing:.03em; display:flex; align-items:center; gap:10px;
    padding-bottom:14px; border-bottom:1px solid var(--line); }
.nc-card-title .dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }

/* ---- グリッド ---- */
.nc-grid { display:grid; gap:18px; }
.nc-grid.cols-2 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.nc-grid.cols-3 { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.nc-grid.cards  { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }

/* ---- ボタン ---- */
.nc-btn { position:relative; display:inline-flex!important; align-items:center; justify-content:center; gap:8px;
    padding:13px 24px; border-radius:12px; border:1px solid transparent; font-weight:800; font-size:15px; letter-spacing:.02em;
    cursor:pointer; text-decoration:none; text-align:center; color:#fff; overflow:hidden;
    /* style.css の .gold 等（文字グラデ化）と衝突してもボタン塗り・文字を保持する */
    -webkit-text-fill-color:currentColor; background-clip:border-box; -webkit-background-clip:border-box;
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; -webkit-tap-highlight-color:transparent; }
.nc-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.nc-btn:active { transform:translateY(0) scale(.98); }
.nc-btn::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); }
.nc-btn:hover::after { animation:nc-swipe .8s ease; }
@keyframes nc-swipe { to { left:130%; } }

.nc-btn.gold   { background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#231a05; box-shadow:0 10px 26px rgba(231,199,109,.32); }
.nc-btn.royal  { background:linear-gradient(135deg,var(--royal),#6d28d9); box-shadow:0 10px 26px rgba(139,92,246,.34); }
.nc-btn.cyan   { background:linear-gradient(135deg,#06b6d4,#0891b2); box-shadow:0 10px 26px rgba(34,211,238,.3); }
.nc-btn.emerald{ background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 10px 26px rgba(16,185,129,.3); }
.nc-btn.rose   { background:linear-gradient(135deg,#f43f5e,#be123c); box-shadow:0 10px 26px rgba(244,63,94,.3); }
.nc-btn.slate  { background:linear-gradient(135deg,#334155,#1e293b); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.nc-btn.ghost  { background:var(--glass-2); border-color:var(--line); color:var(--ink); box-shadow:none; }
.nc-btn.ghost:hover { border-color:rgba(231,199,109,.5); color:var(--gold-soft); }
.nc-btn.block  { width:100%; }
.nc-btn.sm     { padding:8px 15px; font-size:13px; border-radius:9px; }
.nc-btn.lg     { padding:16px 34px; font-size:17px; }

/* ---- ステータス／数値 ---- */
.nc-stat { background:linear-gradient(160deg,var(--glass-2),transparent); border:1px solid var(--line); border-radius:14px; padding:18px 20px; text-align:center; }
.nc-stat .label { display:block; font-size:12px; color:var(--muted); letter-spacing:.08em; margin-bottom:8px; }
.nc-stat .value { font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.v-gold { color:var(--gold-soft); text-shadow:0 0 18px rgba(231,199,109,.35); }
.v-rose { color:#fca5b4; } .v-purple { color:#c4b5fd; } .v-cyan { color:#67e8f9; } .v-emerald{ color:#6ee7b7; }

/* ---- フォーム ---- */
.nc-field { margin-bottom:16px; }
.nc-field label { display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:8px; letter-spacing:.04em; }
.nc-input { width:100%; padding:13px 15px; font-size:16px; color:var(--ink); background:rgba(0,0,0,.28);
    border:1px solid var(--line); border-radius:11px; transition:border-color .2s, box-shadow .2s, background .2s; }
.nc-input::placeholder { color:var(--faint); }
.nc-input:focus { outline:none; border-color:rgba(231,199,109,.6); background:rgba(0,0,0,.4);
    box-shadow:0 0 0 3px rgba(231,199,109,.14); }

/* ---- テーブル ---- */
.nc-table-wrap { overflow-x:auto; border-radius:12px; border:1px solid var(--line); }
table.nc-table { width:100%; border-collapse:collapse; white-space:nowrap; }
table.nc-table th, table.nc-table td { padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
table.nc-table th { background:rgba(255,255,255,.04); color:var(--muted); font-weight:700; letter-spacing:.04em; }
table.nc-table tr:last-child td { border-bottom:none; }
table.nc-table tbody tr { transition:background .15s; }
table.nc-table tbody tr:hover { background:rgba(255,255,255,.03); }

/* ---- ランキング / 表彰台 ---- */
.nc-rank { display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:12px; border-bottom:1px solid var(--line); transition:background .2s, transform .2s; }
.nc-rank:last-child { border-bottom:none; }
.nc-rank:hover { background:rgba(255,255,255,.035); transform:translateX(3px); }
.nc-rank .medal { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border-radius:50%;
    font-weight:900; font-size:15px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); }
.nc-rank.top1 .medal { color:#231a05; background:linear-gradient(135deg,#ffe9b8,var(--gold-2)); box-shadow:0 0 22px rgba(231,199,109,.55); border-color:transparent; }
.nc-rank.top2 .medal { color:#1a1f2b; background:linear-gradient(135deg,#e8eef7,#9aa6c0); box-shadow:0 0 16px rgba(200,210,230,.4); border-color:transparent; }
.nc-rank.top3 .medal { color:#2a1608; background:linear-gradient(135deg,#e9a763,#b06a34); box-shadow:0 0 16px rgba(176,106,52,.45); border-color:transparent; }
.nc-rank .who { flex:1 1 auto; min-width:0; }
.nc-rank .who .t { font-size:11px; color:var(--faint); }
.nc-rank .who .n { font-weight:800; font-size:16px; }
.nc-rank .score { font-weight:900; color:var(--gold-soft); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* ---- ゲームカード ---- */
.nc-game { position:relative; border-radius:16px; padding:22px; border:1px solid var(--line);
    background:linear-gradient(165deg,var(--glass-2),rgba(255,255,255,.02)); overflow:hidden; transition:transform .22s, box-shadow .22s, border-color .22s; }
.nc-game:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(0,0,0,.5); border-color:rgba(231,199,109,.35); }
.nc-game .emoji { font-size:30px; }
.nc-game h3 { margin:8px 0 6px; font-size:18px; font-weight:800; }
.nc-game p { margin:0 0 16px; font-size:13px; color:var(--muted); min-height:38px; line-height:1.5; }
.nc-game .rates { display:grid; gap:8px; }
.nc-game .glow { position:absolute; width:150px; height:150px; border-radius:50%; filter:blur(50px); opacity:.25; top:-40px; right:-40px; pointer-events:none; }

/* ---- アラート / トースト ---- */
.nc-alert { padding:14px 18px; border-radius:12px; margin-bottom:18px; font-weight:700; border:1px solid; }
.nc-alert.ok  { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); color:#6ee7b7; }
.nc-alert.err { background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.4); color:#fca5b4; }
.nc-toast { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:9999; padding:13px 22px; border-radius:12px;
    font-weight:800; color:#fff; box-shadow:var(--shadow); animation:nc-drop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.nc-toast.ok  { background:linear-gradient(135deg,#10b981,#059669); }
.nc-toast.err { background:linear-gradient(135deg,#f43f5e,#be123c); }
@keyframes nc-drop { from { opacity:0; transform:translate(-50%,-24px); } }

/* ---- ウォレットチップ（所持金バー） ---- */
.nc-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:30px; background:var(--glass-2); border:1px solid var(--line); font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap; }
.nc-chip b { color:var(--gold-soft); font-variant-numeric:tabular-nums; font-size:13px; }

/* ---- リスト行（選択リスト等） ---- */
.nc-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 6px; border-bottom:1px solid var(--line); }
.nc-row:last-child { border-bottom:none; }
.nc-row .lbl { font-size:16px; font-weight:800; min-width:0; }

/* ---- 価格タグ ---- */
.nc-price { font-weight:900; color:var(--gold-soft); font-variant-numeric:tabular-nums; }
.nc-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:800; color:#fff; }

/* ---- 注記 ---- */
.nc-notes { margin-top:28px; padding:18px 20px; border-radius:12px; background:var(--glass); border-left:3px solid var(--gold-2);
    font-size:12.5px; color:var(--muted); }
.nc-notes p { margin:5px 0; }

/* ---- セクション見出し ---- */
.nc-section-h { font-size:22px; font-weight:900; margin:44px 0 20px; padding-left:14px; letter-spacing:.03em;
    border-left:4px solid var(--gold); }

/* ---- 出現アニメーション（app-ui.js が .in を付与） ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.06s} .reveal.d2{transition-delay:.12s} .reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s} .reveal.d5{transition-delay:.3s} .reveal.d6{transition-delay:.36s}

/* フロート装飾（チップ等） */
.nc-float { animation:nc-float 6s ease-in-out infinite; }
@keyframes nc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

@media (max-width:600px){
    .nc-hero { padding:46px 18px 34px; }
    .nc-card { padding:20px; }
    .nc-topbar .in { padding:10px 14px; }
    .nc-brand { font-size:13px; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce){
    .nc-bg::before, .nc-hero h1 { animation:none; }
    .reveal { transition:none; opacity:1; transform:none; }
}