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

.hero-practice-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 17px; color: #a99cad; font-size: 12px; text-decoration: none; }
.hero-practice-link strong { color: #f0bf4c; font-weight: 800; border-bottom: 1px solid rgba(240,191,76,.45); }
.hero-practice-link:hover strong { color: #ffe191; border-color: #ffe191; }

.practice-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 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: #f2bd43; }
.practice-intro h2 { max-width: 780px; margin: 13px 0 0; color: #fff5df; 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: #b8aebf; font-size: 16px; line-height: 1.75; }
.practice-intro p strong { color: #f9cc62; }

.practice-console { overflow: hidden; border: 1px solid rgba(240, 180, 60, .48); border-radius: 28px; background: rgba(17, 5, 34, .9); box-shadow: 0 28px 90px rgba(3, 0, 12, .45), inset 0 1px rgba(255,255,255,.05); }
.practice-console-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 24px; border-bottom: 1px solid rgba(240, 180, 60, .24); background: linear-gradient(90deg, rgba(90, 20, 113, .42), rgba(36, 8, 58, .18)); }
.practice-console-top > span { color: #e8d9bc; 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 rgba(255,255,255,.12); border-radius: 999px; color: #ab9db1; font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.practice-status-chips span:first-child { color: #6ce2a8; border-color: rgba(49, 200, 135, .28); background: rgba(30, 167, 111, .08); }

.practice-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 640px; }
.practice-rail { padding: 28px 24px; border-right: 1px solid rgba(240, 180, 60, .2); background: rgba(20, 6, 41, .72); }
.practice-rail > small { display: block; margin-bottom: 17px; color: #8f7d98; 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 rgba(255,255,255,.08); color: #91859a; transition: color .2s ease; }
.practice-task i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(240,180,60,.28); border-radius: 50%; color: #c59b43; font-style: normal; font-size: 11px; font-weight: 900; }
.practice-task b { display: block; color: #d7ccd8; 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: #8acbaa; }
.practice-task.done i { color: #082b1c; border-color: #55d794; background: #55d794; }
.practice-task.done b { color: #71e0a7; }
.practice-rail-note { margin: 28px 0 0; padding: 15px; border: 1px solid rgba(240, 180, 60, .18); border-radius: 14px; background: rgba(247, 188, 65, .05); color: #9b8c9e; font-size: 11px; line-height: 1.55; }
.practice-rail-note strong { display: block; margin-bottom: 4px; color: #f0bf55; }

.practice-game { min-width: 0; padding: 28px; background: radial-gradient(circle at 50% 12%, rgba(32, 126, 81, .11), 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: #fff8e9; font: 600 clamp(24px, 3vw, 34px)/1.1 var(--font-display, Georgia, serif); }
.practice-game-head p { margin: 0; color: #9d91a2; font-size: 12px; }
.wild-joker { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid rgba(240,180,60,.3); border-radius: 13px; color: #aa9caf; 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: #17101b; background: linear-gradient(145deg, #fff8dc, #f6c74e); font: 900 17px/1 Arial, sans-serif; }

.practice-table { position: relative; overflow: hidden; min-height: 234px; padding: 28px 24px; border: 1px solid rgba(212, 176, 91, .4); border-radius: 24px; background: radial-gradient(ellipse at 50% 20%, #136443, #073b2b 58%, #05291f); 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: "JUNGLEE RUMMY · PRACTICE TABLE"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: rgba(255,232,176,.09); 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: #151118; 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 #ffd258; outline-offset: 3px; }
.practice-card.selected { translate: 0 -12px; border-color: #ffd154; box-shadow: 0 0 0 3px rgba(255,209,84,.25), 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: #ad1837; }
.practice-card.is-joker { align-items: center; text-align: center; color: #f6d46b; background: radial-gradient(circle at 50% 35%, #5d1d68, #1b0829 70%); border-color: #e3af45; }
.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: #ab8fb1; 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: #bbccb7; 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 #f4c551; border-radius: 13px; color: #fff1c2; background: repeating-linear-gradient(45deg, #35104b, #35104b 5px, #260936 5px, #260936 10px); box-shadow: 9px 7px 0 #e7dfcb, 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: #f3bf42; 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: #9f91a5; 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 rgba(240,180,60,.22); border-radius: 14px; color: #756a7c; font-size: 12px; text-align: center; }
.practice-group { min-width: 0; padding: 10px; border: 1px solid rgba(92, 214, 150, .25); border-radius: 14px; background: rgba(38, 119, 79, .09); }
.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: #082b1c; background: #5ed897; font-size: 9px; font-weight: 900; }
.practice-group header strong { color: #70dca4; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.practice-group header button { margin-left: auto; padding: 2px 0; border: 0; color: #9d8fa3; 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 rgba(255,255,255,.09); border-radius: 13px; color: #a69baa; background: rgba(255,255,255,.025); 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: #c49b44; background: rgba(240,180,60,.1); }
.practice-feedback.success { color: #83dcb0; border-color: rgba(68,211,139,.24); background: rgba(34,155,96,.08); }
.practice-feedback.success b { color: #082b1c; background: #55d794; }
.practice-feedback.error { color: #f2a5ae; border-color: rgba(221,70,91,.3); background: rgba(177,42,67,.08); }
.practice-feedback.error b { color: #fff; background: #bd3851; }
.practice-feedback.hint { color: #e6c879; border-color: rgba(240,180,60,.28); 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 rgba(255,255,255,.13); border-radius: 11px; color: #c6bac9; background: rgba(255,255,255,.035); cursor: pointer; font: 750 11px/1 Arial,sans-serif; }
.practice-actions button:hover { color: #fff3d0; border-color: rgba(240,180,60,.45); }
.practice-actions .practice-group-action { color: #f7cc64; border-color: rgba(240,180,60,.35); }
.practice-actions .practice-declare { margin-left: auto; padding-inline: 23px; color: #20101b; border-color: #ffe192; 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 rgba(91, 222, 155, .36); border-radius: 20px; background: linear-gradient(135deg, rgba(27,128,81,.18), rgba(36,11,53,.48)); }
.practice-result-head { display: flex; align-items: center; gap: 16px; }
.practice-score { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid #f0bd4c; border-radius: 50%; color: #f6c85d; background: #1a0b24; }
.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: #fff7e7; font: 600 25px/1.1 Georgia,serif; }
.practice-result p { margin: 0; color: #9fd1b7; font-size: 12px; line-height: 1.5; }
.practice-result-question { margin-top: 17px; padding: 12px 14px; border-left: 3px solid #f2bd4c; color: #fff2d5; 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: #a79aaa; 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 rgba(255,255,255,.14); border-radius: 10px; color: #e8dcc2; 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: #24111a; border-color: #ffe293; background: #f5bf40; }
.practice-result-links .download-next { color: #f4cb67; border-color: rgba(244,203,103,.42); }
.practice-disclaimer { margin: 14px 0 0; color: #776c7d; 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: #241122; 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: #fff3dc; font: 600 18px/1.12 Georgia,serif; }
.practice-case-file span { display: block; margin-top: 5px; color: #96879d; font-size: 9px; }
.practice-task.active { color: #d1b869; }
.practice-task.active i { color: #271221; border-color: #f1bd42; background: #f1bd42; }
.practice-task.active b { color: #fff0d1; }
.practice-rail-note > span { display: block; margin-top: 5px; }
.practice-case-kicker { display: block; margin-bottom: 8px; color: #eeb53a; 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 rgba(240,180,60,.3); border-radius: 13px; text-align: center; }
.practice-timer span { display: block; color: #928297; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.practice-timer strong { display: block; margin-top: 4px; color: #f6ca5d; 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 rgba(239,190,73,.28); border-radius: 14px; color: #ddd0df; background: rgba(5,30,20,.52); cursor: pointer; text-align: left; transition: border-color .18s, translate .18s, background .18s; }
.detective-group-choice:hover { translate: 0 -2px; border-color: #edbd4f; }
.detective-group-choice.wrong { border-color: rgba(239,102,121,.7); background: rgba(94,20,39,.55); }
.detective-group-choice.correct { border-color: rgba(86,221,160,.75); background: rgba(10,78,51,.72); box-shadow: 0 0 0 2px rgba(86,221,160,.13); }
.detective-choice-label { display: block; margin-bottom: 9px; color: #dfb34b; 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: #83758a; font-size: 9px; }
.detective-group-choice.wrong .detective-choice-state { color: #f19aa7; }
.detective-group-choice.correct .detective-choice-state { color: #78e0aa; }
.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 rgba(255,255,255,.08); border-radius: 14px; background: rgba(0,0,0,.12); }
.detective-base-cards > small { margin-bottom: 8px; color: #b6a278; 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 rgba(239,190,73,.28); border-radius: 13px; color: #e8dce8; background: rgba(25,6,44,.88); cursor: pointer; text-align: left; }
.detective-answer:hover { border-color: #efc75b; background: rgba(50,13,66,.92); }
.detective-answer.wrong { color: #f0a0ac; border-color: rgba(239,102,121,.68); }
.detective-answer.correct { color: #85e5b4; border-color: rgba(86,221,160,.75); background: rgba(10,72,48,.86); }
.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: #94869b; font-size: 8px; line-height: 1.3; }
.practice-stars { margin-bottom: 9px; color: #ffd25c; 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: #f0bd4c; font-size: 10px; }

@keyframes practiceGroupArrive {
  0% { transform: translateY(12px); border-color: rgba(255,218,113,.95); box-shadow: 0 0 0 4px rgba(255,210,88,.18), 0 12px 30px rgba(0,0,0,.22); }
  35% { transform: translateY(0); border-color: rgba(255,218,113,.85); box-shadow: 0 0 0 3px rgba(255,210,88,.13), 0 8px 24px rgba(0,0,0,.16); }
  100% { border-color: rgba(92,214,150,.25); box-shadow: none; }
}

.practice-page { background: #10051f; }
.practice-page-main { padding-top: 18px; }
.practice-page-hero { padding: 64px 0 42px; color: #fff8e9; background: radial-gradient(circle at 75% 0, rgba(125,42,112,.33), transparent 30rem); }
.practice-breadcrumb { margin-bottom: 30px; color: #93879a; font-size: 12px; }
.practice-breadcrumb a { color: #efbc4a; 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: #b8acbb; font-size: 17px; line-height: 1.75; }
.practice-page .practice-shell { padding-top: 22px; }
.practice-explainer { padding: 84px 0; color: #24182b; background: #f7f3ec; }
.practice-explainer-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.practice-explainer h2 { margin: 12px 0 20px; color: #1d1026; font: 500 clamp(38px,5vw,64px)/1 Georgia,serif; }
.practice-explainer p { color: #6a5f6d; line-height: 1.75; }
.practice-copy-cards { display: grid; gap: 12px; }
.practice-copy-cards article { padding: 22px; border: 1px solid #ded6ca; border-radius: 16px; background: #fffdfa; }
.practice-copy-cards h3 { margin: 0 0 8px; color: #27152d; font: 600 22px/1.2 Georgia,serif; }
.practice-copy-cards p { margin: 0; font-size: 14px; }
.practice-copy-cards a { color: #9b6812; 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 rgba(240,180,60,.2); }
  .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 rgba(255,255,255,.07); 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: #ffd76b; }
}

/* Homepage: one immediate, playable Rummy turn. */
.quick-play-section {
  background:
    radial-gradient(circle at 16% 8%, rgba(115, 38, 107, .32), transparent 34rem),
    radial-gradient(circle at 86% 86%, rgba(38, 148, 93, .16), transparent 28rem),
    #10051f;
}

.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: #f2bd43; }
.quick-play-intro h2 { max-width: 800px; margin: 13px 0 0; color: #fff5df; 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: #b9afc1; font-size: 16px; line-height: 1.72; }
.quick-play-intro p strong { color: #f7ca61; }

.quick-table { overflow: hidden; border: 1px solid rgba(242, 189, 85, .5); border-radius: 28px; background: #0b251b; box-shadow: 0 32px 100px rgba(3, 0, 12, .5), inset 0 1px rgba(255,255,255,.06); }
.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: #d9ccdb; background: #1c0a30; }
.quick-table-bar { border-bottom: 1px solid rgba(242,189,85,.3); }
.quick-table-brand { display: flex; align-items: center; gap: 8px; }
.quick-table-brand strong { color: #fff3d6; font: 800 11px/1 Arial, sans-serif; letter-spacing: .16em; }
.quick-table-brand small { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.18); color: #8ee0b0; 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 rgba(101,225,159,.1), 0 0 14px rgba(101,225,159,.7); }
.quick-turn-steps { display: flex; align-items: center; gap: 8px; }
.quick-turn-steps span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #746b7b; font-size: 9px; font-weight: 800; letter-spacing: .04em; transition: color .2s, border-color .2s, background .2s; }
.quick-turn-steps span.active { color: #281909; border-color: #f4ca67; background: #f4c85d; }
.quick-turn-steps span.done { color: #76dba7; border-color: rgba(83,210,145,.32); background: rgba(42,151,100,.1); }

.quick-felt { position: relative; min-height: 570px; padding: 24px 28px 28px; background: radial-gradient(ellipse at 50% 32%, #176c49 0, #0a4934 46%, #062f24 78%, #041f18 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(rgba(255,255,255,.5) .45px, transparent .65px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.quick-felt::after { content: "JUNGLEE RUMMY"; position: absolute; left: 50%; top: 31%; translate: -50% -50%; color: rgba(255,238,188,.065); 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: #c2d0c5; }
.quick-opponent > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(247,203,101,.7); border-radius: 50%; color: #f5ce6b; background: #20102d; 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: #a9bcae; 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 #f4c551; color: #fff1c2; background: repeating-linear-gradient(45deg, #35104b, #35104b 5px, #260936 5px, #260936 10px); box-shadow: 7px 5px 0 #ddd4c4, 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: #f3bf42; 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 rgba(255,227,157,.28); border-radius: 999px; color: #d7e2d9; background: rgba(2, 30, 21, .72); 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: #241405; 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: #ffe08d; }

.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: #b8c8bb; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.quick-hand-label small { color: #8fa696; 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 #ffd969; 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 rgba(105,228,164,.52); border-radius: 16px; color: #e8fff2; background: rgba(5, 56, 37, .92); 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: #07301e; 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: #a8ceb8; 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 rgba(255,255,255,.18); border-radius: 10px; color: #d9eee2; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.quick-win-actions a { color: #241405; border-color: #f5d071; background: #f4c85d; }
.quick-table-footer { border-top: 1px solid rgba(255,255,255,.08); color: #8e8295; font-size: 9px; letter-spacing: .04em; }
.quick-table-footer a { color: #dfb95e; }

@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 #ffd969; outline-offset: 3px; }
}