/* Tool stages, progress, persistent results and purposeful motion. */
.tool-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.85fr); gap: 24px; align-items: start; }
.play-surface { min-width: 0; position: relative; background: radial-gradient(ellipse at 50% 0%,#8b5cf60b,transparent 70%),var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.tool-side { min-width: 0; display: grid; gap: 18px; }
.tool-statebar { display: flex; align-items: center; gap: 9px; min-height: 28px; margin-bottom: 16px; color: var(--text-secondary); font-size: 12px; width: 100%; }
.state-indicator { width: 7px; height: 7px; flex-shrink: 0; background: #8c9ab3; border-radius: 50%; }
.state-symbol { margin-left: auto; color: #c4b5fd; font-size: 20px; line-height: 1; }
.is-running .state-indicator { width: 12px; height: 12px; border: 2px solid #bfa3ff40; border-top-color: #c4b5fd; background: none; animation: stateSpin .85s linear infinite; }
.is-running .state-copy { color: #d5c4fa; }.has-result .state-indicator { background: #8fd3b0; }
.tool-feedback { min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 22px; text-align: left; }
.feedback-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }.feedback-heading h3 { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.feedback-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #8b5cf61a; color: #c4b5fd; font-size: 16px; }
.feedback-label { font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.feedback-value { color: #e3d6ff; font-size: clamp(26px,3vw,38px); font-weight: 650; letter-spacing: -.7px; line-height: 1.4; margin: 10px 0; overflow-wrap: anywhere; }
.feedback-placeholder { font-size: 32px; color: #62708d; line-height: 1.5; margin: 12px 0; }
.feedback-detail { color: #bac5d8; font-size: 13px; line-height: 1.85; margin-top: 12px; overflow-wrap: anywhere; }
.feedback-tip { font-size: 12px; color: var(--text-secondary); line-height: 1.85; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.feedback-actions[hidden] { display: none; }
.result-copy, .result-again { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; color: #d9e0ed; background: #101727; font-size: 12px; line-height: 1.5; }
.result-again { background: #8b5cf61a; border-color: #695387; color: #e3d6ff; }.result-copy:hover, .result-again:hover { border-color: #bca2e5; }
.tool-feedback[data-phase="done"] { border-color: #65517d; }.tool-feedback[data-phase="done"] .feedback-content { animation: resultArrive .45s cubic-bezier(.2,.8,.2,1) both; }
.tool-feedback[data-tone="success"] .feedback-value { color: #a4dfc2; }.tool-feedback[data-tone="warning"] .feedback-value { color: #f0c197; }
.tool-feedback progress { appearance: none; width: 100%; height: 5px; display: block; border: 0; border-radius: 8px; background: #293249; margin-top: 18px; overflow: hidden; }
.tool-feedback progress::-webkit-progress-bar { background: #293249; }.tool-feedback progress::-webkit-progress-value { background: #ac91e5; border-radius: 8px; transition: width .25s; }.tool-feedback progress::-moz-progress-bar { background: #ac91e5; }
.result-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }.result-chips span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 5px 9px; font-size: 14px; border-radius: 8px; background: #252d43; color: #dce3ef; font-variant-numeric: tabular-nums; }
.tool-error { width: 100%; padding: 12px 14px; margin-top: 16px; border-radius: 10px; background: #f8b87c10; border: 1px solid #8f6644; color: #f3c69f; font-size: 13px; line-height: 1.7; }
.tool-error[hidden] { display: none; }[aria-invalid="true"] { border-color: #f3b795 !important; }
.page button:disabled { cursor: not-allowed; opacity: .55; }.page.is-running .btn-primary { opacity: 1; background: #59447e; color: #eee5ff; }
.result-detail { text-align: center; color: var(--text-secondary); font-size: 14px; line-height: 1.8; margin-top: 12px; overflow-wrap: anywhere; }
/* Wheel: a stable stage with a final pointer response. */
.wheel-stage { padding-top: 16px; }.wheel-stage .tool-statebar { margin-bottom: 0; }.wheel-stage .tool-feedback { margin-top: 18px; width: 100%; background: #101727; padding: 16px; }
.wheel-stage .tool-feedback[data-phase="ready"], .wheel-stage .tool-feedback[data-phase="running"] { display: none; }
.wheel-stage .feedback-heading, .wheel-stage .feedback-tip { display: none; }.wheel-stage .feedback-value { font-size: 26px; }
.is-running .wheel-pointer { animation: pointerTick .18s ease-in-out infinite; }.has-result .wheel-pointer { animation: pointerSettle .45s ease-out; }
.has-result .canvas-wrapper { filter: drop-shadow(0 0 12px #8b5cf620); }
/* Dice / coin: compact stages with a quiet landing platform. */
.play-surface .dice-container { height: 300px; border: 0; background: transparent; margin: 0; border-radius: 12px; }
.play-surface .coin-3d-container { height: 300px; }
.play-surface .dice-controls, .play-surface .coin-controls, .play-surface .bottle-controls { padding: 20px 0 0; text-align: center; }
.play-surface .btn-primary { min-width: 180px; max-width: 100%; }
.play-surface .hint { margin-top: 12px; }
.dice-demo { background: #101727; border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; }.dice-demo summary { cursor: pointer; font-size: 13px; color: #b7c2d6; min-height: 48px; padding: 14px 0; }
.dice-demo .dice-preset-panel { border: 0; padding: 0 0 18px; background: transparent; }.dice-demo .dice-preset-title { display: none; }.dice-preset-buttons { gap: 6px; }.dice-preset-btn { padding: 8px 12px; }
.dice-count { background: #151c2e; padding: 3px; border-radius: 12px; border: 1px solid var(--line); }.dice-count button { background: #232c40; border: 0; border-radius: 8px; color: #ded7ee; }
/* Numbers: reveal the batch together, with a bounded cascade. */
.play-surface .random-result { min-height: 252px; margin: 0; padding: 20px 0; gap: 10px; background: transparent; align-content: center; }
.number-empty { max-width: 250px; color: #8e9ab1; font-size: 15px; line-height: 1.9; text-align: center; }
.random-number { min-width: 64px; padding: 12px 16px; border-radius: 12px; font-variant-numeric: tabular-nums; font-size: 26px; animation: numberArrive .45s ease both; }
.random-number.is-revealing { color: #8c81a7; }.random-number.is-revealed { border-color: #9b7cc3; color: #e7dbff; }
.random-config { padding: 20px; margin: 0; }.config-group label { font-size: 13px; min-width: 70px; }.config-group input[type="number"] { width: 100%; flex: 1 1 100px; }
.random-controls { padding: 16px 0 0; }
/* Cards: paper edges and a clean reveal without exposing hidden values. */
.play-surface .cards-container { max-width: 600px; padding: 8px 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.card { border: 0; background: none; border-radius: 14px; padding: 0; font: inherit; color: inherit; }
.card-front, .card-back { inset: 0; }
.card:focus-visible { outline: 2px solid #d1b6f5; outline-offset: 5px; }
.card-front { background: repeating-linear-gradient(45deg,#ffffff04 0 1px,transparent 1px 9px),linear-gradient(145deg,#3c3057,#221d35); border: 1px solid #796492; border-radius: 14px; font-size: 34px; }
.card-front::before { content: '◇'; font-size: 95px; color: #c1a6ec; opacity: .12; }
.card-front::after { content: ''; position: absolute; inset: 8px; border: 1px solid #c1a6ec30; border-radius: 9px; }
.card-back { border-radius: 14px; background: #24273e; font-size: 32px; color: #e6d8ff; box-shadow: inset 0 0 0 5px #c1a6ec08; }
.card-back .card-order { color: #b4bdd0; font-size: 12px; }.card-wrapper { animation: dealCard .38s ease both; animation-delay: var(--deal-delay,0ms); }
.card-count button, #reset-bomb-btn { background: #302641; color: #e3d6ff; border: 1px solid #645177; border-radius: 9px; min-height: 44px; padding: 9px 14px; font-size: 13px; }
/* Bomb: game tension stays on the board, never shakes the entire app. */
.play-surface .bomb-grid { width: 100%; max-width: 500px; padding: 8px 0; gap: 12px; }
.bomb-cell { width: 100%; border: 1px solid #45405b; border-radius: 12px; background: linear-gradient(150deg,#252b40,#191f30); color: #abb4c8; font: 500 26px var(--font-body); box-shadow: inset 0 1px 0 #ffffff06; }
.bomb-cell:hover:not(:disabled) { border-color: #a48ac9; transform: translateY(-2px); }.bomb-cell::before { display: none; }
.bomb-cell.revealed { background: #163a31; color: #94d5b6; border-color: #386252; box-shadow: none; animation: safeReveal .3s ease; }
.bomb-cell.bomb { background: #4e2635; border-color: #be7388; box-shadow: 0 0 0 3px #b7687e12; animation: bombReveal .45s ease; }
.bomb-cell.bomb-defused { background: #282a3b; color: #bec6d6; opacity: 1; box-shadow: none; }
.bomb-cell:disabled { opacity: 1; cursor: default; }.bomb-cell.auto-revealed { opacity: .4; }
.bomb-grid.bomb-tension .bomb-cell:not(.revealed):not(.bomb) { animation: tensionPulse 1.4s ease-in-out infinite; border-color: #8f6c4d; }
/* Bottle: space for names, with a single winning marker. */
.play-surface .bottle-container { width: min(270px,calc(86.2% - 55px)); margin-top: 54px; margin-bottom: 48px; }
.player-marker { border-radius: 12px; background: #29273e; width: 52px; height: 44px; font-size: 11px; }
.player-marker.selected { background: #493864; color: #f2eaff; border-color: #bda0e6; box-shadow: 0 0 0 5px #bda0e612; animation: winnerMark .5s ease; }
.bottle-players { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }.player-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); }.player-name { padding: 11px; font-size: 14px; }.player-actions { flex-wrap: wrap; }.player-actions .btn { font-size: 12px; padding: 10px; }
/* 8 ball: soft orbital light, then a legible answer. */
.play-surface .magic8ball-container { padding: 0; }.magic8ball-instruction { margin: 0; }.magic8ball-instruction p { font-size: 13px; color: var(--text-secondary); }
.magic8ball-wrapper { width: 245px; height: 245px; margin: 25px auto; max-width: 100%; border-radius: 50%; }.magic8ball-wrapper:hover { transform: translateY(-3px); }
.ball-surface { background: radial-gradient(circle at 30% 25%,#434258,#161522 45%,#090b14 80%); border: 1px solid #5e5276; box-shadow: 0 20px 35px #00000030,inset -12px -12px 24px #00000060; }
.ball-window { width: 112px; height: 112px; border: 2px solid #c1a6ec25; background: radial-gradient(circle,#504275,#262b50); animation: none; box-shadow: inset 0 0 18px #00000060; }
.ball-answer { font-size: 15px; font-weight: 600; text-shadow: none; padding: 12px; }.ball-window.thinking { animation: answerBreathe 1s ease-in-out infinite; }
.magic8ball-wrapper.shaking { animation: ballRock .5s ease-in-out infinite; }.ball-window.answer-positive { background: radial-gradient(circle,#386554,#17352c) !important; box-shadow: 0 0 22px #80bc9e24 !important; }.ball-window.answer-neutral { background: radial-gradient(circle,#686045,#373224) !important; box-shadow: 0 0 22px #c9b87920 !important; }.ball-window.answer-negative { background: radial-gradient(circle,#655078,#32273f) !important; box-shadow: 0 0 22px #b29bd724 !important; }
.play-surface #shake-ball-btn { margin-top: 0; font-size: 15px; padding: 12px 22px; }
/* Short messages have a title, a close affordance, and readable contrast. */
.toast-container { max-width: 440px; width: calc(100% - 32px); bottom: max(24px,env(safe-area-inset-bottom)); z-index: 1500; }
.toast { display: flex; align-items: flex-start; gap: 12px; background: #202a40; border: 1px solid #4b556d; border-radius: 12px; color: #e6ebf4; padding: 14px 16px; box-shadow: 0 8px 32px #00000030; cursor: default; font-size: 13px; text-shadow: none; }
.toast-symbol { font-size: 17px; color: #c4b5fd; }.toast-copy { flex: 1; min-width: 0; }.toast-copy strong { display: block; font-size: 12px; margin-bottom: 4px; }.toast-copy p { line-height: 1.7; overflow-wrap: anywhere; }.toast-close { background: none; border: 0; color: #bec8db; min-width: 28px; min-height: 28px; font-size: 20px; margin: -2px -4px 0 0; }.toast-success { border-color: #45735f; }.toast-error { border-color: #aa7460; }
@keyframes stateSpin { to { transform: rotate(360deg); } }
@keyframes resultArrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pointerTick { 50% { transform: translateX(-50%) rotate(-8deg); } }
@keyframes pointerSettle { 40% { transform: translateX(-50%) translateY(3px); } }
@keyframes numberArrive { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes dealCard { from { opacity: 0; transform: translateY(10px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes safeReveal { 50% { transform: scale(.93); } }
@keyframes bombReveal { 25%,75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes winnerMark { 50% { box-shadow: 0 0 0 9px #bda0e615; } }
@keyframes answerBreathe { 50% { opacity: .6; } }
@keyframes ballRock { 25% { transform: rotate(-5deg) translateX(-3px); } 75% { transform: rotate(5deg) translateX(3px); } }
@media (max-width: 900px) { .tool-layout { grid-template-columns: minmax(0,1.1fr) minmax(250px,.9fr); gap: 16px; }.play-surface, .tool-feedback { padding: 18px; }.player-inputs { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    .page-header :is(h1,h2) { min-width: 140px; }.page-header .card-count { width: 100%; justify-content: flex-end; }
    .tool-layout { display: flex; flex-direction: column; gap: 16px; }.tool-side { display: contents; }.play-surface { width: 100%; order: 1; padding: 16px; }.tool-feedback { width: 100%; order: 2; }.tool-config { width: 100%; order: 3; }.tool-layout[data-tool="random"] .random-config { order: 0; }
    .play-surface .dice-container, .play-surface .coin-3d-container { height: 245px; min-height: 245px; }.play-surface .dice-controls, .play-surface .coin-controls { padding-top: 12px; }
    .play-surface .cards-container { gap: 10px; }.card-front { font-size: 26px; }.card-back { font-size: 25px; }.card-back .card-order { font-size: 10px; }
    .play-surface .bomb-grid { gap: 8px; }.bomb-cell { font-size: 24px; border-radius: 10px; }.feedback-value { font-size: 30px; }
    .play-surface .random-result { min-height: 180px; max-height: 430px; overflow-y: auto; }.random-number { font-size: 22px; min-width: 56px; padding: 10px 12px; }
    .player-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); }.player-name { font-size: 16px; }.player-marker { width: 48px; height: 42px; }
    .play-surface .bottle-container { width: min(235px,calc(86.2% - 45px)); }
    .magic8ball-wrapper { width: 220px; height: 220px; }.ball-window { width: 106px; height: 106px; }
    .modal-footer { flex-wrap: wrap; }.modal-footer #copy-modal-result { flex-basis: 100%; order: 3; }
    .toast-close { min-width: 44px; min-height: 44px; }.tool-feedback[data-phase="done"] .feedback-content { animation-duration: .3s; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.is-running .wheel-pointer { animation: none !important; } }