/* Puff Putt v007 layer: ocean loader/splash, Home mode cards, set picker, Versus, Endless HUD, new popups, press/focus polish.
   Loaded after app.css + polish.css so it only refines; nothing here changes layout of the play field. */
:root { --deep: #160d42; --sea0: #2fb3dc; --sea1: #1a78b8; --sea2: #1d4592; --sea3: #241f6e; --pearl: #f4ecff; --glass2: linear-gradient(180deg, rgba(56, 40, 128, .74), rgba(22, 14, 64, .82)); }
html, body { background-color: var(--edge, #160d42); }

/* ---------- LOADER: twilight lagoon (the iOS launch image is rendered from this exact frame) ---------- */
#loader { background:
  radial-gradient(90% 38% at 50% -6%, rgba(190, 245, 255, .75), rgba(190, 245, 255, 0) 70%),
  radial-gradient(70% 30% at 50% 102%, rgba(255, 140, 190, .35), rgba(255, 140, 190, 0) 70%),
  linear-gradient(180deg, #2fb3dc 0%, #1a78b8 20%, #1d4592 44%, #241f6e 70%, #160d42 100%); }
#loader .ld-sky { display: none; }
.ld-sea { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ld-sea .ray { position: absolute; top: -10%; height: 90%; width: 18%; background: linear-gradient(180deg, rgba(255, 255, 240, .26), rgba(255, 255, 240, 0)); transform-origin: 50% 0; filter: blur(2px); animation: raySway 9s ease-in-out infinite; }
.ld-sea .r1 { left: 14%; transform: skewX(-16deg); } .ld-sea .r2 { left: 46%; width: 12%; transform: skewX(-12deg); animation-delay: -3s; opacity: .8; } .ld-sea .r3 { left: 70%; width: 22%; transform: skewX(-18deg); animation-delay: -6s; opacity: .7; }
@keyframes raySway { 50% { opacity: .55; translate: 12px 0; } }
.ld-sea .bub { position: absolute; bottom: -30px; width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, .7); background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .8) 0 18%, rgba(255, 255, 255, .06) 22%); animation: bubUp linear infinite; }
.ld-sea .b1 { left: 12%; animation-duration: 9s; } .ld-sea .b2 { left: 26%; width: 8px; height: 8px; animation-duration: 7s; animation-delay: -3s; } .ld-sea .b3 { left: 78%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: -5s; }
.ld-sea .b4 { left: 88%; width: 9px; height: 9px; animation-duration: 8s; animation-delay: -1s; } .ld-sea .b5 { left: 60%; width: 6px; height: 6px; animation-duration: 6s; animation-delay: -2s; } .ld-sea .b6 { left: 40%; width: 11px; height: 11px; animation-duration: 10s; animation-delay: -7s; }
@keyframes bubUp { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(10px, -50vh); } 100% { transform: translate(-6px, -105vh); opacity: 0; } }
.ld-sea .reef { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120c18-30 40-34 56-12 8-34 34-44 52-18 14-22 40-24 54 2 20-36 52-34 66-4 14-20 40-22 54 0 16-28 44-30 60-6 20-18 44-14 58 8V200H0z' fill='%232a1f78' opacity='.75'/%3E%3Cpath d='M0 150c30-18 52-10 70 6 22-26 52-28 72-6 20-18 52-20 70 2 26-22 60-22 82 0 22-16 50-16 70 2 14-8 26-8 36 0V200H0z' fill='%231b1252'/%3E%3Cg fill='none' stroke='%23ff7fb0' stroke-width='5' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M44 156c-4-22 6-34 0-56M44 128l-14-12M44 118l12-14'/%3E%3Cpath d='M330 158c4-20-4-32 2-50M332 132l14-12M332 120l-12-12'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.ld-pad { background: linear-gradient(#ffe9f2, #ff9cc2 58%, #e45a8c); box-shadow: 0 8px 0 rgba(20, 8, 60, .35), 0 16px 26px rgba(10, 4, 40, .35); }
.ld-glow { background: radial-gradient(closest-side, rgba(170, 245, 255, .7), rgba(90, 200, 255, .26) 48%, rgba(90, 200, 255, 0) 72%); }
/* tap-to-inflate: --inf goes 0..1 with each tap (main.js) and drains slowly; individual `scale` composes with the hop/breathe animations */
.ld-puff { --inf: 0; }
.ld-puff .ld-body { scale: calc(1 + var(--inf) * .5); transition: scale .22s cubic-bezier(.3, 1.7, .5, 1), opacity .25s; }
.ld-puff .ld-shadow { scale: calc(1 + var(--inf) * .35) 1; transition: scale .22s; }
.ld-puff.max .ld-body { animation: maxWobble .4s ease-in-out; }
@keyframes maxWobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.ld-sub { margin: 10px 0 0; font: 800 13px/1 var(--body); letter-spacing: .03em; color: rgba(255, 243, 224, .62); opacity: 0; transition: opacity .4s .3s; }
.ld-puff.awake ~ .ld-sub { opacity: 1; }
.ld-prompt { background: rgba(14, 10, 52, .42); }
html.splash-shot .ld-foot, html.splash-shot .ld-prompt, html.splash-shot .ld-sub, html.splash-shot .ld-zzz, html.splash-shot .bub { visibility: hidden !important; }
html.splash-shot *, html.splash-shot *::before, html.splash-shot *::after { animation-play-state: paused !important; animation-delay: -1.2s !important; transition: none !important; }

/* ---------- press + focus polish everywhere ---------- */
.btn, .mode-card, .round-btn, .icon-btn, .lvl, .dcard, .setchip, .wtab, .seg button { transition: transform .14s var(--ease, ease), filter .14s, box-shadow .14s; }
.btn:active, .mode-card:active, .round-btn:active, .icon-btn:active, .lvl:active:not(.locked), .dcard:active, .setchip:active, .seg button:active { transform: translateY(2px) scale(.975); filter: brightness(1.06); }
:focus-visible { outline: 3px solid rgba(255, 214, 122, .9); outline-offset: 3px; } /* v030: no longer forces border-radius:14px (it reshaped 18px buttons on focus); see v030.css */
button:focus:not(:focus-visible) { outline: none; }

/* ---------- HOME ---------- */
.pearl-pill { min-width: 0; height: 36px; padding: 0 12px 0 8px; font-size: 17px; margin-right: 4px; }
.pearl-pill svg { width: 20px; height: 20px; color: #e9dcff; filter: drop-shadow(0 0 5px rgba(240, 220, 255, .7)); }
.play-card { justify-content: center; gap: 14px; }
.play-card .pc-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.play-card .pc-text b { font: 400 30px/1 var(--display); letter-spacing: .01em; }
.play-card .pc-text small { font: 800 13px/1 var(--body); opacity: .82; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-card { position: relative; display: flex; align-items: center; gap: 10px; height: 68px; padding: 0 12px; border-radius: 22px; text-align: left; color: #fff3e0; overflow: hidden;
  background: var(--glass2); border: 1.5px solid var(--glass-line, rgba(255, 243, 224, .2)); box-shadow: 0 5px 0 rgba(8, 4, 40, .5), 0 12px 24px rgba(6, 2, 28, .3), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mode-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, 0) 60%); background-size: 260% 100%; animation: sheen 5.5s ease-in-out infinite; pointer-events: none; }
.mc-versus::after { animation-delay: 2.7s; }
@keyframes sheen { 0%, 70% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.mode-card .mc-ico { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.mode-card .mc-ico svg { width: 24px; height: 24px; }
.mc-endless { background: linear-gradient(180deg, rgba(47, 179, 220, .55), rgba(29, 69, 146, .75)); border-color: rgba(160, 235, 255, .45); }
.mc-endless .mc-ico { background: linear-gradient(180deg, #a8f0ff, #2fb3dc); color: #0b3060; }
.mc-versus { background: linear-gradient(180deg, rgba(255, 127, 166, .48), rgba(120, 40, 120, .72)); border-color: rgba(255, 190, 215, .45); }
.mc-versus .mc-ico { background: linear-gradient(180deg, #ffd0e0, #ff7fa6); color: #5a1040; }
.mode-card .mc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mode-card .mc-text b { font: 400 18px/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.mode-card .mc-text small { font: 800 11.5px/1.15 var(--body); color: rgba(255, 243, 224, .78); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-actions { gap: 16px; }
.home-actions .btn-daily { height: 62px; }
@media (max-height: 760px) { .home-actions { gap: 16px; } .home-actions .btn-daily { height: 56px; } .mode-card { height: 60px; } .home-actions .btn-ghost { height: 40px; } .play-card .pc-text b { font-size: 27px; } }
@media (max-height: 680px) { .hero-spacer { min-height: 70px !important; } .home-hero { padding-top: calc(var(--sat) + 40px) !important; } .home-actions .btn-xl { height: 58px; } }

/* ---------- COURSES: set picker ---------- */
.set-bar { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 70px); z-index: 3; display: flex; gap: 8px; padding: 4px calc(var(--sar) + 20px) 2px calc(var(--sal) + 20px); overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.set-bar::-webkit-scrollbar { display: none; }
.setchip { flex: none; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 14px; border-radius: 16px; background: var(--glass2); border: 1.5px solid var(--glass-line, rgba(255, 243, 224, .2)); color: #fff3e0; text-align: left; }
.setchip b { font: 400 15px/1 var(--display); } .setchip small { font: 800 11px/1 var(--body); color: rgba(255, 243, 224, .7); white-space: nowrap; }
.setchip.sel { background: linear-gradient(180deg, #ffe08a, #ffab4f 55%, #ff7a3d); color: #3a1d10; border-color: rgba(255, 255, 255, .7); box-shadow: 0 4px 0 rgba(150, 60, 20, .45); } .setchip.sel small { color: rgba(58, 29, 16, .75); }
.setchip.locked { opacity: .55; padding-right: 30px; } .setchip .wt-lock { position: absolute; right: 9px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; }
#levels .world-tabs { top: calc(var(--sat) + 118px); }
#levels .scroll.with-tabs { top: calc(var(--sat) + 176px); }
@media (max-height: 700px) { .set-bar { top: calc(var(--sat) + 60px); } #levels .world-tabs { top: calc(var(--sat) + 104px); } #levels .scroll.with-tabs { top: calc(var(--sat) + 156px); } }
.world.ocean .w-art { opacity: 1; }

/* ---------- GAME HUD ---------- */
.hud-chips { display: flex; justify-content: center; gap: 8px; min-height: 0; margin-top: 2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: 99px; background: rgba(14, 8, 48, .5); border: 1px solid rgba(255, 243, 224, .22); color: #fff3e0; font: 400 15px/1 var(--display); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(6, 2, 28, .25); }
.chip[hidden] { display: none; }
.pearl-chip svg { width: 17px; height: 17px; color: #efe4ff; filter: drop-shadow(0 0 4px rgba(240, 225, 255, .8)); }
.pearl-chip.bump { animation: chipPop .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes chipPop { 40% { transform: scale(1.25); } }
.player-chip { padding-left: 10px; } .player-chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, #ff7fa6); box-shadow: 0 0 8px var(--pc, #ff7fa6); }
#game[data-mode="endless"] .pip { color: #8ff0ff; }
#game[data-mode="endless"] .pip:not(.on) { opacity: .22; }

/* ---------- RESULT / popups ---------- */
.i-inline.pearl { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; color: #efe4ff; }
.rs-badge.unlock { color: #ffd27a; font-size: 15px; animation: unlockGlow 1.6s ease-in-out infinite; }
@keyframes unlockGlow { 50% { text-shadow: 0 0 14px rgba(255, 210, 122, .8); } }
.go-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.go-stats div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: 18px; background: rgba(10, 4, 40, .32); border: 1px solid rgba(255, 243, 224, .14); }
.go-stats b { font: 400 30px/1 var(--display); color: #fff3e0; } .go-stats small { font: 800 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 243, 224, .62); }
.go-stats div:first-child b { color: #8ff0ff; }
#goBadge.best { color: #ffd27a; }
.vs-modal { gap: 12px; }
.vs-title { margin: 0; text-align: center; font: 400 30px/1.05 var(--display); color: var(--pc, #fff3e0); text-shadow: 0 3px 0 rgba(10, 4, 40, .4); }
.vs-sub { margin: 0; text-align: center; font: 700 14px/1.35 var(--body); color: rgba(255, 243, 224, .78); }
.vs-board { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 18px; background: rgba(10, 4, 40, .3); border: 1px solid rgba(255, 243, 224, .12); }
.vb-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 30px) 44px; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px; font: 400 16px/1 var(--display); color: #fff3e0; text-align: center; }
.vb-row > span:first-child { text-align: left; } .vb-row b { font-weight: 400; color: #ffd27a; font-size: 18px; }
.vb-head { font: 800 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 243, 224, .55); padding-top: 0; padding-bottom: 0; }
.vb-row.hl { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px var(--pc); }
.vb-n { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dotc { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pc, #fff); box-shadow: 0 0 8px var(--pc, #fff); display: inline-block; }
.vb-par { margin: 2px 0 0; text-align: center; font: 800 11px/1 var(--body); letter-spacing: .06em; color: rgba(255, 243, 224, .5); text-transform: uppercase; }
.chart-modal { align-items: center; text-align: center; gap: 10px; }
.chart-modal h2 { margin: 0; font: 400 26px/1.1 var(--display); color: #fff3e0; }
.chart-modal p { margin: 0; font: 400 17px/1 var(--display); color: #8ff0ff; } .chart-modal small { font: 700 13px/1.35 var(--body); color: rgba(255, 243, 224, .65); max-width: 260px; }
.chart-anim { position: relative; width: 70px; height: 70px; }
.chart-anim i { position: absolute; left: 50%; bottom: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid rgba(160, 240, 255, .9); animation: chartBub 1.6s ease-in infinite; }
.chart-anim i:nth-child(2) { animation-delay: .5s; width: 11px; height: 11px; margin-left: 2px; } .chart-anim i:nth-child(3) { animation-delay: 1s; width: 8px; height: 8px; margin-left: -14px; }
@keyframes chartBub { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-62px) scale(1.1); opacity: 0; } }

/* ---------- VERSUS screen ---------- */
#versus .scroll { display: flex; flex-direction: column; gap: 16px; align-items: stretch; max-width: 460px; margin: 0 auto; padding-left: calc(var(--sal) + 20px); padding-right: calc(var(--sar) + 20px); }
.vs-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 26px; background: var(--glass2); border: 1.5px solid var(--glass-line, rgba(255, 243, 224, .2)); box-shadow: 0 14px 34px rgba(6, 2, 28, .35), inset 0 1px 0 rgba(255, 255, 255, .12); color: #fff3e0; }
.vs-card header { display: flex; align-items: center; gap: 12px; }
.vs-card h3 { margin: 0 0 4px; font: 400 22px/1 var(--display); } .vs-card header small { font: 700 13px/1.3 var(--body); color: rgba(255, 243, 224, .72); }
.vs-ico { width: 46px; height: 46px; flex: none; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(180deg, #ffd0e0, #ff7fa6); color: #5a1040; }
.vs-card.online .vs-ico { background: linear-gradient(180deg, #a8f0ff, #2fb3dc); color: #0b3060; }
.seg { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(10, 4, 40, .35); }
.seg button { height: 38px; border-radius: 12px; font: 400 16px/1 var(--display); color: rgba(255, 243, 224, .75); }
.seg button.sel { background: linear-gradient(180deg, #ffe08a, #ffab4f 55%, #ff7a3d); color: #3a1d10; box-shadow: 0 3px 0 rgba(150, 60, 20, .45); }
.vs-names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vs-name { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 14px; background: rgba(10, 4, 40, .35); border: 1.5px solid rgba(255, 243, 224, .14); }
.vs-name:focus-within { border-color: var(--pc); }
.vs-name input, .vs-field input, .vs-join input { -webkit-user-select: text; user-select: text; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #fff3e0; font: 800 16px/1 var(--body); }
.vs-field { display: flex; flex-direction: column; gap: 6px; } .vs-field span { font: 800 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 243, 224, .6); }
.vs-field input { height: 46px; padding: 0 14px; border-radius: 14px; background: rgba(10, 4, 40, .35); border: 1.5px solid rgba(255, 243, 224, .14); }
.vs-join { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .vs-join[hidden] { display: none; }
.vs-join input { height: 56px; padding: 0 16px; border-radius: 18px; background: rgba(10, 4, 40, .35); border: 1.5px solid rgba(255, 243, 224, .14); font: 400 24px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; }
.vs-join .btn { padding: 0 22px; }
.vs-lobby { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; } .vs-lobby[hidden] { display: none; }
.vs-code-l { margin: 0; font: 800 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 243, 224, .6); }
.vs-code { margin: 0; font: 400 52px/1 var(--display); letter-spacing: .18em; color: #8ff0ff; text-shadow: 0 0 22px rgba(143, 240, 255, .5); }
.vs-peers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .peer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(10, 4, 40, .35); font: 800 13px/1 var(--body); }
.vs-status { margin: 0; font: 700 14px/1.3 var(--body); color: rgba(255, 243, 224, .78); text-align: center; }
.vs-lobby .btn { width: 100%; } .vs-lobby-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
#versus .foot-note { text-align: center; }

html.reduce-motion .ld-sea .bub, html.reduce-motion .ld-sea .ray, html.reduce-motion .mode-card::after, html.reduce-motion .chart-anim i { animation: none; }
@media (prefers-reduced-motion: reduce) { .ld-sea .bub, .ld-sea .ray, .mode-card::after { animation: none; } }
@media (max-width: 400px) { .mode-card { gap: 7px; padding: 0 9px; } .mode-card .mc-ico { width: 30px; height: 30px; border-radius: 11px; } .mode-card .mc-ico svg { width: 19px; height: 19px; } .mode-card .mc-text b { font-size: 15.5px; } .mode-card .mc-text small { font-size: 10.5px; } }
/* v007 fix: on narrow phones (<=400px) keep Set 1 + the next (locked) set fully on screen without horizontal clipping */
@media (max-width: 400px) {
  .set-bar { gap: 6px; padding-left: calc(var(--sal) + 12px); padding-right: calc(var(--sar) + 12px); }
  .setchip { padding: 6px 10px; border-radius: 14px; }
  .setchip.locked { padding-right: 24px; } .setchip .wt-lock { right: 7px; width: 12px; height: 12px; }
  .setchip b { font-size: 14px; } .setchip small { font-size: 10px; }
}