/* ================================
   STAR CATCH v4
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

.scg-wrapper {
    --c-gold:   #ffd700;
    --c-green:  #5dff80;
    --c-cyan:   #00e5ff;
    --c-red:    #ff4d4d;
    --c-pink:   #ff6eb4;
    --c-text:   #f0eaff;
    --c-muted:  rgba(255,255,255,.42);
    --c-border: rgba(255,255,255,.12);
    --f-head:   'Fredoka One', cursive;
    --f-body:   'Zen Kaku Gothic New', sans-serif;
    /* ランク別バスケット色 */
    --rank1: #cc7700;
    --rank2: #00ccaa;
    --rank3: #aa44ff;
    --rank4: #ff4488;
}

.scg-wrapper {
    font-family: var(--f-body);
    background: linear-gradient(160deg,#0d0728 0%,#1a0a4a 55%,#0a1530 100%);
    border-radius: 18px;
    padding: 8px 10px 8px;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.7), inset 0 0 60px rgba(0,0,40,.5);
    border: 1px solid var(--c-border);
    box-sizing: border-box;
    user-select: none; -webkit-user-select: none;
}

/* ---- HUD ---- */
.scg-hud { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; padding:0 2px; min-height:38px; }
.scg-hud-col { display:flex; flex-direction:column; align-items:flex-start; min-width:62px; }
.scg-hud-right-col  { align-items:flex-end; }
.scg-hud-center-col { align-items:center; flex:1; gap:3px; }
.scg-hud-label { font-family:var(--f-head); font-size:8px; letter-spacing:2px; color:var(--c-muted); }
.scg-hud-val   { font-family:var(--f-head); font-size:20px; color:var(--c-gold); text-shadow:0 0 14px rgba(255,215,0,.6); line-height:1; }
.scg-lives { font-size:14px; letter-spacing:2px; filter:drop-shadow(0 0 4px rgba(255,80,80,.5)); }
.scg-lives .lost { filter:grayscale(1); opacity:.22; }

/* 連鎖バッジ */
.scg-chain-badge {
    font-family:var(--f-head); font-size:12px; color:var(--c-cyan);
    background:rgba(0,229,255,.12); border:1px solid rgba(0,229,255,.35);
    border-radius:20px; padding:2px 9px;
    text-shadow:0 0 8px var(--c-cyan);
    animation:scg-chain-pulse .7s ease infinite alternate;
    white-space:nowrap;
}
@keyframes scg-chain-pulse {
    from { box-shadow:0 0 4px rgba(0,229,255,.3); }
    to   { box-shadow:0 0 16px rgba(0,229,255,.8); }
}

/* ---- バスケットランクバー ---- */
.scg-rank-bar {
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);
    border-radius:8px; padding:3px 10px; margin-bottom:4px;
}
.scg-rank-label {
    font-family:var(--f-head); font-size:9px; letter-spacing:1px;
    color:var(--c-muted); white-space:nowrap;
}
.scg-rank-pips { display:flex; gap:5px; flex:1; justify-content:center; }
.scg-pip {
    display:inline-block; width:20px; height:20px;
    border-radius:4px; border:2px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
    transition:all .35s ease;
}
/* ランク1 */
.scg-pip.active-1 { background:var(--rank1); border-color:var(--rank1); box-shadow:0 0 8px var(--rank1); }
/* ランク2 */
.scg-pip.active-2 { background:var(--rank2); border-color:var(--rank2); box-shadow:0 0 10px var(--rank2); }
/* ランク3 */
.scg-pip.active-3 { background:var(--rank3); border-color:var(--rank3); box-shadow:0 0 12px var(--rank3); }
/* ランク4 */
.scg-pip.active-4 {
    background:linear-gradient(135deg,#ff4488,#ffcc00,#00e5ff,#aa44ff);
    border-color:#fff; box-shadow:0 0 16px #fff8;
    animation:scg-pip-rainbow .8s linear infinite;
}
@keyframes scg-pip-rainbow {
    0%  { filter:hue-rotate(0deg); }
    100%{ filter:hue-rotate(360deg); }
}
.scg-rank-name {
    font-family:var(--f-head); font-size:11px; color:var(--c-text);
    letter-spacing:1px; white-space:nowrap; min-width:52px; text-align:right;
}

/* ---- プログレスバー ---- */
.scg-progress-wrap { margin-bottom:4px; padding:0 2px; }
.scg-progress-label { display:flex; justify-content:space-between; font-family:var(--f-head); font-size:9px; color:var(--c-muted); margin-bottom:3px; letter-spacing:1px; }
.scg-progress-bar { height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; border:1px solid rgba(255,255,255,.09); }
.scg-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--c-cyan),var(--c-gold)); border-radius:99px; transition:width .35s ease; box-shadow:0 0 8px rgba(0,229,255,.45); }

/* ---- キャンバス ---- */
.scg-canvas-wrap { position:relative; border-radius:12px; overflow:hidden; border:1.5px solid rgba(255,255,255,.1); box-shadow:inset 0 0 30px rgba(0,0,0,.6); width:100%; aspect-ratio:360/420; }
#scg-canvas { display:block; width:100%; height:100%; }

