/* ==============================================
   COIN VOLCANO — style.css
   Covers: Splash · Start · T&C · Settings · Game
============================================== */

/* ── RESET ── */
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

:root {
    --bg:        #0a080e;
    --orange:    #FF4500;
    --gold:      #FFD700;
    --gem:       #00D4FF;
    --danger:    #FF1744;
    --border:    rgba(255,90,0,0.22);
    --text:      #fff;
    --text-dim:  rgba(255,255,255,0.45);
    --panel-bg:  #130808;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg);
    font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
    color: var(--text);
    touch-action: manipulation;
}

.hidden { display: none !important; }

/* =============================================
   SCREEN TRANSITIONS
============================================= */
.screen-fade-out {
    animation: scFadeOut .35s ease-out forwards;
}
.screen-fade-in {
    animation: scFadeIn .4s ease-out forwards;
}
@keyframes scFadeOut { to { opacity: 0; transform: scale(.96); } }
@keyframes scFadeIn  { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

/* =============================================
   START SCREEN  (first visible screen)
============================================= */
#screen-start {
    position: fixed; inset: 0; z-index: 8000;
    background: radial-gradient(ellipse at 50% 30%, #1e0d14 0%, #08060c 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: space-between;
    padding: 0 20px max(24px,env(safe-area-inset-bottom));
    overflow: hidden;
}

.start-bg-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%, rgba(255,69,0,.12) 0%, transparent 65%);
}

/* Floating spark particles */
.start-sparks { position: absolute; inset: 0; pointer-events: none; }
.spark {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--gold);
    border-radius: 50%;
    animation: sparkFloat var(--d,3s) ease-in-out infinite;
    animation-delay: var(--dl,0s);
    opacity: 0;
}
@keyframes sparkFloat {
    0%,100% { opacity: 0; transform: translateY(0) scale(1); }
    20%      { opacity: 1; }
    80%      { opacity: .5; }
    100%     { transform: translateY(-80px) scale(.3); opacity: 0; }
}

.start-logo-wrap {
    display: flex; flex-direction: column; align-items: center;
    padding-top: max(40px, env(safe-area-inset-top, 20px));
    gap: 6px; z-index: 1;
}
.start-volcano-big {
    font-size: 88px;
    filter: drop-shadow(0 0 28px rgba(255,69,0,.6));
    animation: startVolcano 3s ease-in-out infinite;
}
@keyframes startVolcano {
    0%,100% { transform: scale(1) translateY(0); }
    50%     { transform: scale(1.04) translateY(-6px); }
}

.start-title-wrap {
    display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.start-t1 {
    font-size: 16px; letter-spacing: 9px;
    color: rgba(255,215,0,.65); font-weight: 400;
}
.start-t2 {
    font-size: 44px; font-weight: 900; letter-spacing: 3px;
    background: linear-gradient(135deg, #FF6B35 0%, #FFD700 50%, #FF4500 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 16px rgba(255,100,0,.45));
}
.start-subtitle {
    font-size: 12px; letter-spacing: 2px;
    color: rgba(255,255,255,.35); margin-top: 6px;
}

/* Returning player save badge */
.start-save-badge {
    z-index: 1;
    background: rgba(255,215,0,.1);
    border: 1px solid rgba(255,215,0,.3);
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 13px; color: var(--gold);
    text-align: center;
    min-height: 10px;
}
.start-save-badge:empty { display: none; }

.start-play-wrap { z-index: 1; }
.start-play-btn {
    background: linear-gradient(135deg, #c43700, #FF6B35, #FFD700);
    border: none; border-radius: 20px;
    color: #fff; font-size: 22px; font-weight: 900;
    letter-spacing: 3px;
    padding: 18px 64px;
    cursor: pointer;
    box-shadow: 0 6px 30px rgba(255,69,0,.5), 0 0 0 2px rgba(255,150,0,.2);
    transition: transform .15s, box-shadow .15s;
    position: relative; overflow: hidden;
}
.start-play-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 50%);
    border-radius: 20px;
}
.start-play-btn:active { transform: scale(.94); box-shadow: 0 2px 12px rgba(255,69,0,.4); }

.start-bottom-btns {
    display: flex; gap: 16px; z-index: 1;
    padding-bottom: 4px;
}
.start-side-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 24px;
    cursor: pointer; color: var(--text);
    transition: background .2s, transform .15s;
    min-width: 90px;
}
.start-side-btn:active { background: rgba(255,100,0,.12); transform: scale(.96); }
.ssb-icon  { font-size: 26px; }
.ssb-label { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }

