/* Base styles */
:root{
  --bg1:#701b29;
  --bg2:#8b2333;
  --text:#e5e7eb;
  --label-color:#e5e7eb; /* segment label color */
  --muted:#cbd5e1;
  --radius:18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
background:
  radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,.22), transparent 60%),
  linear-gradient(160deg, #f0ead6 0%, #e2dcc2 22%, #a45560 70%, #8b2333 100%);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

#offlineToast, #infoToast{
  position: fixed;
  left:50%;
  transform: translateX(-50%) translateY(-120%);
  background: rgba(2,6,23,.92);
  color: #f3f4f6;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 999px;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .25s ease;
}
#offlineToast{ top: calc(8px + var(--safe-top)); }
#infoToast{ top: calc(44px + var(--safe-top)); }
.show{ transform: translateX(-50%) translateY(0); }
.hidden{ display:none; }

.app-header{
  position: sticky; top:0; z-index: 50; padding-top: var(--safe-top);

}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px 8px; }
.logo{ height: 48px; width:auto; object-fit: contain; display:block; }
.lang-switch{ display:inline-flex; gap:6px; background: rgba(255,255,255,.06); padding:4px; border-radius:999px; }
.lang-btn{ border:0; padding:6px 10px; border-radius:999px; color:var(--text); background: transparent; font-weight:600; letter-spacing:.2px; }
.lang-btn[aria-pressed="true"]{ background: rgba(255,255,255,.14); }

.app-main{ flex:1; display:flex; flex-direction:column; align-items:center; padding:18px 16px; gap:18px; margin-top: 40px;}
.title{ font-size: clamp(18px, 3.6vw, 22px); text-align:center; margin:4px 0 6px; }

.gauge-wrap{ width:min(520px, 100%); margin: 8px auto 0; }
.gauge{ width:100%; aspect-ratio: 1.6 / 1; }

/* Emoji row */
.emoji-wrap{ width:min(500px, 100%); }
.emoji-row{ display:flex; justify-content:space-between; gap:5px; margin-top:8px; }
.emoji-option{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  /* Removed inner white ring; keep only drop shadow */
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  font-size: 30px;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
  user-select:none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
}
.emoji-option:hover{ transform: translateY(-1px) scale(1.03); }
.emoji-option:active{ transform: scale(0.98); }
.emoji-option[data-active="true"]{
  background: rgba(255,255,255,.16);
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}
.emoji-option input{ position:absolute; inset:0; opacity:0; pointer-events:none; }

/* Ensure no outline during focus/active */
.emoji-option:focus,
.emoji-option:focus-visible,
.emoji-option:active,
.emoji-option input:focus{
  outline: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.emoji-group {
  border: none !important;
  outline: none !important;
  padding: 0;
  margin: 0;
}

/* SVG segments with gaps and hover effects */
svg{ width:100%; height:100%; }
.seg{ transition: transform .14s ease, filter .2s ease; transform-box: fill-box; transform-origin: center; }
.seg:hover{ transform: translateY(-1px) scale(1.02); filter: brightness(1.06); }
.seg.selected{ filter: brightness(1.12) drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

.segment{ cursor: pointer; }
.segment-label{ font-size: clamp(10px, 2.7vw, 13px); font-weight:700; fill: var(--label-color); }

/* Ripple for SVG clicks */
.ripple{
  fill: rgba(255,255,255,.5);
  opacity: .35;
  transition: r .5s ease, opacity .5s ease;
  pointer-events: none;
}

.needle{ pointer-events:none; }
.pivot{ fill: #111827; stroke: #94a3b8; stroke-width:2; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

button, .lang-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .seg, .emoji-option{ transition: none !important; }
}