.practice-section {
  position: relative;
  overflow: hidden;
  color: #351108;
  background:
    radial-gradient(circle at 12% 10%, #fff9e9, transparent 30rem),
    radial-gradient(circle at 88% 80%, rgba(241, 177, 52, .11), transparent 24rem),
    #fff9e9;
}

.hero-practice-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 17px; color: #351108; font-size: 12px; text-decoration: none; }
.hero-practice-link strong { color: #351108; font-weight: 800; border-bottom: 1px solid #e7cca0; }
.hero-practice-link:hover strong { color: #351108; border-color: #e7cca0; }

.practice-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(#fffdf5 1px, transparent 1px), linear-gradient(90deg, #fffdf5 1px, transparent 1px);
  background-size: 28px 28px;
}

.practice-shell { position: relative; z-index: 1; padding: clamp(72px, 8vw, 118px) 0; }
.practice-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .45fr); align-items: end; gap: 42px; margin-bottom: 34px; }
.practice-intro .kicker { color: #351108; }
.practice-intro h2 { max-width: 780px; margin: 13px 0 0; color: #351108; font: 500 clamp(44px, 5.2vw, 78px)/.98 var(--font-display, Georgia, serif); letter-spacing: -.035em; }
.practice-intro p { max-width: 470px; margin: 0; color: #351108; font-size: 16px; line-height: 1.75; }
.practice-intro p strong { color: #351108; }

.practice-console { overflow: hidden; border: 1px solid #e7cca0; border-radius: 28px; background: #fff9e9; box-shadow: 0 28px 90px rgba(3, 0, 12, .45), inset 0 1px #e7cca0; }
.practice-console-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 24px; border-bottom: 1px solid #e7cca0; background: linear-gradient(90deg, #fff9e9, #fff9e9); }
.practice-console-top > span { color: #351108; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.practice-status-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.practice-status-chips span { padding: 7px 10px; border: 1px solid #e7cca0; border-radius: 999px; color: #351108; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.practice-status-chips span:first-child { color: #23724b; border-color: rgba(49, 200, 135, .28); background: #fff9e9; }

.practice-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 640px; }
.practice-rail { padding: 28px 24px; border-right: 1px solid #e7cca0; background: #fff9e9; }
.practice-rail > small { display: block; margin-bottom: 17px; color: #67564c; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.practice-task { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid #e7cca0; color: #67564c; transition: color .2s ease; }
.practice-task i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e7cca0; border-radius: 50%; color: #67564c; font-style: normal; font-size: 11px; font-weight: 900; }
.practice-task b { display: block; color: #351108; font-size: 13px; line-height: 1.3; }
.practice-task span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; }
.practice-task.done { color: #23724b; }
.practice-task.done i { color: #23724b; border-color: #55d794; background: #55d794; }
.practice-task.done b { color: #23724b; }
.practice-rail-note { margin: 28px 0 0; padding: 15px; border: 1px solid #e7cca0; border-radius: 14px; background: rgba(247, 188, 65, .05); color: #67564c; font-size: 11px; line-height: 1.55; }
.practice-rail-note strong { display: block; margin-bottom: 4px; color: #351108; }

.practice-game { min-width: 0; padding: 28px; background: radial-gradient(circle at 50% 12%, #fff9e9, transparent 36rem); }
.practice-game-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 20px; }
.practice-game-head h3 { margin: 0 0 6px; color: #351108; font: 600 clamp(24px, 3vw, 34px)/1.1 var(--font-display, Georgia, serif); }
.practice-game-head p { margin: 0; color: #67564c; font-size: 12px; }
.wild-joker { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e7cca0; border-radius: 13px; color: #351108; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.wild-joker strong { display: grid; place-items: center; width: 31px; height: 38px; border-radius: 6px; color: #351108; background: linear-gradient(145deg, #fffdf5, #f6c74e); font: 900 17px/1 Arial, sans-serif; }

.practice-table { position: relative; overflow: hidden; min-height: 234px; padding: 28px 24px; border: 1px solid #e7cca0; border-radius: 24px; background: radial-gradient(ellipse at 50% 20%, #fff9e9, #fff9e9 58%, #fff9e9); box-shadow: inset 0 0 0 7px rgba(0,0,0,.13), inset 0 0 70px rgba(0,0,0,.35); }
.practice-table::after { content: "RUMMY CIRCLE · PRACTICE TABLE"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #351108; font: 700 22px/1 Georgia,serif; letter-spacing: .22em; white-space: nowrap; pointer-events: none; }
.practice-card { position: relative; z-index: 1; display: inline-flex; flex-direction: column; justify-content: space-between; width: 68px; height: 98px; margin: 4px 2px; padding: 0; overflow: hidden; border: 0; border-radius: 9px; color: #351108; background: transparent; box-shadow: 0 7px 14px rgba(0,0,0,.28); cursor: pointer; font-family: Arial, sans-serif; text-align: left; transition: translate .16s ease, border-color .16s ease, box-shadow .16s ease; }
.practice-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.practice-card:hover { translate: 0 -5px; }
.practice-card:focus-visible { outline: 3px solid #e7cca0; outline-offset: 3px; }
.practice-card.selected { translate: 0 -12px; border-color: #e7cca0; box-shadow: 0 0 0 3px #e7cca0, 0 12px 20px rgba(0,0,0,.35); }
.practice-card span { font-size: 17px; font-weight: 900; }
.practice-card i { font-size: 17px; font-style: normal; }
.practice-card b { align-self: center; margin: auto; font-size: 31px; line-height: 1; }
.practice-card.red { color: #b72208; }
.practice-card.is-joker { align-items: center; text-align: center; color: #351108; background: radial-gradient(circle at 50% 35%, #fff9e9, #fff9e9 70%); border-color: #e7cca0; }
.practice-card.is-joker span { margin-top: 2px; font-size: 25px; }
.practice-card.is-joker strong { font-size: 10px; letter-spacing: .08em; }
.practice-card.is-joker small { color: #351108; font-size: 7px; letter-spacing: .1em; }
.practice-card:disabled { cursor: default; }
.practice-card:disabled:hover { translate: 0; }
.practice-table.is-idle { display: grid; place-items: center; align-content: center; gap: 13px; text-align: center; }
.practice-table.is-idle > p { position: relative; z-index: 1; margin: 0; color: #351108; font-size: 12px; letter-spacing: .07em; }
.practice-deck { position: relative; z-index: 1; width: 94px; height: 132px; display: grid; place-items: center; align-content: center; border: 2px solid #e7cca0; border-radius: 13px; color: #351108; background: repeating-linear-gradient(45deg, #fff9e9, #fff9e9 5px, #fff9e9 5px, #fff9e9 10px); box-shadow: 9px 7px 0 #e7cca0, 12px 10px 18px rgba(0,0,0,.35); }
.practice-deck span { font: 700 10px/1 Arial,sans-serif; letter-spacing: .12em; }
.practice-deck b { margin-top: 4px; font: 900 15px/1 Arial,sans-serif; }
.practice-deck i { margin-top: 11px; color: #351108; font: normal 29px/1 Georgia,serif; }

.practice-deal { position: relative; z-index: 2; display: block; margin: 18px auto 0; min-width: 240px; }
.practice-groups-wrap { margin-top: 18px; scroll-margin: 110px; }
.practice-groups-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #67564c; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.practice-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; min-height: 88px; }
.practice-groups-empty { grid-column: 1/-1; display: grid; place-items: center; padding: 20px; border: 1px dashed #e7cca0; border-radius: 14px; color: #67564c; font-size: 12px; text-align: center; }
.practice-group { min-width: 0; padding: 10px; border: 1px solid #e7cca0; border-radius: 14px; background: #fff9e9; }
.practice-group header { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.practice-group header > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #23724b; background: #5ed897; font-size: 9px; font-weight: 900; }
.practice-group header strong { color: #23724b; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.practice-group header button { margin-left: auto; padding: 2px 0; border: 0; color: #67564c; background: none; cursor: pointer; font-size: 10px; }
.practice-group > div { display: flex; align-items: center; min-height: 55px; }
.practice-group.just-created { animation: practiceGroupArrive 1.25s ease both; }
.practice-group .practice-card { width: 37px; height: 54px; margin-right: -5px; padding: 4px; border-radius: 5px; border-width: 1px; }
.practice-group .practice-card span, .practice-group .practice-card i { font-size: 9px; }
.practice-group .practice-card b { font-size: 16px; }
.practice-group .practice-card.is-joker strong { font-size: 6px; }
.practice-group .practice-card.is-joker small { display: none; }

.practice-feedback { display: flex; align-items: center; gap: 11px; min-height: 54px; margin-top: 14px; padding: 11px 14px; border: 1px solid #e7cca0; border-radius: 13px; color: #351108; background: #fffdf5; font-size: 12px; line-height: 1.45; }
.practice-feedback b { display: grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #67564c; background: rgba(240,180,60,.1); }
.practice-feedback.success { color: #23724b; border-color: rgba(68,211,139,.24); background: #fff9e9; }
.practice-feedback.success b { color: #23724b; background: #55d794; }
.practice-feedback.error { color: #351108; border-color: rgba(221,70,91,.3); background: #fff9e9; }
.practice-feedback.error b { color: #351108; background: #fff9e9; }
.practice-feedback.hint { color: #351108; border-color: #e7cca0; background: rgba(240,180,60,.07); }
.practice-actions { display: flex; gap: 9px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.practice-actions[hidden], .practice-result[hidden], .practice-deal[hidden] { display: none !important; }
.practice-actions button { min-height: 42px; padding: 0 15px; border: 1px solid #e7cca0; border-radius: 11px; color: #351108; background: #fffdf5; cursor: pointer; font: 750 11px/1 Arial,sans-serif; }
.practice-actions button:hover { color: #351108; border-color: #e7cca0; }
.practice-actions .practice-group-action { color: #351108; border-color: #e7cca0; }
.practice-actions .practice-declare { margin-left: auto; padding-inline: 23px; color: #351108; border-color: #e7cca0; background: linear-gradient(180deg, #ffd952, #f1ad20); box-shadow: 0 7px 20px rgba(224,151,24,.2); }

.practice-result { margin-top: 18px; padding: 23px; border: 1px solid #e7cca0; border-radius: 20px; background: linear-gradient(135deg, #fff9e9, #fff9e9); }
.practice-result-head { display: flex; align-items: center; gap: 16px; }
.practice-score { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid #e7cca0; border-radius: 50%; color: #351108; background: #fff9e9; }
.practice-score strong { font: 700 27px/1 Georgia,serif; }
.practice-score small { font-size: 8px; letter-spacing: .08em; }
.practice-result h4 { margin: 0 0 5px; color: #351108; font: 600 25px/1.1 Georgia,serif; }
.practice-result p { margin: 0; color: #351108; font-size: 12px; line-height: 1.5; }
.practice-result-question { margin-top: 17px; padding: 12px 14px; border-left: 3px solid #e7cca0; color: #351108; background: rgba(242,189,76,.07); }
.practice-result-question strong, .practice-result-question span { display: block; }
.practice-result-question strong { font: 600 16px/1.25 Georgia,serif; }
.practice-result-question span { margin-top: 3px; color: #351108; font-size: 10px; }
.practice-result-links { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.practice-result-links a, .practice-result-links button { min-height: 40px; padding: 0 14px; border: 1px solid #e7cca0; border-radius: 10px; color: #351108; background: transparent; cursor: pointer; font: 750 11px/1 Arial,sans-serif; text-decoration: none; display: inline-flex; align-items: center; }
.practice-result-links .primary { color: #b72208; border-color: #e7cca0; background: #f5bf40; }
.practice-result-links .download-next { color: #351108; border-color: #e7cca0; }
.practice-disclaimer { margin: 14px 0 0; color: #67564c; font-size: 10px; text-align: center; }

.practice-case-file { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; margin: 14px 0 20px; }
.practice-case-file > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #351108; background: linear-gradient(145deg, #ffe58e, #edae27); box-shadow: 0 8px 22px rgba(229,161,30,.17); font: 800 16px/1 Georgia,serif; }
.practice-case-file b { display: block; color: #351108; font: 600 18px/1.12 Georgia,serif; }
.practice-case-file span { display: block; margin-top: 5px; color: #67564c; font-size: 9px; }
.practice-task.active { color: #351108; }
.practice-task.active i { color: #351108; border-color: #e7cca0; background: #f1bd42; }
.practice-task.active b { color: #351108; }
.practice-rail-note > span { display: block; margin-top: 5px; }
.practice-case-kicker { display: block; margin-bottom: 8px; color: #67564c; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.practice-head-tools { display: flex; align-items: stretch; gap: 8px; }
.practice-timer { min-width: 76px; padding: 8px 10px; border: 1px solid #e7cca0; border-radius: 13px; text-align: center; }
.practice-timer span { display: block; color: #67564c; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.practice-timer strong { display: block; margin-top: 4px; color: #351108; font: 700 17px/1 Georgia,serif; }
.practice-groups-wrap[hidden] { display: none !important; }
.practice-table.is-detective-choice { min-height: 300px; padding: 18px; }
.detective-groups { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; }
.detective-group-choice { min-width: 0; padding: 12px; border: 1px solid #e7cca0; border-radius: 14px; color: #351108; background: #fff9e9; cursor: pointer; text-align: left; transition: border-color .18s, translate .18s, background .18s; }
.detective-group-choice:hover { translate: 0 -2px; border-color: #e7cca0; }
.detective-group-choice.wrong { border-color: #e7cca0; background: #fff9e9; }
.detective-group-choice.correct { border-color: #e7cca0; background: #fff9e9; box-shadow: 0 0 0 2px #e7cca0; }
.detective-choice-label { display: block; margin-bottom: 9px; color: #67564c; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.detective-card-row { display: flex; align-items: center; min-height: 64px; }
.detective-card-row .practice-card { width: 43px; height: 62px; margin-right: -5px; padding: 4px; border-width: 1px; border-radius: 6px; }
.detective-card-row .practice-card span,.detective-card-row .practice-card i { font-size: 10px; }
.detective-card-row .practice-card b { font-size: 18px; }
.detective-card-row .practice-card.is-joker strong { font-size: 6px; }
.detective-card-row .practice-card.is-joker small { display: none; }
.detective-choice-state { display: block; margin-top: 8px; color: #67564c; font-size: 9px; }
.detective-group-choice.wrong .detective-choice-state { color: #351108; }
.detective-group-choice.correct .detective-choice-state { color: #23724b; }
.detective-choice-stage { position: relative; z-index: 1; width: 100%; }
.detective-base-cards { display: grid; place-items: center; min-height: 120px; padding: 15px; border: 1px solid #e7cca0; border-radius: 14px; background: #fff9e9; }
.detective-base-cards > small { margin-bottom: 8px; color: #67564c; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.detective-base-cards > div { display: flex; justify-content: center; }
.detective-base-cards .practice-card { margin-inline: -2px; }
.detective-answer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 11px; }
.detective-answer { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 74px; padding: 9px; border: 1px solid #e7cca0; border-radius: 13px; color: #351108; background: #fff9e9; cursor: pointer; text-align: left; }
.detective-answer:hover { border-color: #e7cca0; background: #fff9e9; }
.detective-answer.wrong { color: #351108; border-color: #e7cca0; }
.detective-answer.correct { color: #23724b; border-color: #e7cca0; background: #fff9e9; }
.detective-answer .practice-card { flex: 0 0 auto; width: 42px; height: 61px; margin: 0; padding: 4px; border-width: 1px; border-radius: 6px; }
.detective-answer .practice-card span,.detective-answer .practice-card i { font-size: 10px; }
.detective-answer .practice-card b { font-size: 18px; }
.detective-answer .practice-card.is-joker strong { font-size: 6px; }
.detective-answer .practice-card.is-joker small { display: none; }
.detective-answer > span > b { display: block; font-size: 11px; }
.detective-answer > span > small { display: block; margin-top: 4px; color: #67564c; font-size: 8px; line-height: 1.3; }
.practice-stars { margin-bottom: 9px; color: #351108; font-size: 24px; letter-spacing: .12em; text-shadow: 0 0 18px rgba(255,199,65,.3); }
.practice-result-streak { display: inline-block; margin-top: 8px; color: #351108; font-size: 10px; }

@keyframes practiceGroupArrive {
  0% { transform: translateY(12px); border-color: #e7cca0; box-shadow: 0 0 0 4px #e7cca0, 0 12px 30px rgba(0,0,0,.22); }
  35% { transform: translateY(0); border-color: #e7cca0; box-shadow: 0 0 0 3px #e7cca0, 0 8px 24px rgba(0,0,0,.16); }
  100% { border-color: #e7cca0; box-shadow: none; }
}

.practice-page { background: #fff9e9; }
.practice-page-main { padding-top: 18px; }
.practice-page-hero { padding: 64px 0 42px; color: #351108; background: radial-gradient(circle at 75% 0, #fff9e9, transparent 30rem); }
.practice-breadcrumb { margin-bottom: 30px; color: #67564c; font-size: 12px; }
.practice-breadcrumb a { color: #351108; text-decoration: none; }
.practice-page-hero h1 { max-width: 900px; margin: 0; font: 500 clamp(48px, 7vw, 92px)/.96 var(--font-display, Georgia,serif); letter-spacing: -.04em; }
.practice-page-hero > .container > p { max-width: 750px; margin: 24px 0 0; color: #351108; font-size: 17px; line-height: 1.75; }
.practice-page .practice-shell { padding-top: 22px; }
.practice-explainer { padding: 84px 0; color: #351108; background: #fffdf5; }
.practice-explainer-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.practice-explainer h2 { margin: 12px 0 20px; color: #351108; font: 500 clamp(38px,5vw,64px)/1 Georgia,serif; }
.practice-explainer p { color: #67564c; line-height: 1.75; }
.practice-copy-cards { display: grid; gap: 12px; }
.practice-copy-cards article { padding: 22px; border: 1px solid #e7cca0; border-radius: 16px; background: #fffdf5; }
.practice-copy-cards h3 { margin: 0 0 8px; color: #351108; font: 600 22px/1.2 Georgia,serif; }
.practice-copy-cards p { margin: 0; font-size: 14px; }
.practice-copy-cards a { color: #b72208; font-weight: 750; }

@media (max-width: 900px) {
  .practice-intro { grid-template-columns: 1fr; gap: 18px; }
  .practice-layout { grid-template-columns: 1fr; }
  .practice-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 16px; border-right: 0; border-bottom: 1px solid #e7cca0; }
  .practice-rail > small, .practice-rail-note { display: none; }
  .practice-case-file { grid-column: 1/-1; margin: 0 0 3px; }
  .practice-case-file > i { width: 36px; height: 36px; }
  .practice-task { grid-template-columns: 25px 1fr; gap: 7px; padding: 8px; border: 1px solid #e7cca0; border-radius: 10px; }
  .practice-task i { width: 23px; height: 23px; }
  .practice-task span { display: none; }
  .practice-explainer-grid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 620px) {
  .practice-shell { padding: 64px 0; }
  .practice-intro { margin-bottom: 22px; }
  .practice-intro h2 { font-size: 43px; }
  .practice-intro p { font-size: 14px; }
  .practice-console { border-radius: 20px; }
  .practice-console-top { align-items: flex-start; padding: 14px; }
  .practice-status-chips { justify-content: flex-end; }
  .practice-status-chips span:nth-child(2) { display: none; }
  .practice-rail { gap: 5px; padding: 10px; }
  .practice-case-file { display: none; }
  .practice-task { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .practice-task b { font-size: 10px; }
  .practice-game { padding: 18px 12px 20px; }
  .practice-game-head h3 { font-size: 25px; }
  .practice-game-head p { max-width: 210px; line-height: 1.45; }
  .practice-head-tools { flex-direction: column; }
  .practice-timer { min-width: 66px; padding: 6px; }
  .wild-joker { flex-direction: column; padding: 6px 8px; font-size: 8px; }
  .practice-table { min-height: 246px; padding: 24px 10px 16px; }
  .practice-card { width: 48px; height: 72px; margin: 4px -2px; padding: 5px; border-radius: 7px; }
  .practice-card span, .practice-card i { font-size: 12px; }
  .practice-card b { font-size: 23px; }
  .practice-card.is-joker span { font-size: 18px; }
  .practice-card.is-joker strong { font-size: 7px; }
  .practice-card.is-joker small { font-size: 5px; }
  .practice-table::after { font-size: 11px; }
  .practice-table.is-detective-choice { min-height: 390px; padding: 11px; }
  .detective-groups { grid-template-columns: 1fr; }
  .detective-group-choice { padding: 9px; }
  .detective-card-row { min-height: 49px; }
  .detective-card-row .practice-card { width: 35px; height: 49px; }
  .detective-answer-grid { grid-template-columns: 1fr; }
  .detective-answer { justify-content: flex-start; min-height: 64px; }
  .detective-base-cards { min-height: 105px; }
  .practice-groups { grid-template-columns: 1fr; }
  .practice-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .practice-actions button { padding: 0 7px; }
  .practice-actions .practice-declare { grid-column: 1/-1; margin-left: 0; min-height: 48px; }
  .practice-result-head { align-items: flex-start; }
  .practice-result h4 { font-size: 21px; }
  .practice-result-links { display: grid; }
  .practice-result-links a, .practice-result-links button { justify-content: center; }
  .practice-page-hero { padding: 42px 0 20px; }
  .practice-page-hero h1 { font-size: 49px; }
  .practice-page-hero > .container > p { font-size: 15px; }
  .practice-explainer { padding: 64px 0 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .practice-card { transition: none; }
  .practice-card:hover, .practice-card.selected { translate: 0; }
  .practice-group.just-created { animation: none; border-color: #e7cca0; }
}

/* Homepage: one immediate, playable Rummy turn. */
.quick-play-section {
  background:
    radial-gradient(circle at 16% 8%, #fff9e9, transparent 34rem),
    radial-gradient(circle at 86% 86%, #fff9e9, transparent 28rem),
    #fff9e9;
}

.quick-play-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr); align-items: end; gap: 54px; margin-bottom: 30px; }
.quick-play-intro .kicker { color: #351108; }
.quick-play-intro h2 { max-width: 800px; margin: 13px 0 0; color: #351108; font: 500 clamp(42px, 5vw, 74px)/.98 var(--font-display, Georgia, serif); letter-spacing: -.038em; }
.quick-play-intro p { max-width: 480px; margin: 0; color: #351108; font-size: 16px; line-height: 1.72; }
.quick-play-intro p strong { color: #351108; }

.quick-table { overflow: hidden; border: 1px solid #e7cca0; border-radius: 28px; background: #fff9e9; box-shadow: 0 32px 100px rgba(3, 0, 12, .5), inset 0 1px #e7cca0; }
.quick-table-bar, .quick-table-footer { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 22px; color: #351108; background: #fff9e9; }
.quick-table-bar { border-bottom: 1px solid #e7cca0; }
.quick-table-brand { display: flex; align-items: center; gap: 8px; }
.quick-table-brand strong { color: #351108; font: 800 11px/1 Arial, sans-serif; letter-spacing: .16em; }
.quick-table-brand small { padding-left: 8px; border-left: 1px solid #e7cca0; color: #23724b; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.quick-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #65e19f; box-shadow: 0 0 0 4px #e7cca0, 0 0 14px #e7cca0; }
.quick-turn-steps { display: flex; align-items: center; gap: 8px; }
.quick-turn-steps span { padding: 7px 10px; border: 1px solid #e7cca0; border-radius: 999px; color: #67564c; font-size: 9px; font-weight: 800; letter-spacing: .04em; transition: color .2s, border-color .2s, background .2s; }
.quick-turn-steps span.active { color: #b72208; border-color: #e7cca0; background: #f4c85d; }
.quick-turn-steps span.done { color: #23724b; border-color: rgba(83,210,145,.32); background: #fff9e9; }

.quick-felt { position: relative; min-height: 570px; padding: 24px 28px 28px; background: radial-gradient(ellipse at 50% 32%, #fff9e9 0, #fff9e9 46%, #fff9e9 78%, #fff9e9 100%); box-shadow: inset 0 0 0 8px rgba(0,0,0,.12), inset 0 0 100px rgba(0,0,0,.38); }
.quick-felt::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: radial-gradient(#fffdf5 .45px, transparent .65px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.quick-felt::after { content: "RUMMY CIRCLE"; position: absolute; left: 50%; top: 31%; translate: -50% -50%; color: #351108; font: 700 clamp(28px,5vw,66px)/1 Georgia,serif; letter-spacing: .18em; white-space: nowrap; pointer-events: none; }
.quick-opponent { position: absolute; z-index: 2; left: 24px; top: 24px; display: flex; align-items: center; gap: 9px; color: #351108; }
.quick-opponent > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e7cca0; border-radius: 50%; color: #351108; background: #fff9e9; font: 800 10px/1 Arial,sans-serif; }
.quick-opponent small { font-size: 10px; }

.quick-piles { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; gap: 18px; min-height: 134px; }
.quick-pile { display: grid; justify-items: center; gap: 7px; }
.quick-pile > small { color: #351108; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.quick-stock, .quick-discard { width: 70px; height: 98px; padding: 0; border: 0; border-radius: 9px; background: transparent; }
.quick-stock { display: grid; place-items: center; align-content: center; border: 2px solid #e7cca0; color: #351108; background: repeating-linear-gradient(45deg, #fff9e9, #fff9e9 5px, #fff9e9 5px, #fff9e9 10px); box-shadow: 7px 5px 0 #e7cca0, 10px 8px 15px rgba(0,0,0,.34); }
.quick-stock span { font: 700 8px/1 Arial,sans-serif; letter-spacing: .12em; }
.quick-stock strong { margin-top: 4px; font: 900 11px/1 Arial,sans-serif; }
.quick-stock i { margin-top: 8px; color: #351108; font: normal 22px/1 Georgia,serif; }
.quick-discard { cursor: pointer; transition: transform .18s, filter .18s; }
.quick-discard img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(0,0,0,.26)); }
.quick-discard:not(:disabled):hover { transform: translateY(-6px) rotate(2deg); }
.quick-discard:disabled { cursor: default; }
.quick-table[data-phase="draw"] .quick-discard { animation: quickChoicePulse 1.25s ease-in-out infinite; }

.quick-coach { position: relative; z-index: 2; width: fit-content; max-width: min(640px, 90%); min-height: 52px; display: flex; align-items: center; gap: 12px; margin: 0 auto 18px; padding: 10px 16px 10px 11px; border: 1px solid #e7cca0; border-radius: 999px; color: #351108; background: #fff9e9; box-shadow: 0 8px 25px rgba(0,0,0,.2); backdrop-filter: blur(8px); }
.quick-coach > span { flex: none; padding: 8px 10px; border-radius: 999px; color: #b72208; background: #f4c85d; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.quick-coach p { margin: 0; font-size: 12px; line-height: 1.4; }
.quick-coach strong { color: #351108; }

.quick-hand-area { position: relative; z-index: 2; margin-top: 3px; }
.quick-hand-label { display: flex; justify-content: space-between; align-items: center; max-width: 1040px; margin: 0 auto 9px; color: #351108; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.quick-hand-label small { color: #67564c; font-size: 9px; letter-spacing: .04em; }
.quick-hand { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); align-items: end; gap: clamp(3px, .55vw, 7px); max-width: 1040px; min-height: 128px; margin-inline: auto; }
.quick-card { position: relative; min-width: 0; padding: 0; overflow: visible; border: 0; border-radius: 10px; background: transparent; cursor: default; transition: transform .2s, filter .2s; }
.quick-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; filter: drop-shadow(0 8px 7px rgba(0,0,0,.3)); }
.quick-card.is-dealt { opacity: 0; transform: translate(-220px, -180px) rotate(-12deg); animation: quickDeal .34s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(var(--deal-index) * 65ms); }
.quick-card.is-choice { cursor: pointer; animation: quickCardChoice 1.15s ease-in-out infinite; }
.quick-card.is-choice:hover { transform: translateY(-12px); filter: brightness(1.06); }
.quick-card.is-matched { transform: translateY(-10px); filter: drop-shadow(0 0 8px rgba(255,213,97,.85)); }
.quick-card.is-matched::after { content: ""; position: absolute; inset: -4px; border: 2px solid #e7cca0; border-radius: 12px; pointer-events: none; }

.quick-win { position: relative; z-index: 4; max-width: 1040px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 20px auto 0; padding: 13px 15px; border: 1px solid #e7cca0; border-radius: 16px; color: #351108; background: #fff9e9; box-shadow: 0 14px 35px rgba(0,0,0,.23); }
.quick-win[hidden] { display: none; }
.quick-win > div:first-child { display: flex; align-items: center; gap: 11px; }
.quick-win > div:first-child > span { display: grid; flex: none; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: #23724b; background: #6de0a4; font-weight: 900; }
.quick-win p, .quick-win strong, .quick-win small { display: block; margin: 0; }
.quick-win strong { font: 600 18px/1.2 Georgia,serif; }
.quick-win small { margin-top: 3px; color: #351108; font-size: 10px; line-height: 1.4; }
.quick-win-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.quick-win-actions button, .quick-win-actions a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid #e7cca0; border-radius: 10px; color: #351108; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.quick-win-actions a { color: #b72208; border-color: #e7cca0; background: #f4c85d; }
.quick-table-footer { border-top: 1px solid #e7cca0; color: #67564c; font-size: 9px; letter-spacing: .04em; }
.quick-table-footer a { color: #351108; }

@keyframes quickDeal { to { opacity: 1; transform: translate(0, 0) rotate(0); } }
@keyframes quickChoicePulse { 0%,100% { transform: translateY(0); filter: drop-shadow(0 0 0 rgba(255,217,105,0)); } 50% { transform: translateY(-7px); filter: drop-shadow(0 0 8px rgba(255,217,105,.75)); } }
@keyframes quickCardChoice { 0%,100% { transform: translateY(0); filter: drop-shadow(0 0 0 rgba(255,217,105,0)); } 50% { transform: translateY(-9px); filter: drop-shadow(0 0 8px rgba(255,217,105,.72)); } }

@media (max-width: 900px) {
  .quick-play-intro { grid-template-columns: 1fr; gap: 17px; }
  .quick-felt { min-height: 610px; }
  .quick-hand { grid-template-columns: repeat(7, minmax(0, 66px)); justify-content: center; gap: 5px; }
  .quick-card:nth-child(n+8) { margin-top: -12px; }
  .quick-win { align-items: stretch; flex-direction: column; }
  .quick-win-actions { justify-content: flex-end; }
}

@media (max-width: 620px) {
  .quick-play-intro h2 { font-size: 42px; }
  .quick-play-intro p { font-size: 14px; }
  .quick-table { border-radius: 20px; }
  .quick-table-bar { align-items: flex-start; padding: 13px; }
  .quick-table-brand small { display: none; }
  .quick-turn-steps { gap: 3px; }
  .quick-turn-steps span { padding: 6px 7px; font-size: 7px; }
  .quick-felt { min-height: 585px; padding: 15px 10px 18px; }
  .quick-opponent { left: 13px; top: 14px; }
  .quick-opponent small { display: none; }
  .quick-piles { min-height: 124px; }
  .quick-stock, .quick-discard { width: 61px; height: 86px; }
  .quick-coach { max-width: 100%; margin-bottom: 14px; border-radius: 15px; }
  .quick-coach p { font-size: 10px; }
  .quick-hand { grid-template-columns: repeat(7, minmax(0, 48px)); gap: 2px; min-height: 210px; }
  .quick-card:nth-child(n+8) { margin-top: -3px; }
  .quick-win { margin-top: 14px; padding: 12px; }
  .quick-win strong { font-size: 16px; }
  .quick-win-actions { display: grid; grid-template-columns: 1fr 1.45fr; }
  .quick-win-actions button, .quick-win-actions a { justify-content: center; padding-inline: 9px; text-align: center; }
  .quick-table-footer { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-card.is-dealt { opacity: 1; transform: none; animation: none; }
  .quick-table[data-phase="draw"] .quick-discard, .quick-card.is-choice { animation: none; outline: 3px solid #e7cca0; outline-offset: 3px; }
}