/* =============================================
   TERMS & CONDITIONS SCREEN
============================================= */
#screen-tc {
    position: fixed; inset: 0; z-index: 9500;
    background: var(--bg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.tc-wrap {
    display: flex; flex-direction: column;
    height: 100%;
    max-width: 520px; margin: 0 auto; width: 100%;
}
.tc-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    background: linear-gradient(180deg, rgba(255,69,0,.08), transparent);
    flex-shrink: 0;
}
.tc-header-icon { font-size: 36px; display: block; margin-bottom: 6px; }
.tc-header h2   { font-size: 20px; color: var(--orange); }
.tc-updated     { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

.tc-body {
    flex: 1; overflow-y: auto;
    padding: 18px 20px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.tc-body h3 {
    font-size: 13px; font-weight: 700;
    color: var(--gold);
    margin: 18px 0 6px;
    text-transform: uppercase; letter-spacing: .5px;
}
.tc-body h3:first-child { margin-top: 0; }
.tc-body p {
    font-size: 13px; line-height: 1.65;
    color: rgba(255,255,255,.7);
}

.tc-footer {
    display: flex; gap: 10px;
    padding: 14px 20px max(14px,env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--panel-bg);
    flex-shrink: 0;
}
.tc-btn {
    flex: 1; padding: 14px;
    border: none; border-radius: 14px;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.tc-btn:active { transform: scale(.96); }
.tc-btn-accept  { background: linear-gradient(135deg,#c43700,#FF6B35); color:#fff; box-shadow:0 4px 16px rgba(255,69,0,.35); }
.tc-btn-decline { background: rgba(255,255,255,.07); color:var(--text-dim); border:1px solid var(--border); }

/* =============================================
   SETTINGS SCREEN
============================================= */
#screen-settings {
    position: fixed; inset: 0; z-index: 9200;
    background: var(--bg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.settings-wrap {
    display: flex; flex-direction: column;
    height: 100%;
    max-width: 520px; margin: 0 auto; width: 100%;
}
.settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,69,0,.07), transparent);
}
.settings-header h2 { font-size: 17px; color: var(--text); }
.settings-back-btn {
    background: none; border: none; color: var(--orange);
    font-size: 17px; cursor: pointer; padding: 6px;
    font-weight: 700;
}

.settings-body {
    flex: 1; overflow-y: auto;
    padding: 0 16px max(20px,env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.setting-section-label {
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-dim);
    padding: 18px 4px 8px;
}

.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 8px;
}
.setting-left {
    display: flex; align-items: center; gap: 12px; flex: 1;
}
.setting-icon { font-size: 28px; min-width: 36px; text-align: center; }
.setting-name { font-size: 14px; font-weight: 600; }
.setting-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    display: block;
    width: 50px; height: 28px;
    background: rgba(255,255,255,.1);
    border-radius: 14px;
    position: relative;
    transition: background .25s;
}
.toggle input:checked + .toggle-track { background: var(--orange); }
.toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(22px); }

/* Stats grid */
.settings-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; margin-bottom: 8px;
}
.stat-card {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}
.stat-card-val  { font-size: 22px; font-weight: 700; color: var(--gold); }
.stat-card-lbl  { font-size: 10px; color: var(--text-dim); margin-top: 2px; letter-spacing: .5px; }

