/* Shared app shell for Coilaway & Cubelix: splash, home roadmap, shop, profile, settings,
   journey event, out-of-hearts, win card. Fonts are bundled (SIL OFL) so the app works offline. */
@font-face { font-family: 'Lilita'; src: url('fonts/lilita-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --sh-blue: #5263f0; --sh-blue-d: #3a48cf; --sh-blue-l: #7c8bff; --sh-navy: #2b3487;
  --sh-bg: #eef2ff; --sh-card: #ffffff; --sh-ink: #232850; --sh-muted: #6c7299;
  --sh-green: #33c14f; --sh-green-d: #23963a; --sh-gold: #ffc531; --sh-gold-d: #e09b00; --sh-red: #ff4d5e;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
.sh * { box-sizing: border-box; }
.sh, .sh button, .sh input { font-family: 'Fredoka', ui-rounded, system-ui, sans-serif; }
.sh-title { font-family: 'Lilita', 'Fredoka', sans-serif; letter-spacing: .5px; }
.sh-screen { position: fixed; inset: 0; z-index: 50; display: none; overflow: hidden; }
.sh-screen.on { display: block; }
.sh-hide { display: none !important; }

/* ---------- buttons ---------- */
.sh-btn { appearance: none; border: 0; cursor: pointer; border-radius: 18px; padding: 13px 18px; font-weight: 700; font-size: 18px;
  color: #fff; background: var(--sh-green); box-shadow: 0 5px 0 var(--sh-green-d), inset 0 2px 0 rgba(255,255,255,.35); text-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: transform .08s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sh-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sh-green-d); }
.sh-btn.blue { background: var(--sh-blue); box-shadow: 0 5px 0 var(--sh-blue-d), inset 0 2px 0 rgba(255,255,255,.3); }
.sh-btn.gold { background: var(--sh-gold); color: #4a3400; text-shadow: none; box-shadow: 0 5px 0 var(--sh-gold-d), inset 0 2px 0 rgba(255,255,255,.45); }
.sh-btn.gray { background: #e3e7fb; color: var(--sh-blue); text-shadow: none; box-shadow: 0 5px 0 #c2c9ef; }
.sh-btn.red { background: var(--sh-red); box-shadow: 0 5px 0 #c92a3a; }
.sh-btn:disabled { filter: grayscale(.8); opacity: .6; }
.sh-x { position: absolute; top: -14px; right: -12px; width: 46px; height: 46px; border-radius: 50%; border: 4px solid #fff; background: var(--sh-red);
  color: #fff; font-size: 24px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; line-height: 1; }

/* coin */
.coin { display: inline-block; width: 1.15em; height: 1.15em; border-radius: 50%; vertical-align: -0.2em; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff6b8 0 12%, #ffd84a 13% 55%, #f0a500 56% 100%); box-shadow: inset 0 -2px 0 rgba(160,90,0,.35), 0 1px 0 rgba(0,0,0,.1); }
.coin::after { content: '★'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .62em; color: #c97a00; }

/* ---------- splash ---------- */
#shSplash { background: var(--splash-bg, radial-gradient(120% 80% at 50% 30%, #8fd3ff, #4f6cf0 60%, #3a2fb8)); display: none; align-items: center; justify-content: center; flex-direction: column; }
#shSplash.on { display: flex; }
#shSplash .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.10) 0 10deg, transparent 10deg 20deg); animation: shSpin 30s linear infinite; }
#shSplash .bubbles span { position: absolute; bottom: -40px; border-radius: 50%; background: rgba(255,255,255,.25); animation: shRise linear infinite; }
#shSplash .mascot { position: relative; width: min(64vw, 300px); animation: shBob 2.4s ease-in-out infinite; filter: drop-shadow(0 18px 18px rgba(20,20,80,.35)); }
#shSplash .mascot svg { width: 100%; height: auto; display: block; }
.sh-logo { position: relative; text-align: center; line-height: .86; margin-top: 4px; animation: shPop .7s cubic-bezier(.2,1.6,.4,1) both .15s; }
.sh-logo .l { font-family: 'Lilita', sans-serif; font-size: min(19vw, 92px); display: block; color: #fff; -webkit-text-stroke: 3px rgba(0,0,0,.0);
  background: linear-gradient(180deg, var(--logo-a, #fff7a8) 0%, var(--logo-b, #ffb02e) 70%, var(--logo-c, #ff7a1a) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 var(--logo-edge, #b4430a)) drop-shadow(0 7px 0 rgba(30,20,90,.55)) drop-shadow(0 12px 14px rgba(0,0,0,.25)); }
.sh-logo .l + .l { font-size: min(15vw, 74px); --logo-a: #e9fbff; --logo-b: #8fe3ff; --logo-c: #4aa8ff; --logo-edge: #1b4fb8; margin-top: 2px; }
.sh-tag { position: relative; margin-top: 14px; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.2); animation: shFade .6s ease both .6s; }
.sh-load { position: relative; width: min(64vw, 260px); height: 16px; border-radius: 10px; background: rgba(0,0,0,.22); margin-top: 26px; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.25); animation: shFade .4s ease both .5s; }
.sh-load i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: linear-gradient(180deg, #a6ff8a, #36c96a); box-shadow: inset 0 2px 0 rgba(255,255,255,.5); transition: width .25s; }
.sh-credit { position: absolute; bottom: calc(18px + var(--safe-b)); color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; letter-spacing: 1px; }
@keyframes shSpin { to { transform: rotate(360deg); } }
@keyframes shBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes shPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shRise { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(-115vh); opacity: 0; } }

/* ---------- home ---------- */
#shHome { background: linear-gradient(180deg, #f3f5ff, #e6ebff); }
#shHome .glow { position: absolute; left: 50%; top: 0; bottom: 0; width: 46%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(160,215,255,.55), transparent); pointer-events: none; }
.sh-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + var(--safe-t)) 14px 0; display: flex; align-items: center; gap: 10px; z-index: 3; }
.sh-sq { width: 50px; height: 50px; border-radius: 13px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 26px; background: #b9bfd6; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); color: #fff; }
.sh-sq.av { background: #fff; border: 4px solid #ff2bb3; font-size: 30px; padding: 0; }
.sh-pill { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 6px; border-radius: 20px; background: rgba(60,70,120,.35); color: #fff; font-weight: 700; font-size: 19px; cursor: pointer; border: 0; }
.sh-pill .coin { font-size: 30px; margin-left: -4px; }
.sh-pill .plus { width: 20px; height: 20px; border-radius: 50%; background: var(--sh-green); font-size: 15px; display: flex; align-items: center; justify-content: center; margin-left: 2px; }
.sh-event { position: absolute; left: 14px; right: 14px; top: calc(72px + var(--safe-t)); z-index: 3; height: 66px; border-radius: 16px; background: var(--sh-blue); box-shadow: 0 5px 0 var(--sh-navy);
  display: flex; align-items: center; padding: 0 14px 0 8px; gap: 10px; cursor: pointer; border: 3px solid #2f3a96; }
.sh-event .badge { width: 46px; height: 46px; flex: none; border-radius: 12px; background: linear-gradient(180deg, #d8f6ff, #8cc8ff); display: flex; align-items: center; justify-content: center; font-size: 26px; transform: rotate(-8deg); box-shadow: 0 3px 0 #3d5fc9; }
.sh-event .bar { flex: 1; height: 22px; border-radius: 12px; background: #9aa6ff; position: relative; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); border: 2px solid #ffc531; }
.sh-event .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffe066, #ffb300); border-radius: 10px; }
.sh-event .bar b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.sh-event .timer { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: #3a48cf; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; border: 2px solid #ffc531; white-space: nowrap; }
.sh-side { position: absolute; left: 10px; top: calc(160px + var(--safe-t)); z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.sh-side button { width: 74px; border: 0; background: none; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; }
.sh-side .ic { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; background: radial-gradient(circle at 40% 30%, #fff, #ffd9de); box-shadow: 0 4px 10px rgba(0,0,0,.15); position: relative; }
.sh-side .ic.chest { border-radius: 14px; background: radial-gradient(circle at 40% 30%, #fff8d6, #ffd36b); }
.sh-side .ic .dot { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--sh-red); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.sh-side .lb { margin-top: -6px; background: var(--sh-blue); color: #fff; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 2px 8px; position: relative; }

.sh-map { position: absolute; left: 0; right: 0; top: calc(150px + var(--safe-t)); bottom: calc(178px + var(--safe-b)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; z-index: 2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 30px), transparent); }
.sh-path { position: relative; padding: 50px 0 40px; display: flex; flex-direction: column-reverse; align-items: center; }
.sh-node { position: relative; height: 112px; width: 100%; display: flex; justify-content: center; }
.sh-node::before { content: ''; position: absolute; left: 50%; bottom: 50%; height: 112px; width: 9px; margin-left: -4px; background: #707a9f; border-radius: 4px; z-index: 0; }
.sh-node.done::before { background: #7fd3ff; box-shadow: 0 0 10px #9fe0ff; }
.sh-node:last-child::before { display: none; }
.sh-tile { position: relative; z-index: 1; width: 86px; height: 86px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer;
  font-family: 'Lilita', sans-serif; font-size: 34px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); border: 0;
  background: linear-gradient(180deg, var(--tl), var(--tc) 55%, var(--td)); box-shadow: 0 7px 0 var(--td), inset 0 3px 0 rgba(255,255,255,.45), 0 10px 16px rgba(40,50,120,.18); transform: translateX(var(--dx, 0)); }
.sh-tile.locked { filter: saturate(.3) brightness(1.12); color: #f6f7ff; }
.sh-tile.cur { width: 100px; height: 100px; font-size: 40px; outline: 5px solid #ffc531; outline-offset: 4px; animation: shPulse 1.4s ease-in-out infinite; }
.sh-tile .tier { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-family: 'Fredoka', sans-serif; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--td); padding: 1px 8px; border-radius: 8px; text-shadow: none; }
.sh-tile .hearts { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 13px; white-space: nowrap; letter-spacing: -1px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.sh-tile .lock { position: absolute; top: -10px; right: -10px; font-size: 20px; }
@keyframes shPulse { 0%,100% { box-shadow: 0 7px 0 var(--td), inset 0 3px 0 rgba(255,255,255,.45), 0 0 0 0 rgba(255,197,49,.6); } 50% { box-shadow: 0 7px 0 var(--td), inset 0 3px 0 rgba(255,255,255,.45), 0 0 0 16px rgba(255,197,49,0); } }
.sh-legend { position: absolute; left: 0; right: 0; bottom: calc(168px + var(--safe-b)); display: flex; justify-content: center; gap: 6px; z-index: 3; flex-wrap: wrap; padding: 0 12px; pointer-events: none; }
.sh-legend span { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 8px; }
.sh-play { position: absolute; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%); z-index: 4; width: min(76vw, 300px); height: 76px; flex-direction: column; gap: 0;
  border-radius: 22px; font-family: 'Lilita', sans-serif; font-size: 40px; line-height: 1; border: 4px solid #ffb700; }
.sh-play small { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: #fff36b; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.sh-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(78px + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; z-index: 60; background: #4f58b8; }
.sh-nav button { flex: 1; border: 0; background: #5a63c4; margin: 0 1px; border-radius: 14px 14px 0 0; color: #dfe3ff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: 'Lilita', sans-serif; font-size: 15px; letter-spacing: .5px; }
.sh-nav button .i { font-size: 30px; filter: saturate(.6); opacity: .75; }
.sh-nav button.on { background: var(--sh-blue); color: #fff; transform: translateY(-8px); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 10px rgba(0,0,0,.15); }
.sh-nav button.on .i { opacity: 1; filter: none; transform: scale(1.15); }

/* ---------- shop ---------- */
#shShop { background: linear-gradient(180deg, #6f86ff, #5a6ff0); }
#shShop .awn { position: absolute; left: 0; right: 0; top: 0; height: calc(64px + var(--safe-t)); z-index: 2;
  background: repeating-linear-gradient(90deg, #e7ecff 0 50px, #b4c0ff 50px 100px); }
#shShop .awn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 24px; background: radial-gradient(circle at 25px 0, #e7ecff 24px, transparent 25px) 0 0 / 100px 24px repeat-x, radial-gradient(circle at 75px 0, #b4c0ff 24px, transparent 25px) 0 0 / 100px 24px repeat-x; }
#shShop .sh-pill { position: absolute; right: 14px; top: calc(14px + var(--safe-t)); z-index: 3; background: rgba(60,70,140,.55); }
.sh-shoplist { position: absolute; left: 0; right: 0; top: calc(96px + var(--safe-t)); bottom: calc(78px + var(--safe-b)); overflow-y: auto; padding: 4px 16px 30px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.sh-pack { position: relative; border-radius: 22px; padding: 12px; margin-bottom: 18px; border: 4px solid #ffcf6b; background: var(--pk, #4a5be0); box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.sh-pack .win { background: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; min-height: 96px; gap: 8px; }
.sh-pack .art { font-size: 54px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
.sh-pack .gets { display: flex; gap: 8px; background: var(--pk2, #e9e1ff); border-radius: 14px; padding: 8px 10px; font-size: 26px; font-weight: 700; color: #333; }
.sh-pack .gets span { display: flex; align-items: flex-end; } .sh-pack .gets small { font-size: 13px; margin-left: 1px; }
.sh-pack .row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sh-pack .name { flex: 1; font-family: 'Lilita', sans-serif; font-size: 23px; color: var(--pkn, #ff7a2b); background: var(--pkb, #ffe4a8); border-radius: 0 20px 20px 0; padding: 6px 12px; margin-left: -16px; letter-spacing: .5px; }
.sh-pack .price { min-width: 112px; font-size: 17px; padding: 10px 12px; }
.sh-pack .note { color: #fff; font-size: 12px; text-align: center; margin-top: 6px; font-weight: 600; }
.sh-pack .ribbon { position: absolute; top: -14px; right: 12px; background: var(--sh-red); color: #fff; font-family: 'Lilita', sans-serif; font-size: 18px; padding: 3px 12px; border-radius: 6px; box-shadow: 0 3px 0 #b51d2c; }
.sh-coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.sh-coins .c { border-radius: 16px; background: #4a5be0; border: 3px solid #ffcf6b; padding: 7px; display: flex; flex-direction: column; gap: 7px; }
.sh-coins .c .w { background: #fff; border-radius: 10px; height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Lilita', sans-serif; font-size: 20px; color: #ffb300; -webkit-text-stroke: 1px #9a6a00; }
.sh-coins .c .w .coin { font-size: 34px; }
.sh-coins .c .sh-btn { font-size: 14px; padding: 8px 4px; border-radius: 12px; }
.sh-h { color: #fff; font-family: 'Lilita', sans-serif; font-size: 22px; margin: 8px 2px 10px; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.sh-boost { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.sh-boost .ic { font-size: 34px; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(180deg, #7c8bff, var(--sh-blue)); display: flex; align-items: center; justify-content: center; }
.sh-boost .t { flex: 1; font-weight: 700; color: var(--sh-ink); } .sh-boost .t small { display: block; color: var(--sh-muted); font-weight: 600; font-size: 13px; }
.sh-boost .sh-btn { font-size: 16px; padding: 9px 12px; min-width: 104px; }
.sh-demo { color: #fff; background: rgba(0,0,0,.18); border-radius: 12px; padding: 8px 10px; font-size: 12px; font-weight: 600; text-align: center; margin-bottom: 14px; }

/* ---------- locked tab ---------- */
#shSoon { background: linear-gradient(180deg, #f3f5ff, #e6ebff); }
#shSoon .in { position: absolute; inset: 0 0 calc(78px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--sh-muted); }
#shSoon .big { font-size: 80px; } #shSoon h2 { color: var(--sh-blue); margin: 8px 0; font-family: 'Lilita', sans-serif; font-size: 30px; font-weight: 400; }

/* ---------- modals ---------- */
.sh-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(20,22,40,.6); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sh-modal.on { opacity: 1; pointer-events: auto; }
.sh-panel { position: relative; width: min(390px, 100%); max-height: calc(100% - 20px); display: flex; flex-direction: column; background: var(--sh-blue); border-radius: 26px; padding: 8px; border: 4px solid #3846c9;
  box-shadow: 0 8px 0 #2b3487, 0 30px 60px rgba(0,0,0,.35); transform: scale(.9); transition: transform .25s cubic-bezier(.2,1.5,.4,1); }
.sh-modal.on .sh-panel { transform: none; }
.sh-panel > h2 { margin: 6px 0 10px; text-align: center; color: #fff; font-family: 'Lilita', sans-serif; font-weight: 400; font-size: 32px; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.sh-body { background: #f6f7ff; border-radius: 18px; padding: 16px; overflow-y: auto; color: var(--sh-ink); }
.sh-body p { color: var(--sh-muted); text-align: center; margin: 8px 0 14px; line-height: 1.4; font-weight: 600; }
.sh-stack { display: flex; flex-direction: column; gap: 14px; }
.sh-stack .sh-btn { width: 100%; }
.sh-tg { display: flex; align-items: center; gap: 12px; padding: 10px 6px; color: #fff; font-family: 'Lilita', sans-serif; font-size: 22px; letter-spacing: 1px; }
.sh-tg .i { width: 40px; font-size: 26px; text-align: center; }
.sh-tg label { flex: 1; }
.sh-sw { width: 66px; height: 34px; border-radius: 20px; background: #4250d6; border: 3px solid #fff; position: relative; cursor: pointer; }
.sh-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .2s; }
.sh-sw.on { background: var(--sh-green); } .sh-sw.on::after { left: 35px; }
.sh-tgbox { background: #9aa2ec; border-radius: 16px; padding: 6px 12px; margin-bottom: 14px; }
.sh-link { display: block; text-align: center; color: #5d63a6; font-weight: 700; font-size: 17px; text-decoration: underline; margin: 10px 0; cursor: pointer; background: none; border: 0; width: 100%; }
.sh-ver { text-align: center; color: #a7acd0; font-size: 12px; margin-top: 10px; font-weight: 600; }
.sh-prof { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sh-prof .av { width: 78px; height: 78px; flex: none; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 46px; border: 5px solid var(--frame, #ff2bb3); }
.sh-prof input { flex: 1; min-width: 0; height: 50px; border-radius: 14px; border: 0; font-size: 22px; font-weight: 700; padding: 0 12px; color: var(--sh-ink); text-align: center; }
.sh-tabs { display: flex; gap: 6px; } .sh-tabs button { flex: 1; border: 0; border-radius: 14px 14px 0 0; padding: 10px; font-family: 'Lilita', sans-serif; font-size: 20px; letter-spacing: 1px; background: #4c58c7; color: #aab3ff; cursor: pointer; }
.sh-tabs button.on { background: #5be0ff; color: #2b3487; }
.sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: #fff; border-radius: 0 0 16px 16px; padding: 14px; max-height: 44vh; overflow-y: auto; }
.sh-grid button { aspect-ratio: 1; border-radius: 16px; border: 3px solid #e3e6f5; background: #fff; font-size: 44px; cursor: pointer; position: relative; box-shadow: 0 4px 0 #dfe2f2; }
.sh-grid button.sel::after { content: '✓'; position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--sh-blue); color: #fff; font-size: 17px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; }
.sh-jhead { background: var(--sh-blue); color: #fff; text-align: center; padding: 6px 0 12px; }
.sh-jlist { background: linear-gradient(180deg, #6f7ff5, #5a69ea); border-radius: 18px; padding: 14px 12px; overflow-y: auto; max-height: 52vh; display: flex; flex-direction: column-reverse; gap: 12px; }
.sh-jrow { display: flex; align-items: center; gap: 14px; }
.sh-jrow .n { width: 52px; height: 52px; flex: none; border-radius: 12px; background: #7380ff; color: #fff; font-family: 'Lilita', sans-serif; font-size: 26px; display: flex; align-items: center; justify-content: center; border: 3px solid #c8ceff; }
.sh-jrow.got .n { background: var(--sh-green); border-color: #ffd34d; }
.sh-jrow .r { flex: 1; height: 72px; border-radius: 14px; background: #fff; border: 4px solid #3846c9; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 32px; font-weight: 700; position: relative; color: #444; }
.sh-jrow .r small { font-size: 16px; }
.sh-jrow .r .st { position: absolute; top: -10px; left: -10px; font-size: 20px; }
.sh-jrow .r .sh-btn { position: absolute; right: 8px; font-size: 14px; padding: 6px 10px; }
.sh-hearts-big { font-size: 46px; text-align: center; letter-spacing: 4px; margin: 4px 0; }
.sh-reward { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 26px; color: #c98300; margin: 6px 0 14px; }
.sh-reward .coin { font-size: 32px; }
.sh-winart { display: flex; justify-content: center; margin: -6px 0 4px; }
.sh-winart svg { width: min(62vw, 230px); height: auto; }
.sh-ad { position: fixed; inset: 0; z-index: 95; background: #111; color: #fff; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; text-align: center; padding: 30px; }
.sh-ad.on { display: flex; }
.sh-ad .count { font-family: 'Lilita', sans-serif; font-size: 64px; }
.sh-toast { position: fixed; left: 50%; top: calc(80px + var(--safe-t)); transform: translateX(-50%) translateY(-10px); z-index: 99; background: rgba(35,40,80,.92); color: #fff; padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; opacity: 0; transition: .25s; pointer-events: none; text-align: center; max-width: 88vw; }
.sh-toast.on { opacity: 1; transform: translateX(-50%); }