/* ---- オーバーレイ共通 ---- */
.scg-overlay {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(8,4,24,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    z-index:20; padding:12px; box-sizing:border-box; overflow-y:auto;
}
.scg-overlay-dim {
    background:rgba(8,4,24,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.scg-overlay-box {
    width:100%; max-width:300px; text-align:center;
    display:flex; flex-direction:column; gap:8px;
    animation:scg-popin .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes scg-popin { from{transform:scale(.65);opacity:0} to{transform:scale(1);opacity:1} }

.scg-ol-icon { font-size:48px; display:block; filter:drop-shadow(0 0 12px rgba(255,215,0,.5)); line-height:1; }
.scg-bounce { animation:scg-bounce .6s ease infinite alternate; }
@keyframes scg-bounce { from{transform:translateY(0) scale(1)} to{transform:translateY(-8px) scale(1.1)} }

.scg-ol-title { font-family:var(--f-head); font-size:clamp(20px,6vw,28px); color:var(--c-gold); text-shadow:0 0 20px rgba(255,215,0,.7); letter-spacing:3px; margin:0; }
.scg-clear-title    { color:var(--c-green); text-shadow:0 0 20px rgba(93,255,128,.7); }
.scg-gameover-title { color:var(--c-red);   text-shadow:0 0 20px rgba(255,77,77,.7); }
.scg-pause-title    { color:var(--c-cyan);  text-shadow:0 0 20px rgba(0,229,255,.7); }

/* ---- カウントダウン ---- */
.scg-countdown-wrap { display:flex; align-items:center; justify-content:center; }
.scg-countdown-num {
    font-family:var(--f-head); font-size:clamp(80px,22vw,130px);
    color:#fff; text-shadow:0 0 40px rgba(255,255,255,.9), 0 0 80px rgba(0,229,255,.6);
    animation:scg-count-pop .85s cubic-bezier(.34,1.56,.64,1) forwards;
    line-height:1;
}
@keyframes scg-count-pop {
    0%   { transform:scale(2.2); opacity:0; }
    40%  { transform:scale(1);   opacity:1; }
    80%  { transform:scale(1);   opacity:1; }
    100% { transform:scale(.5);  opacity:0; }
}
.scg-countdown-num.go {
    color:var(--c-gold);
    text-shadow:0 0 40px rgba(255,215,0,.9), 0 0 80px rgba(255,150,0,.6);
    font-size:clamp(60px,18vw,100px);
}

/* ---- howto ---- */
.scg-howto { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 12px; text-align:left; }
.scg-howto-row { font-size:11.5px; color:var(--c-text); padding:4px 0; line-height:1.55; border-bottom:1px solid rgba(255,255,255,.05); }
.scg-howto-row:last-child { border-bottom:none; }
.scg-howto-row strong { color:var(--c-cyan); }
.scg-howto-divider { height:1px; background:rgba(255,255,255,.12); margin:4px 0; }
.scg-howto-ctrl { display:flex; justify-content:space-between; font-size:10.5px; color:var(--c-muted); padding:3px 0; }

/* ---- ポーズ情報 ---- */
.scg-pause-info { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 16px; font-family:var(--f-head); font-size:13px; color:var(--c-text); display:flex; flex-direction:column; gap:5px; text-align:left; }
.scg-pause-info strong { color:var(--c-gold); }

/* ---- リザルト表 ---- */
.scg-result-table { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 14px; }
.scg-result-row { display:flex; justify-content:space-between; font-family:var(--f-head); font-size:12px; color:var(--c-text); padding:5px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.scg-result-row:last-child { border-bottom:none; }
.scg-result-row span:last-child { color:var(--c-gold); font-size:15px; }
.scg-bonus-row span:last-child  { color:var(--c-green); }

/* ---- ボタン ---- */
.scg-btn { font-family:var(--f-head); font-size:14px; letter-spacing:1px; border:none; border-radius:50px; padding:12px 28px; cursor:pointer; width:100%; transition:transform .15s,box-shadow .15s; -webkit-tap-highlight-color:transparent; }
.scg-btn:active { transform:scale(.97); }
.scg-btn-gold  { background:linear-gradient(135deg,#ffd700,#ff8c00); color:#1a0533; box-shadow:0 5px 20px rgba(255,200,0,.4); }
.scg-btn-green { background:linear-gradient(135deg,var(--c-green),#00cc44); color:#001a0a; box-shadow:0 5px 20px rgba(93,255,128,.35); }
.scg-btn-ghost { background:transparent; color:var(--c-muted); border:1px solid rgba(255,255,255,.18); font-size:12px; padding:9px 20px; }
.scg-btn-ghost:hover { background:rgba(255,255,255,.07); color:var(--c-text); }

/* ---- ゲームバー ---- */
.scg-game-bar { display:flex; gap:6px; margin-top:5px; align-items:stretch; }
.scg-touch-btn { font-family:var(--f-head); font-size:13px; flex:1; padding:9px 0; background:rgba(255,255,255,.08); color:var(--c-text); border:1px solid rgba(255,255,255,.15); border-radius:10px; cursor:pointer; transition:background .1s; -webkit-tap-highlight-color:transparent; touch-action:none; }
.scg-touch-btn.pressing,.scg-touch-btn:active { background:rgba(255,215,0,.18); border-color:var(--c-gold); color:var(--c-gold); }
.scg-pause-btn { font-family:var(--f-head); font-size:11px; letter-spacing:.5px; flex:0 0 auto; width:78px; padding:8px 0; background:rgba(0,229,255,.1); color:var(--c-cyan); border:1px solid rgba(0,229,255,.3); border-radius:12px; cursor:pointer; transition:background .1s; -webkit-tap-highlight-color:transparent; }
.scg-pause-btn:active { background:rgba(0,229,255,.25); }

@media(max-width:360px) {
    .scg-wrapper { padding:8px 8px 10px; }
    .scg-hud-val { font-size:20px; }
    .scg-touch-btn { font-size:13px; padding:12px 0; }
    .scg-pause-btn { font-size:10px; width:66px; }
}

/* ---- カウントダウンオーバーレイ ---- */
.scg-ol-cd {
    background: rgba(8,4,24,0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.scg-cd-num {
    font-family: 'Fredoka One', cursive;
    font-size: 130px;
    line-height: 1;
    color: #00e5ff;
    text-shadow:
        0 0 30px rgba(0,229,255,0.9),
        0 0 80px rgba(0,229,255,0.5);
    animation: cd-pop 0.85s cubic-bezier(.22,1,.36,1) forwards;
}

.scg-cd-num.go {
    color: #ffd700;
    font-size: 110px;
    text-shadow:
        0 0 30px rgba(255,215,0,0.9),
        0 0 80px rgba(255,215,0,0.5);
}

@keyframes cd-pop {
    0%   { transform: scale(1.6);  opacity: 1; }
    70%  { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(0.8);  opacity: 0; }
}

/* ---- 音量ボタン ---- */
.scg-sound-bar {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}
.scg-sound-btn {
    font-family: var(--f-head);
    font-size: 11px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 4px 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 1px;
}
.scg-sound-btn:hover,
.scg-sound-btn.active {
    background: rgba(0,229,255,.12);
    color: var(--c-cyan);
    border-color: rgba(0,229,255,.35);
}
.scg-sound-btn.muted {
    color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.04);
}

/* ---- ハイスコア ---- */
.scg-hud-best {
    font-family: var(--f-head);
    font-size: 14px;
    color: #ff9ddd;
    text-shadow: 0 0 10px rgba(255,120,200,.5);
    line-height: 1;
}

/* ---- 名前入力フォーム ---- */
.scg-name-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 10px 12px;
}
.scg-name-label {
    font-family: var(--f-head);
    font-size: 11px;
    color: var(--c-gold);
    letter-spacing: 1px;
}
.scg-name-input {
    font-family: var(--f-body);
    font-size: 14px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 8px 10px;
    color: #fff;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.scg-name-input::placeholder { color: rgba(255,255,255,.35); }
.scg-name-input:focus { border-color: var(--c-gold); }
.scg-submit-msg {
    font-family: var(--f-head);
    font-size: 12px;
    min-height: 16px;
    color: var(--c-green);
    text-align: center;
}
.scg-submit-msg.error { color: var(--c-red); }

/* ---- ランキング一覧 ---- */
.scg-ranking-list {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}
.scg-ranking-loading {
    font-family: var(--f-head);
    font-size: 12px;
    color: var(--c-muted);
    padding: 16px;
    text-align: center;
}
.scg-ranking-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-family: var(--f-head);
    font-size: 12px;
}
.scg-ranking-row:last-child { border-bottom: none; }
.scg-ranking-row.top1 { background: rgba(255,215,0,.1); }
.scg-ranking-row.top2 { background: rgba(192,192,192,.08); }
.scg-ranking-row.top3 { background: rgba(205,127,50,.08); }
.scg-rank-num  { font-size: 14px; text-align: center; }
.scg-rank-name-col { color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scg-rank-score { color: var(--c-gold); font-size: 13px; white-space: nowrap; }
.scg-rank-sub   { font-size: 9px; color: var(--c-muted); grid-column: 2 / 4; margin-top: -4px; }

/* ---- アイコン選択グリッド ---- */
.scg-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin: 4px 0;
}
.scg-icon-btn {
    font-size: 22px;
    background: rgba(255,255,255,.07);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 6px 0;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.scg-icon-btn:hover {
    background: rgba(255,255,255,.14);
    transform: scale(1.1);
}
.scg-icon-btn.selected {
    border-color: var(--c-gold);
    background: rgba(255,215,0,.18);
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(255,215,0,.4);
}

/* ランキングのアイコン列を大きく */
.scg-rank-name-col {
    font-size: 20px;
    text-align: center;
}

/* ---- キーボードヒント ---- */
.scg-key-hint {
    display: inline-block;
    font-size: 10px;
    font-family: monospace;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0;
    opacity: .8;
}