.settings-danger-btn {
    width: 100%;
    background: rgba(255,23,68,.1);
    border: 1px solid rgba(255,23,68,.3);
    color: #FF6B8A;
    border-radius: 14px;
    padding: 15px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    margin-bottom: 8px;
}
.settings-danger-btn:active { background: rgba(255,23,68,.2); transform: scale(.98); }

.settings-outline-btn {
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 14px;
    padding: 15px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
    margin-bottom: 8px;
}
.settings-outline-btn:active { background: rgba(255,100,0,.1); transform: scale(.98); }

.settings-about-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px; gap: 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 8px;
}
.about-volcano    { font-size: 40px; }
.about-game-name  { font-size: 18px; font-weight: 700; margin-top: 6px; }
.about-version    { font-size: 12px; color: var(--text-dim); }
.about-copy       { font-size: 11px; color: rgba(255,255,255,.2); margin-top: 6px; text-align: center; }

/* =============================================
   RESET MODAL
============================================= */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9800;
    background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-box {
    background: linear-gradient(180deg, #1c0a0a, #100505);
    border: 1px solid rgba(255,69,0,.3);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center; max-width: 320px; width: 100%;
    box-shadow: 0 0 40px rgba(255,69,0,.2);
    animation: modalPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop { from { transform: scale(.85); opacity: 0; } }
.modal-emoji  { font-size: 46px; margin-bottom: 12px; }
.modal-title  { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.modal-desc   { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 22px; }
.modal-btns   { display: flex; gap: 10px; }
.modal-btn-cancel {
    flex: 1; padding: 13px;
    background: rgba(255,255,255,.07);
    border: 1px solid var(--border);
    border-radius: 12px; color: var(--text-dim);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.modal-btn-confirm {
    flex: 1; padding: 13px;
    background: linear-gradient(135deg, #c41010, #FF1744);
    border: none; border-radius: 12px; color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,23,68,.35);
}
.modal-btn-cancel:active  { transform: scale(.96); }
.modal-btn-confirm:active { transform: scale(.96); }

/* =============================================
   GAME APP
============================================= */
#app {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    background: radial-gradient(ellipse at 50% 0%, #1c0e18 0%, #0a080e 70%);
    overflow: hidden;
    z-index: 1;
}

/* Starfield */
#stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.star  {
    position: absolute; border-radius: 50%; background: #fff;
    animation: twinkle var(--td,2s) ease-in-out infinite;
    animation-delay: var(--delay,0s);
}
@keyframes twinkle { 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }

/* TOP BAR */
#top-bar {
    position: relative; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px 6px;
    background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 100%);
}
.stat { display: flex; flex-direction: column; align-items: center; min-width: 72px; }
.stat-lbl { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1px; }
.stat-val  { font-size: 20px; font-weight: 700; color: var(--gold); text-shadow: 0 0 12px rgba(255,215,0,.55); transition: transform .12s; }
.stat-val.pop { transform: scale(1.4); }
.stat-val.gems-val { color: var(--gem); text-shadow: 0 0 12px rgba(0,212,255,.5); }
.lvl-badge { background: linear-gradient(135deg,#FF4500,#FFD700); border-radius: 20px; padding: 5px 14px; font-size: 14px; font-weight: 700; box-shadow: 0 0 18px rgba(255,100,0,.45); }

/* EVENT BANNER */
#event-banner { position: relative; z-index: 10; min-height: 28px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; padding: 4px 10px; transition: opacity .3s; opacity: 0; pointer-events: none; }
#event-banner.show { opacity: 1; }
#event-banner.ev-golden   { color:var(--gold);  background:linear-gradient(90deg,transparent,rgba(255,215,0,.22),transparent); animation:bannerPulse .6s ease-in-out infinite alternate; }
#event-banner.ev-crystal  { color:var(--gem);   background:linear-gradient(90deg,transparent,rgba(0,212,255,.22),transparent); animation:bannerPulse .6s ease-in-out infinite alternate; }
#event-banner.ev-treasure { color:#FF9800;      background:linear-gradient(90deg,transparent,rgba(255,150,0,.22),transparent); animation:bannerPulse .6s ease-in-out infinite alternate; }
@keyframes bannerPulse { from{text-shadow:none;} to{text-shadow:0 0 14px currentColor;} }

/* GAME AREA */
#game-area { flex:1; position:relative; z-index:5; overflow:hidden; }
#eflash { position:absolute; inset:0; background:radial-gradient(circle at 50% 75%,rgba(255,100,0,.5),transparent 60%); pointer-events:none; opacity:0; z-index:1; }
#eflash.active { animation:flashAnim .45s ease-out forwards; }
@keyframes flashAnim { 0%{opacity:1;} 100%{opacity:0;} }

/* VOLCANO */
#volcano-wrap { position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; cursor:pointer; z-index:3; }
#volcano-wrap.shake { animation:vShake .35s ease-in-out; }
@keyframes vShake {
    0%,100%{ transform:translateX(-50%) rotate(0); }
    20%    { transform:translateX(calc(-50% - 6px)) rotate(-2.5deg); }
    40%    { transform:translateX(calc(-50% + 6px)) rotate(2.5deg); }
    60%    { transform:translateX(calc(-50% - 3px)) rotate(-1.5deg); }
    80%    { transform:translateX(calc(-50% + 3px)) rotate(1.5deg); }
}
.v-mountain { position:relative; width:200px; height:130px; }
.v-body { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:0; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:130px solid var(--vc,#6B3A2A); transition:border-bottom-color 1s,filter .8s; filter:drop-shadow(0 0 18px rgba(255,69,0,.35)); }
.v-shadow { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:180px; height:20px; background:rgba(0,0,0,.4); border-radius:50%; filter:blur(8px); }
.v-crater { position:absolute; top:0; left:50%; transform:translateX(-50%); width:68px; height:24px; background:var(--cc,#1e0d0d); border-radius:50%; overflow:hidden; z-index:4; }
.v-lava { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:48px; height:18px; background:radial-gradient(ellipse,#FF4500 30%,#FF8C00); border-radius:50%; animation:lavaFlicker 1.2s ease-in-out infinite alternate; }
@keyframes lavaFlicker { from{box-shadow:0 0 8px #FF4500;opacity:.75;} to{box-shadow:0 0 22px #FF4500,0 0 40px rgba(255,69,0,.4);opacity:1;} }
.v-smoke { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:rgba(110,110,110,.35); animation:smokePuff var(--sd,2.2s) ease-out infinite; animation-delay:var(--sdelay,0s); pointer-events:none; z-index:2; }
@keyframes smokePuff { 0%{opacity:.5;transform:translateX(calc(-50% + var(--sx,0px))) scale(1);bottom:calc(100% + 10px);} 100%{opacity:0;transform:translateX(calc(-50% + var(--sx,0px) + var(--smx,10px))) scale(3.5);bottom:calc(100% + 70px);} }
.v-island { width:250px; height:32px; background:radial-gradient(ellipse,#3d7a3a 20%,#1e4a1e); border-radius:50%; box-shadow:0 8px 30px rgba(0,0,0,.5); }

/* FLYING OBJECTS */
.fobj { position:absolute; font-size:34px; z-index:10; cursor:pointer; will-change:transform,opacity; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.fobj.do-tap  { animation:tapPop .28s ease-out forwards; }
.fobj.do-miss { animation:missFade .35s ease-out forwards; }
@keyframes tapPop   { 0%{transform:scale(1.6);opacity:1;} 100%{transform:scale(0);opacity:0;} }
@keyframes missFade { to{transform:scale(.4) translateY(15px);opacity:0;} }
.chest-bar  { position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:32px; height:5px; background:rgba(0,0,0,.55); border-radius:3px; overflow:hidden; }
.chest-fill { height:100%; background:linear-gradient(90deg,var(--gold),#FF8C00); width:0%; transition:width .18s; }

/* SCORE POPUPS */
#floats { position:absolute; inset:0; pointer-events:none; z-index:20; }
.fpop   { position:absolute; font-weight:700; font-size:21px; pointer-events:none; text-shadow:0 2px 5px rgba(0,0,0,.8); animation:floatRise .85s ease-out forwards; white-space:nowrap; }
@keyframes floatRise { 0%{transform:translateY(0) scale(1);opacity:1;} 100%{transform:translateY(-72px) scale(.75);opacity:0;} }

/* XP BAR */
#xp-track { height:4px; width:100%; background:rgba(255,255,255,.08); position:relative; z-index:10; }
#xp-fill  { height:100%; background:linear-gradient(90deg,var(--orange),var(--gold)); box-shadow:0 0 8px rgba(255,100,0,.7); transition:width .5s ease; }

/* BOTTOM BAR */
#bottom-bar { position:relative; z-index:10; display:flex; gap:8px; padding:10px 12px; padding-bottom:max(10px,env(safe-area-inset-bottom)); background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,transparent 100%); }
.mbtn       { flex:1; padding:13px 4px; border:none; border-radius:16px; font-size:13px; font-weight:700; cursor:pointer; transition:transform .15s; }
.mbtn:active{ transform:scale(.95); }
.mbtn-up    { background:linear-gradient(135deg,#c43700,#FF6B35); color:#fff; box-shadow:0 4px 18px rgba(255,69,0,.38); }
.mbtn-col   { background:linear-gradient(135deg,#1a0a5e,#6B1FA2); color:#fff; box-shadow:0 4px 18px rgba(107,31,162,.38); }
.mbtn-guide { background:linear-gradient(135deg,#0a4a2a,#1a8a4a); color:#fff; box-shadow:0 4px 18px rgba(0,150,80,.35); }

/* BACK BUTTON (top-left in game) */
.game-back-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 18px;
    padding: 5px 9px;
    cursor: pointer;
    transition: background .2s, transform .15s;
    line-height: 1;
}
.game-back-btn:active { background: rgba(255,100,0,.2); transform: scale(.92); }

/* GUIDE PANEL */
.guide-section-title {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-dim); padding: 14px 4px 8px;
}
.guide-section-title:first-child { padding-top: 4px; }

.guide-obj-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 8px;
}
.guide-obj-emoji { font-size: 34px; min-width: 42px; text-align: center; }
.guide-obj-info  { flex: 1; }
.guide-obj-name  { font-size: 14px; font-weight: 700; }
.guide-obj-desc  { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.4; }
.guide-obj-reward {
    font-size: 15px; font-weight: 700;
    min-width: 60px; text-align: right;
    white-space: nowrap;
}
.reward-coin    { color: var(--gold); }
.reward-gem     { color: var(--gem); }
.reward-danger  { color: var(--danger); }
.reward-special { color: #FF9800; }

.guide-tip-box {
    background: rgba(255,215,0,.07);
    border: 1px solid rgba(255,215,0,.2);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 8px;
    font-size: 12px; color: rgba(255,255,255,.7);
    line-height: 1.6;
}
.guide-tip-box b { color: var(--gold); }

/* PANELS */
#overlay { position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:99; opacity:0; pointer-events:none; transition:opacity .28s; }
#overlay.on { opacity:1; pointer-events:all; }
.panel { position:fixed; bottom:0; left:0; right:0; max-height:82vh; background:linear-gradient(180deg,#180a0a,#0d0505); border-top:2px solid var(--orange); border-radius:22px 22px 0 0; z-index:100; transform:translateY(102%); transition:transform .3s cubic-bezier(.34,1.4,.64,1); overflow:hidden; box-shadow:0 -12px 48px rgba(255,69,0,.28); }
.panel.open { transform:translateY(0); }
.phdr { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid rgba(255,100,0,.18); }
.ptitle { font-size:18px; font-weight:700; color:var(--orange); }
.pclose { font-size:22px; cursor:pointer; color:var(--text-dim); padding:5px; }
.pbody  { overflow-y:auto; padding:14px; max-height:calc(82vh - 60px); overscroll-behavior:contain; padding-bottom:max(14px,env(safe-area-inset-bottom)); }

/* UPGRADES */
.upg-item { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:10px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; cursor:pointer; transition:background .2s,transform .15s; }
.upg-item:active { background:rgba(255,100,0,.1); transform:scale(.98); }
.upg-item.maxed  { opacity:.55; cursor:default; }
.upg-icon  { font-size:32px; min-width:40px; text-align:center; }
.upg-info  { flex:1; }
.upg-name  { font-size:14px; font-weight:700; }
.upg-desc  { font-size:11px; color:var(--text-dim); margin-top:2px; }
.upg-bar   { height:4px; background:rgba(255,255,255,.1); border-radius:2px; margin-top:6px; overflow:hidden; }
.upg-bfill { height:100%; background:linear-gradient(90deg,var(--orange),var(--gold)); border-radius:2px; transition:width .3s; }
.upg-cost  { font-size:13px; font-weight:700; color:var(--gold); text-align:right; min-width:68px; }
.upg-cost.cant-afford { color:#666; }

/* COLLECTION */
.col-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.col-card  { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:16px 10px 12px; text-align:center; transition:all .28s; }
.col-card.found { background:rgba(255,215,0,.1); border-color:rgba(255,215,0,.38); }
.col-emoji { font-size:38px; display:block; margin-bottom:6px; filter:grayscale(1) brightness(.5); transition:filter .3s; }
.col-card.found .col-emoji { filter:grayscale(0) brightness(1); }
.col-name  { font-size:11px; color:var(--text-dim); }
.col-check { font-size:16px; margin-top:5px; opacity:0; transition:opacity .3s; }
.col-card.found .col-check { opacity:1; }

/* LEVEL UP TOAST */
#lvlup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:linear-gradient(135deg,#FF4500,#FFD700); border-radius:22px; padding:20px 36px; text-align:center; z-index:200; font-size:22px; font-weight:700; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.45); box-shadow:0 0 50px rgba(255,100,0,.55); transition:transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
#lvlup.show { transform:translate(-50%,-50%) scale(1); }
#lvlup .lvlup-sub { font-size:14px; font-weight:400; margin-top:4px; opacity:.85; }

/* SCREEN SHAKE */
@keyframes dangerShake { 0%,100%{transform:translate(0,0);} 20%{transform:translate(-6px,3px);} 40%{transform:translate(6px,-3px);} 60%{transform:translate(-4px,4px);} 80%{transform:translate(4px,-2px);} }
#app.danger { animation:dangerShake .4s ease-in-out; }

/* VOLCANO THEMES */
.vt-basic   .v-body { --vc:#6B3A2A; }
.vt-large   .v-body { --vc:#4a2010; }
.vt-crystal .v-body { --vc:#2a4a7a; filter:drop-shadow(0 0 22px rgba(0,150,255,.6)); }
.vt-golden  .v-body { --vc:#7a5a08; filter:drop-shadow(0 0 22px rgba(255,215,0,.6)); }
.vt-space   .v-body { --vc:#3a1060; filter:drop-shadow(0 0 26px rgba(160,0,255,.7)); }
.vt-crystal .v-lava { background:radial-gradient(ellipse,#00D4FF 30%,#0040CC); }
.vt-golden  .v-lava { background:radial-gradient(ellipse,#FFD700 30%,#FF8C00); }
.vt-space   .v-lava { background:radial-gradient(ellipse,#E040FB 30%,#6200EA); }