/* ===== MATERIAL POLISH ===== */
/* Depth, sheen and bevels on the game's pieces. Paint-only: nothing here changes a size,
   margin or position, so the layout is identical to the unpolished version. */

/* ----- Category tiles: raised glossy keys ----- */
.tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, var(--tile-yellow) 0%, var(--tile-orange) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 0 rgba(150,80,0,0.14),
    0 4px 0 var(--tile-shadow),
    0 7px 10px rgba(0,30,50,0.18);
}

.tile:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 0 rgba(150,80,0,0.14),
    0 5px 0 var(--tile-shadow),
    0 9px 13px rgba(0,30,50,0.2);
}

.tile:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 0 rgba(150,80,0,0.14),
    0 2px 0 var(--tile-shadow),
    0 3px 5px rgba(0,30,50,0.15);
}

/* ----- Score boxes: recessed frosted glass ----- */
.icebox {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, var(--ice-light) 0%, var(--ice-dark) 100%);
  box-shadow:
    inset 0 3px 0 var(--ice-shadow),
    inset 0 -1px 0 rgba(255,255,255,0.75),
    0 1px 0 rgba(255,255,255,0.22);
}

.icebox.committed {
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Committed scores flip into place like a departure board card */
.icebox.just-scored {
  animation: fxFlipCommit 0.85s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.vs-mode .bot-icebox.just-scored {
  animation: fxFlipCommitBot 0.85s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes fxFlipCommit {
  0%   { transform: perspective(260px) rotateX(-90deg); }
  45%  { transform: perspective(260px) rotateX(14deg) scale(1.12);
         box-shadow: inset 0 3px 0 var(--ice-shadow), 0 0 26px rgba(78,205,196,0.9), 0 0 50px rgba(78,205,196,0.45); }
  72%  { transform: perspective(260px) rotateX(-5deg) scale(1.03); }
  100% { transform: perspective(260px) rotateX(0deg) scale(1); }
}

@keyframes fxFlipCommitBot {
  0%   { transform: perspective(260px) rotateX(-90deg); }
  45%  { transform: perspective(260px) rotateX(14deg) scale(1.12);
         box-shadow: 0 0 26px rgba(255,107,107,0.9), 0 0 50px rgba(255,107,107,0.45); }
  72%  { transform: perspective(260px) rotateX(-5deg) scale(1.03); }
  100% { transform: perspective(260px) rotateX(0deg) scale(1); }
}

/* ----- Upper-section bonus: a ring that fills toward 63 ----- */
@property --bonus-p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.progress-circle {
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease, --bonus-p 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress-circle::before {
  content: '';
  position: absolute;
  inset: -3px; /* sits exactly over the circle's border, which stays as the track */
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(var(--tile-orange) calc(var(--bonus-p) * 1turn), rgba(0,0,0,0) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 3px rgba(240,160,32,0.55));
  opacity: clamp(0, calc(var(--bonus-p) * 60), 1); /* no seam speck at 0/63 */
  transition: opacity 0.3s ease;
}

.progress-circle.achieved::before {
  opacity: 0;
}

/* ----- Roll / Play ----- */
.btn-roll {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(0,20,40,0.03) 100%),
    linear-gradient(180deg, #ffffff 0%, #e8e8f0 100%);
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 rgba(0,20,40,0.05),
    0 6px 0 var(--btn-shadow),
    0 10px 16px rgba(0,30,50,0.18);
}

.btn-roll:hover {
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 rgba(0,20,40,0.05),
    0 7px 0 var(--btn-shadow),
    0 12px 18px rgba(0,30,50,0.2);
}

.btn-roll:active {
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 rgba(0,20,40,0.05),
    0 3px 0 var(--btn-shadow),
    0 5px 8px rgba(0,30,50,0.15);
}

.btn-play {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, var(--btn-purple) 0%, var(--btn-purple-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 0 rgba(80,50,90,0.4),
    0 10px 16px rgba(0,30,50,0.15);
}

.btn-play.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.04) 46%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 6px 0 #5b21b6,
    0 10px 18px rgba(91,33,182,0.35);
}

.btn-play:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 7px 0 rgba(80,50,90,0.4),
    0 12px 18px rgba(0,30,50,0.18);
}

.btn-play.active:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 7px 0 #5b21b6,
    0 12px 20px rgba(91,33,182,0.38);
}

.btn-play:active:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 3px 0 rgba(80,50,90,0.4),
    0 5px 8px rgba(0,30,50,0.15);
}

.btn-play.active:active:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 3px 0 #5b21b6,
    0 5px 10px rgba(91,33,182,0.3);
}

/* ----- Header buttons ----- */
.header-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 4px 0 var(--tile-shadow),
    0 6px 10px rgba(0,30,50,0.18);
}

.header-btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 2px 0 var(--tile-shadow),
    0 3px 5px rgba(0,30,50,0.15);
}

/* ----- Home screen menu ----- */
.home-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.06) 44%, rgba(255,255,255,0) 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.home-nav-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.06),
    0 4px 15px rgba(0,0,0,0.15);
}

@media (prefers-reduced-motion: reduce) {
  .icebox.just-scored,
  .vs-mode .bot-icebox.just-scored {
    animation: none;
  }
  .progress-circle {
    transition: none;
  }
}

/* ===== SCREEN TRANSITIONS (js/feel.js) ===== */
/* Leaving home zooms through it; coming back zooms out of it */
.home-screen {
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-screen.hidden {
  transform: scale(1.08);
}

/* The board assembles itself when a game starts */
.game-wrapper.fx-enter .header {
  animation: fxDropIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.game-wrapper.fx-enter .score-row,
.game-wrapper.fx-enter .bottom-section,
.game-wrapper.fx-enter .dice-section,
.game-wrapper.fx-enter .actions-section {
  animation: fxRiseIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.game-wrapper.fx-enter .score-row:nth-child(1) { animation-delay: 0.08s; }
.game-wrapper.fx-enter .score-row:nth-child(2) { animation-delay: 0.12s; }
.game-wrapper.fx-enter .score-row:nth-child(3) { animation-delay: 0.16s; }
.game-wrapper.fx-enter .score-row:nth-child(4) { animation-delay: 0.2s; }
.game-wrapper.fx-enter .score-row:nth-child(5) { animation-delay: 0.24s; }
.game-wrapper.fx-enter .score-row:nth-child(6) { animation-delay: 0.28s; }
.game-wrapper.fx-enter .bottom-section { animation-delay: 0.32s; }
.game-wrapper.fx-enter .dice-section { animation-delay: 0.38s; }
.game-wrapper.fx-enter .actions-section { animation-delay: 0.44s; }

@keyframes fxDropIn {
  from { opacity: 0; transform: translateY(-60%); }
  to   { opacity: 1; transform: none; }
}

@keyframes fxRiseIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-screen.hidden { transform: none; }
}