* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 35px 18px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #f1f1ef;
  color: #242424;
  font-family: Arial, Helvetica, sans-serif;
}

button { font-family: inherit; }
button:disabled { opacity: 0.6; cursor: wait; }
.hidden { display: none !important; }

/* APP */

.app {
  width: 100%;
  max-width: 980px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.07);
}

/* HEADER */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 34px;
  border-bottom: 1px solid #ededed;
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.brand-logo {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #242424;
  color: #f1f1f1;
  border-radius: 14px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
}

.brand-logo span:first-child {
  font-family: Georgia, serif;
  font-size: 32px;
  transform: translateX(4px);
}

.brand-logo span:last-child {
  font-family: Georgia, serif;
  font-size: 21px;
  transform: translate(-2px, 11px);
}

.brand-text h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.6px;
}

.brand-text p {
  margin: 5px 0 0;
  color: #888;
  font-size: 13px;
}

/* BUTTON */

.action-button {
  width: 102px;
  height: 53px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  background: #242424;
  color: white;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.action-button:hover:not(:disabled) {
  background: #111;
  transform: translateY(-2px);
}

.action-button:active:not(:disabled) {
  transform: scale(0.96);
}

/* MODE SWITCH */

.mode-section {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.mode-switch {
  display: flex;
  padding: 4px;
  background: #ededed;
  border-radius: 12px;
}

.mode-button {
  width: 104px;
  height: 40px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #777;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.mode-button.active {
  background: #fff;
  color: #222;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
}

/* GAME AREA */

.game-area {
  min-height: 340px;
  padding: 30px 20px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(
    ellipse at 50% 75%,
    #fafaf9 0%,
    #fff 70%
  );
}

.game-label {
  margin-bottom: 34px;
  color: #777;
  font-size: 14px;
  font-weight: 700;
}

/* DICE */

.dice-area { width: 100%; }

.dice-container {
  width: 100%;
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 32px;
}

.die {
  width: 95px;
  height: 95px;
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #fff, #e6e6e6);
  border: 1px solid #d8d8d8;
  border-radius: 19px;
  box-shadow:
    0 13px 18px rgba(0, 0, 0, 0.14),
    inset 3px 3px 7px rgba(255, 255, 255, 0.95),
    inset -4px -4px 8px rgba(0, 0, 0, 0.07);
  will-change: transform;
}

.pip {
  width: 17px;
  height: 17px;
  position: absolute;
  background: #242424;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tl { top: 25%; left: 25%; }
.tc { top: 25%; left: 50%; }
.tr { top: 25%; left: 75%; }
.ml { top: 50%; left: 25%; }
.mc { top: 50%; left: 50%; }
.mr { top: 50%; left: 75%; }
.bl { top: 75%; left: 25%; }
.bc { top: 75%; left: 50%; }
.br { top: 75%; left: 75%; }

.die.tornado-1,
.die.tornado-2,
.die.tornado-3,
.die.tornado-4 {
  animation: diceSpin 1s ease-out;
}

@keyframes diceSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(720deg); }
}

/* TOTAL */

.total-area {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.total-area span {
  color: #888;
  font-size: 14px;
}

.total-display {
  min-width: 60px;
  padding: 10px 15px;
  border: 2px solid #333;
  border-radius: 10px;
  text-align: center;
  font-size: 25px;
  font-weight: 800;
}

/* COIN AREA */

.coin-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coin-scene {
  width: 220px;
  height: 180px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  perspective: 900px;
}

.coin-shadow {
  position: absolute;
  bottom: 0;
  width: 125px;
  height: 27px;
  background: rgba(0, 0, 0, 0.16);
  border-radius: 50%;
  filter: blur(14px);
}

/* SILVER QUARTER */

.coin {
  width: 140px;
  height: 140px;
  position: relative;
  border-radius: 50%;
  transform-style: preserve-3d;
  transform: rotateX(58deg);
  will-change: transform;
}

/*
  METALLIC SIDE WALL — HEADS SIDE

  This is the original wall, sitting 5px behind the coin's middle.
  From the heads side it peeks out below the face and looks like
  the coin's thickness.

  CHANGES:
  - preserve-3d lets the mirrored wall below (::before) live in the
    same 3D space as the rest of the coin.
  - backface-visibility: hidden means this wall is ONLY seen from
    the heads side, so it can't mess up the tails view.
*/

.coin-edge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    #666,
    #e7e7e7 28%,
    #858585 55%,
    #d7d7d7 78%,
    #555
  );
  box-shadow:
    0 0 0 2px #737373,
    0 0 0 5px #b9b9b9,
    0 0 0 7px #777;
  transform: translateZ(-5px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/*
  METALLIC SIDE WALL — TAILS SIDE (NEW)

  An exact mirror copy of the wall above. It sits 5px on the OTHER
  side of the coin's middle and faces the other way, so from the
  tails side it peeks out below the tails face exactly like the
  heads wall does. It is hidden when viewing heads.

  (-10px is relative to .coin-edge, which is already at -5px, so the
  final position is +5px.)
*/

.coin-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    #666,
    #e7e7e7 28%,
    #858585 55%,
    #d7d7d7 78%,
    #555
  );
  box-shadow:
    0 0 0 2px #737373,
    0 0 0 5px #b9b9b9,
    0 0 0 7px #777;
  transform: rotateX(180deg) translateZ(-10px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/*
  RIDGED RIM RINGS

  Both rings are identical in size and design.
  Each one is hidden from the opposite side, so the heads ring
  can no longer show up as "teeth" under the tails side.
*/

.coin::after,
.coin::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    #777 0deg 1.5deg,
    #e1e1e1 1.5deg 3deg,
    #777 3deg 4.5deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 7px),
    #000 calc(100% - 6px)
  );

  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 7px),
    #000 calc(100% - 6px)
  );

  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Heads-side ridges (same position as before) */

