/* Coin Sort — game-specific styles (rides on playful.css) */

:root { --tube-glass:rgba(255,255,255,0.42); }

body.playful { touch-action:none; }

.gone { display:none !important; }

/* ---- difficulty start screen ---- */
.start-screen {
  position:fixed; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; gap:18px;
}
.game-title {
  font-family:'Astalamet', serif; font-size:52px; line-height:1;
  text-transform:uppercase; letter-spacing:-1px; text-align:center;
}
.game-title .title-accent { color:var(--pink); }

.difficulty-card {
  background:var(--card); border:5px solid var(--stroke); border-radius:24px;
  padding:30px 26px; width:100%; max-width:360px; text-align:center;
  box-shadow:0 8px 0 var(--stroke);
}
.difficulty-card h3 {
  font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:18px;
}
.diff-dots { display:flex; gap:9px; justify-content:center; align-items:center; min-height:40px; margin-bottom:14px; }
/* mini coin previews */
.diff-dot {
  width:34px; height:34px; border-radius:50%; border:3px solid var(--stroke);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:inset 0 4px 0 rgba(255,255,255,0.45), inset 0 -4px 0 rgba(0,0,0,0.14), 0 3px 0 var(--stroke);
  animation:dotPop 0.3s var(--bounce) both;
}
@keyframes dotPop { 0%{transform:scale(0);} 100%{transform:scale(1);} }
.difficulty-info h2 { font-size:30px; margin-bottom:4px; }
.difficulty-info p { font-size:14px; color:var(--muted); margin-bottom:22px; }

.diff-slider {
  -webkit-appearance:none; appearance:none; width:100%; height:24px; background:var(--wood);
  border:4px solid var(--stroke); border-radius:12px; outline:none; margin-bottom:26px;
}
.diff-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:32px; height:32px; border-radius:50%;
  background:var(--blue); border:4px solid var(--stroke); cursor:pointer; box-shadow:0 4px 0 var(--stroke);
}
.diff-slider::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%; background:var(--blue); border:4px solid var(--stroke); cursor:pointer;
}
.home-btn { max-width:360px; }

.board-wrapper { flex:1; display:flex; justify-content:center; align-items:center; width:100%; }

.game-board {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:22px; width:100%;
}

/* ---- coin tube (a slot that holds a stack of coins) ---- */
.coin-slot {
  display:flex; flex-direction:column-reverse; align-items:center; justify-content:flex-start;
  height:266px; width:64px; position:relative; cursor:pointer;
  padding-bottom:12px; gap:5px;
}
/* the glass tube the coins drop into */
.coin-slot::before {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:62px; height:100%; z-index:0;
  border:4px solid var(--stroke); border-radius:32px 32px 14px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.10), var(--tube-glass));
  box-shadow:inset 0 -8px 0 rgba(0,0,0,0.07), inset 5px 0 8px rgba(255,255,255,0.4);
}
/* little tray foot under the tube */
.coin-slot::after {
  content:''; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  width:74px; height:14px; z-index:0;
  background:var(--wood-deep); border:4px solid var(--stroke); border-radius:7px;
  box-shadow:0 4px 0 var(--stroke);
}
.coin-slot.bump::before { animation:tubeBump 0.32s ease; }
@keyframes tubeBump {
  0%,100%{ transform:translateX(-50%); }
  30%{ transform:translateX(-58%) rotate(-2deg); }
  65%{ transform:translateX(-42%) rotate(2deg); }
}

/* ---- the coin ---- */
.coin {
  width:50px; height:50px; border-radius:50%; position:relative; z-index:3;
  border:4px solid var(--stroke);
  display:flex; align-items:center; justify-content:center;
  font-size:23px; line-height:1; user-select:none;
  transition:transform 0.18s var(--bounce);
  /* metallic face: bright top sheen + darker bottom, plus thickness shadow */
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,0.55),
    inset 0 -6px 0 rgba(0,0,0,0.20),
    inset 0 0 0 3px rgba(255,255,255,0.18),
    0 3px 0 var(--stroke);
}
/* reeded coin rim — little ticks around the edge */
.coin::before {
  content:''; position:absolute; inset:-1px; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(0,0,0,0.16) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%, #000 100%);
          mask:radial-gradient(circle, transparent 60%, #000 62%, #000 100%);
  opacity:0.5;
}
/* inner stamped disc */
.coin::after {
  content:''; position:absolute; inset:7px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(0,0,0,0.18);
  box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.18);
}
.coin .coin-ico {
  position:relative; z-index:1;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

/* held coin lifts out of the tube and idly hovers (no spin) */
.coin.selected {
  z-index:50;
  animation:coinHeld 0.85s ease-in-out infinite;
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,0.55),
    inset 0 -6px 0 rgba(0,0,0,0.20),
    0 16px 12px -8px rgba(0,0,0,0.30);
}
@keyframes coinHeld {
  0%,100% { transform:translateY(-26px) scale(1.02); }
  50%     { transform:translateY(-34px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .coin.selected { animation:none; transform:translateY(-26px); }
}

/* pop-palette coin tints (color also set inline in JS; this is the fallback) */
.coin-0 { background:radial-gradient(circle at 50% 35%, #ff8cc6, #FF5DAA); }
.coin-1 { background:radial-gradient(circle at 50% 35%, #7ad8ff, #3DC2FF); }
.coin-2 { background:radial-gradient(circle at 50% 35%, #93f3ad, #5EE882); }
.coin-3 { background:radial-gradient(circle at 50% 35%, #ffe27a, #FFD43B); }
.coin-4 { background:radial-gradient(circle at 50% 35%, #c690fb, #A855F7); }
.coin-5 { background:radial-gradient(circle at 50% 35%, #ffb07a, #FF8A3D); }
.coin-6 { background:radial-gradient(circle at 50% 35%, #7fe6e6, #39CCCC); }
.coin-7 { background:radial-gradient(circle at 50% 35%, #f76edf, #F012BE); }