.coin::after {
  transform: translateZ(5px);
}

/* Tails-side ridges: exact mirror of the heads-side ridges */

.coin::before {
  transform: rotateX(180deg) translateZ(5px);
}

/* COIN FACES — SAME DESIGN ON BOTH */

.coin-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #818181;
  background: radial-gradient(
    circle at 30% 22%,
    #fff 0%,
    #f1f1f1 15%,
    #c5c5c5 43%,
    #e6e6e6 65%,
    #999 100%
  );
  box-shadow:
    inset 0 0 0 2px #f5f5f5,
    inset 0 0 0 5px #aaa,
    inset 0 0 15px rgba(0, 0, 0, 0.18);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.coin-face::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(95, 95, 95, 0.5);
  border-radius: 50%;
  box-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.9),
    inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.coin-heads {
  transform: translateZ(6px);
}

.coin-tails {
  transform: rotateX(180deg) translateZ(6px);
}

/* CROWN AND SPADE */

.coin-symbol {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 76px;
  line-height: 1;
  color: #8a8a8a;
  text-shadow:
    1px 2px 1px #f9f9f9,
    -1px -1px 1px #555,
    0 3px 4px rgba(0, 0, 0, 0.13);
  user-select: none;
}

.coin-tails .coin-symbol {
  font-size: 79px;
}

/* ORIGINAL FLIP ANIMATION */

.coin.flip-heads {
  animation: coinFlipHeads 1.2s linear forwards;
}

.coin.flip-tails {
  animation: coinFlipTails 1.2s linear forwards;
}

@keyframes coinFlipHeads {
  0% {
    transform: translateY(0) rotateX(58deg);
  }

  25% {
    transform: translateY(-60px) rotateX(238deg);
  }

  50% {
    transform: translateY(-85px) rotateX(418deg);
  }

  75% {
    transform: translateY(-60px) rotateX(598deg);
  }

  100% {
    transform: translateY(0) rotateX(778deg);
  }
}

@keyframes coinFlipTails {
  0% {
    transform: translateY(0) rotateX(58deg);
  }

  20% {
    transform: translateY(-52px) rotateX(238deg);
  }

  40% {
    transform: translateY(-80px) rotateX(418deg);
  }

  60% {
    transform: translateY(-80px) rotateX(598deg);
  }

  80% {
    transform: translateY(-52px) rotateX(778deg);
  }

  100% {
    transform: translateY(0) rotateX(958deg);
  }
}

.coin-result {
  margin-top: 23px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* DICE SETTINGS */

.settings {
  padding: 25px 30px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.setting-label {
  margin-bottom: 16px;
  color: #888;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.dice-options {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.dice-count {
  width: 60px;
  height: 47px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: white;
  color: #222;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.dice-count.active {
  background: #242424;
  color: white;
  border-color: #242424;
}

/* HISTORY */

.history-section {
  min-height: 150px;
  padding: 25px 34px;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #888;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

#clearHistory {
  border: none;
  background: transparent;
  color: #777;
  cursor: pointer;
}

.history {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #777;
  font-size: 14px;
}

.history-item {
  padding: 9px 13px;
  background: #f2f2f2;
  border-radius: 8px;
  color: #444;
}

/* FOOTER */

.footer {
  padding: 17px;
  border-top: 1px solid #f1f1f1;
  text-align: center;
  color: #aaa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.footer span {
  margin-left: 7px;
  font-size: 13px;
}

/* MOBILE */

@media (max-width: 650px) {
  body {
    padding: 12px 8px;
  }

  .header {
    padding: 18px;
    gap: 10px;
  }

  .brand {
    gap: 10px;
  }

  .brand-logo {
    width: 46px;
    height: 46px;
  }

  .brand-logo span:first-child {
    font-size: 27px;
  }

  .brand-logo span:last-child {
    font-size: 18px;
  }

  .brand-text h1 {
    font-size: 19px;
  }

  .brand-text p {
    font-size: 11px;
  }

  .action-button {
    width: 76px;
    height: 47px;
    font-size: 14px;
  }

  .game-area {
    min-height: 320px;
    padding: 30px 10px;
  }

  .dice-container {
    gap: 12px;
  }

  .die {
    width: 70px;
    height: 70px;
    border-radius: 15px;
  }

  .pip {
    width: 12px;
    height: 12px;
  }

  .settings {
    padding: 24px 15px;
  }

  .history-section {
    padding: 24px 20px;
  }
}

@media (max-width: 360px) {
  .dice-container {
    gap: 8px;
  }

  .die {
    width: 62px;
    height: 62px;
  }

  .pip {
    width: 11px;
    height: 11px;
  }
}