/* Practice shares the Field Guide palette, but has its own compact playing surface. */
[hidden]{display:none!important}body[data-page=practice] nav [data-nav=practice]{color:var(--gold)}
.practice-shell{max-width:1250px;margin:auto;padding:42px 5% 70px}.practice-heading{display:flex;gap:24px;justify-content:space-between;align-items:end;margin-bottom:30px}.practice-heading h1{font:clamp(40px,4.5vw,65px)/1.05 var(--serif);letter-spacing:-2px;margin-top:14px}.practice-heading em{color:var(--gold);font-weight:400}.practice-tag{font-size:9px;letter-spacing:1.4px;color:var(--muted);padding-bottom:9px}.practice-shell button,.practice-shell select{min-height:44px;cursor:pointer}.practice-shell button:disabled{cursor:default;opacity:.45}.practice-shell :focus-visible{outline:3px solid #e8ca88;outline-offset:4px}.practice-shell select{color:var(--ink);background:var(--bg);border:1px solid #6b7c67;border-radius:5px;padding:12px;max-width:100%;font:14px var(--sans)}.small-note{font-size:12px;line-height:1.7;color:#b3c1b2;margin:10px 0}.practice-setup{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding:40px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(ellipse at 90% 50%,#263e2b 0,transparent 65%),var(--surface)}.setup-copy h2{font:44px/1.08 var(--serif);letter-spacing:-1px;margin:15px 0 20px}.setup-copy>p{max-width:450px}.setup-rules{margin:24px 0 28px;display:grid;gap:16px}.setup-rules p{display:flex;align-items:start;gap:14px;font-size:13px;line-height:1.6}.setup-rules b{font:21px var(--serif);color:var(--gold)}.setup-rules strong{color:var(--ink)}.difficulty-label{display:block;font-size:12px;margin-bottom:9px;color:var(--gold)}#difficulty{width:100%}.setup-copy .actions{margin:22px 0 15px}.setup-art{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}.setup-card{position:absolute;width:61%;height:auto;aspect-ratio:5/7;object-fit:contain;transform:rotate(-8deg);z-index:1;filter:drop-shadow(0 20px 18px #0007)}.setup-card.behind{transform:translate(22%,-5%) rotate(13deg);z-index:0;opacity:.8}.setup-art .art-star{position:absolute;top:20px;right:20px;color:var(--gold);font-size:44px}.setup-caption{position:absolute;bottom:0;font-size:9px;letter-spacing:2px;color:var(--gold)}.onboarding{display:flex;gap:20px;align-items:center;justify-content:space-between;background:#293b2c;border:1px solid #5a6f46;border-radius:8px;padding:15px 20px;margin-bottom:22px;font-size:13px}.onboarding p{line-height:1.6}.onboarding a{color:var(--gold);white-space:nowrap}.onboarding button{flex-shrink:0;color:var(--gold);background:transparent;border:1px solid #6d805c;border-radius:5px;padding:8px 15px}.match-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 24px;margin-bottom:24px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.score{display:flex;gap:20px;align-items:center;color:#c5e0b9}.score.computer{color:#ead1a6;flex-direction:row-reverse}.score span{font-size:10px;font-weight:700;letter-spacing:1.1px}.score strong{font:40px var(--serif)}.match-center{text-align:center}.match-center p{font-size:15px;color:var(--ink);font-weight:600}.match-center span{font-size:10px;color:var(--muted)}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:start}.section-label{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}.section-label h2{font:24px var(--serif);letter-spacing:-.3px}.section-label>span,.section-label h2 span{font:11px var(--sans);color:var(--muted)}.practice-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:10px;background:#0c1612;border:1px solid #42553e;border-radius:10px}.board-square{position:relative;min-width:0;aspect-ratio:.9;border:1px dashed #40533f;border-radius:6px;background:#17261d;color:var(--muted);padding:7px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px;font-family:var(--sans)}.board-square .slot-label{align-self:start;font-size:9px;z-index:1;background:#0c1612df;border-radius:3px;padding:2px 4px}.board-square.empty .empty-mark{font:30px var(--serif);opacity:.4}.board-square.empty .square-name{font-size:10px}.board-square img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;pointer-events:none}.board-square.owned-0{border:2px solid #91b478;color:#d4e7c6}.board-square.owned-1{border:2px solid #b79765;color:#efdab7}.board-square.rock .rock-symbol{font:34px var(--serif);color:var(--gold)}.board-square.legal{border:2px solid #dcd291;box-shadow:inset 0 0 22px #afc47522;cursor:pointer}.board-square.destination{outline:3px solid var(--gold);outline-offset:1px}.board-square.will-capture{border:3px dashed #e8d18a;box-shadow:inset 0 0 25px #cfc06644}.square-name{font-size:11px;font-weight:700;line-height:1.2;z-index:1;max-width:100%;overflow-wrap:anywhere;text-align:center;text-shadow:0 1px 2px #000}.square-owner{font-size:9px;letter-spacing:.5px;z-index:1}.edges{display:grid;grid-template-areas:'. top .' 'left level right' '. bottom .';grid-template-columns:1fr 1fr 1fr;align-items:center;justify-items:center;gap:1px;min-width:90%;z-index:1;line-height:1;font-weight:700;color:#fff5dc;text-shadow:0 1px 3px #000}.edge-top{grid-area:top}.edge-right{grid-area:right}.edge-bottom{grid-area:bottom}.edge-left{grid-area:left}.edge-level{grid-area:level;font-size:9px;color:#dfd7b8;font-weight:400}.board-square .edges{font-size:21px}.edge-top::before{content:'↑';font-size:9px;padding-right:2px}.edge-right::after{content:'→';font-size:9px;padding-left:2px}.edge-bottom::before{content:'↓';font-size:9px;padding-right:2px}.edge-left::before{content:'←';font-size:9px;padding-right:2px}.move-tray{margin:15px 0 10px;padding:16px;border:1px solid var(--line);border-radius:7px;background:var(--surface);min-height:143px}.move-tray p{font-size:13px;line-height:1.5}.move-tray #preview-note{font-size:12px;color:var(--gold);margin:6px 0 12px}.move-tray .button{width:100%;padding:10px 12px}.match-tools{display:flex;gap:8px}.match-tools .button{flex:1;padding:9px 8px;font-size:12px;justify-content:center}.hand-mode{display:flex;border:1px solid #536449;border-radius:6px;padding:4px;gap:4px}.hand-mode button{flex:1;background:transparent;color:var(--ink);border:0;border-radius:3px;font-size:12px;padding:8px}.hand-mode button[aria-pressed=true]{background:var(--gold);color:var(--bg);font-weight:700}.practice-hand{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.hand-card{padding:7px;min-width:0;border:1px solid #526246;border-radius:6px;background:#18281e;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px;font:11px var(--sans);text-align:center;position:relative}.hand-card[aria-pressed=true]{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:1px;background:#304332}.hand-card.unplayable{border-style:dashed}.hand-card img{width:100%;height:auto;aspect-ratio:5/7;object-fit:contain;border-radius:3px;max-height:72px}.hand-card .hand-name{font-size:11px;line-height:1.2;min-height:27px;display:flex;align-items:center;justify-content:center}.hand-card .hand-level{color:var(--gold);font-size:9px}.hand-card .edges{font-size:14px;margin:2px 0}.hand-card .edge-level{font-size:8px}.selected-detail{padding:14px 0;color:var(--muted);font-size:12px;line-height:1.7;min-height:80px}.selected-detail strong{color:var(--ink);font-size:14px}.selected-detail a{color:var(--gold)}.result{background:#30432c;border:1px solid #a6b775;padding:24px;text-align:center;border-radius:8px;margin-bottom:24px}.result h2{font:36px var(--serif);color:var(--gold);margin-bottom:10px}.result p{margin-bottom:16px}.result .button{margin:auto}.log-panel,.practice-about,#board-details{padding:18px 0;border-top:1px solid var(--line);margin-top:20px;font-size:13px}.practice-shell summary{cursor:pointer;min-height:35px;color:var(--gold)}.log-panel ol{max-height:225px;overflow:auto;padding-left:25px;scrollbar-color:#6a7a54 var(--bg)}.log-panel li{font-size:12px;line-height:1.6;padding:5px 0 5px 5px;color:var(--muted)}.log-panel li:last-child{color:var(--ink)}.practice-about{margin-top:40px;max-width:850px}.practice-about p{font-size:13px;margin:10px 0;line-height:1.8}#board-details select{margin:5px 0 10px 12px}#square-detail{font-size:12px;line-height:1.7}.practice-shell .art-missing{display:none}.practice-shell .button{font-family:var(--sans)}
@media(max-width:1000px){.practice-setup{gap:25px;padding:28px}.setup-copy h2{font-size:36px}.play-layout{gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}.practice-hand{grid-template-columns:repeat(3,minmax(0,1fr))}.practice-tag{display:none}.score{gap:10px}.hand-card img{max-height:88px}.board-square .edges{font-size:19px}}
@media(max-width:720px){.practice-shell{padding:28px 4% 45px}.practice-heading{margin-bottom:22px}.practice-heading h1{font-size:43px}.practice-heading .eyebrow{font-size:8px;letter-spacing:1.6px}.practice-setup{display:block;padding:24px 20px}.setup-copy h2{font-size:36px}.setup-art{display:none}.setup-copy .actions{flex-wrap:wrap}.setup-copy .actions .button{flex:1;white-space:nowrap;padding:12px}.play-layout{grid-template-columns:1fr;gap:24px}.practice-board{max-width:480px;margin:auto;gap:7px;padding:8px}.board-square{aspect-ratio:.94;gap:3px;padding:5px}.board-square .edges{font-size:21px}.square-name{font-size:10px}.square-owner{font-size:8px}.match-bar{padding:12px 10px;gap:8px;margin-bottom:20px}.score{flex-direction:column!important;gap:2px}.score strong{font-size:30px}.score span{font-size:8px;letter-spacing:.5px}.match-center p{font-size:13px}.match-center span{font-size:9px}.onboarding{padding:12px;font-size:12px;gap:8px;align-items:start}.onboarding button{padding:8px;min-width:55px}.onboarding a{white-space:normal}.section-label h2{font-size:23px}.practice-hand{display:grid;grid-template-columns:none;grid-template-rows:1fr;grid-auto-flow:column;grid-auto-columns:105px;gap:10px;overflow-x:auto;padding:5px 4px 14px;scroll-snap-type:x proximity;scrollbar-color:#6a7a54 var(--bg)}.hand-card{scroll-snap-align:start;min-height:160px}.hand-card img{max-height:68px}.hand-card .edges{font-size:15px}.hand-card .hand-name{font-size:11px}.hand-section{min-width:0}.move-tray{min-height:125px}.hand-mode{max-width:480px}.selected-detail{padding-bottom:0}.log-panel{margin-top:26px}#board-details{margin-top:12px}.practice-shell #storage-note:empty{display:none}}
@media(max-width:360px){.practice-shell{padding-left:3%;padding-right:3%}.board-square .edges{font-size:18px}.square-name{font-size:9px}.board-square .slot-label{font-size:8px}.match-tools .button{font-size:11px}.onboarding{font-size:11px}.score span{font-size:7px}}

/* Keep the playing table compact, with clear feedback that lasts until the next move. */
.playing .practice-heading{display:none}.playing .practice-shell{padding-top:24px}
.practice-shell #storage-note:empty{display:none}
.play-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"board hand" "controls hand";gap:0 28px}
.board-section{grid-area:board}.hand-section{grid-area:hand;min-width:0}.controls-section{grid-area:controls;min-width:0}
.match-bar{margin-bottom:20px}.practice-board{box-shadow:0 12px 35px #0003;background:radial-gradient(ellipse at center,#233a29,#0c1612)}
.board-square img{opacity:.6}.board-square .edges{gap:3px;font-size:22px}
.board-square .edges>span:not(.edge-level){background:#102018ee;border:1px solid #81936e77;border-radius:4px;min-width:25px;padding:3px}
.board-square .edge-level{background:#102018ee;padding:4px;border-radius:50%;font-weight:700;font-size:12px}
.board-square .square-name{background:#102018e8;padding:3px 5px;border-radius:3px;width:100%;font-size:11px}
.board-square .square-owner{background:#102018ee;padding:3px 5px;border-radius:3px;font-weight:700}
.board-square .slot-label{font-size:8px;max-width:56%;min-height:17px}
.move-marker{position:absolute;top:7px;right:5px;font:700 7px var(--sans);letter-spacing:.2px;padding:3px;background:#d9c58c;color:#102018;border-radius:3px;z-index:2}
.board-square.just-captured{box-shadow:inset 0 0 0 2px #ead8a6}.board-square.just-played{border-style:double;border-width:3px}
.board-square.will-capture{outline:2px dashed #e8d18a;outline-offset:-5px}
.last-action{min-height:44px;margin:10px 0 0;padding:10px 12px;border-left:2px solid var(--gold);background:#1e2e22;font-size:12px;line-height:1.6;color:#e2dcc3}
.move-tray{margin-top:10px;min-height:125px}.hand-card .edges{font-size:16px}.hand-card .hand-name{min-height:27px;color:#f0ead7;font-weight:500}
.hand-card{gap:4px;background:linear-gradient(145deg,#243526,#16251c)}.hand-card.unplayable{border-color:#637054}.hand-card[aria-pressed=true]::after{content:'SELECTED';position:absolute;top:5px;left:5px;background:var(--gold);color:var(--bg);padding:3px;font-size:7px;font-weight:700;border-radius:2px}
.hand-card .hand-level{font-size:10px}.hand-card img{filter:drop-shadow(0 3px 4px #0005)}
@media(min-width:721px) and (max-width:1000px){.practice-hand{grid-template-columns:repeat(4,minmax(0,1fr))}.play-layout{gap:0 20px}.hand-card img{max-height:65px}}
@media(max-width:720px){.playing .practice-shell{padding-top:16px}.play-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"board" "hand" "controls";gap:18px}.board-square{aspect-ratio:1}.board-square .edges{font-size:20px;gap:1px}.board-square .edges>span:not(.edge-level){padding:2px;min-width:23px}.board-square .square-name{font-size:9px;padding:2px}.board-square .square-owner{font-size:7px;padding:2px}.board-square .slot-label{font-size:7px;padding:2px}.move-marker{top:5px;right:3px;font-size:6px;padding:3px 2px}.hand-card img{max-height:64px}.practice-hand{grid-template-columns:none;grid-auto-columns:112px}.hand-mode{max-width:none}.selected-detail{min-height:0;padding:8px 0 0}.last-action{min-height:0}.move-tray{margin-top:0}.match-tools .button{min-height:44px}.onboarding{margin-bottom:14px}}
@media(max-width:360px){.board-square .edges{font-size:17px}.board-square .edges>span:not(.edge-level){min-width:20px;padding:1px}.board-square .square-name{font-size:8px}.board-square .slot-label{max-width:51%}.move-marker{font-size:5px}.board-square .edge-level{font-size:10px;padding:2px}}

/* Ownership remains visible through artwork, selection, and capture previews. */
.practice-shell{--player-color:#62d7ff;--opponent-color:#ff927e}
.score.human{color:var(--player-color)}
.score.computer{color:var(--opponent-color)}
.score>span{border-bottom:3px solid currentColor;padding-bottom:5px}
.board-square{aspect-ratio:.9;padding:6px;gap:0;border-width:3px}
.board-square.owned-0{--owner-color:var(--player-color);--owner-bg:#074663}
.board-square.owned-1{--owner-color:var(--opponent-color);--owner-bg:#783327}
.board-square:is(.owned-0,.owned-1){border:3px solid var(--owner-color);background:var(--owner-bg);color:#fff;box-shadow:inset 0 0 0 1px #ffffff24}
.board-square img{opacity:.3}
.board-square .slot-label{position:absolute;top:5px;left:5px;min-height:0;max-width:none;padding:2px 4px;font-size:9px;line-height:1;background:#07171ed9;color:#fff}
.board-square .square-owner{position:absolute;bottom:0;left:0;right:0;background:var(--owner-color);color:#10212b;border-radius:0;padding:5px 2px;font-size:9px;line-height:1;font-weight:800;letter-spacing:.6px;text-shadow:none}
.board-square .edges{position:absolute;inset:21px 4px 24px;min-width:0;grid-template-columns:1fr 1.4fr 1fr;grid-template-rows:1fr 1.4fr 1fr;gap:0;font-size:21px;color:#fff;text-shadow:none}
.board-square .edges>span:not(.edge-level){min-width:24px;border:0;border-radius:4px;padding:2px;background:#081c25e8;line-height:1}
.board-square .edges>span::before,.board-square .edges>span::after{content:none}
.board-square .edge-level{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:40px;min-height:40px;padding:3px;border:1px solid var(--owner-color);border-radius:6px;background:#081c25f5;color:#fff;font:700 25px/1 var(--serif)}
.level-caption{font:700 7px/1 var(--sans);letter-spacing:1px;color:var(--owner-color)}
.board-square.rock .rock-symbol{position:absolute;top:50%;left:50%;transform:translate(-50%,-65%);font:700 34px/1 var(--serif);color:#fff;z-index:1}
.rock-caption{position:absolute;bottom:27px;left:0;right:0;font-size:8px;font-weight:700;letter-spacing:.6px;color:#fff}
.board-square.empty{justify-content:center;gap:8px;background:#12221a}
.board-square.empty .square-name{width:auto;background:none;color:#acbdaf}
.board-square.legal{border-style:dashed;box-shadow:inset 0 0 0 2px #fff8}
.board-square.empty.legal{border-color:#f2d58d;background:#333a25}
.board-square.destination{outline:3px solid #fff0b5;outline-offset:2px}
.board-square.will-capture{border-color:var(--owner-color);outline:2px dashed #fff0b5;outline-offset:-7px}
.board-square.just-captured{box-shadow:inset 0 0 0 2px #fff7}
.move-marker{top:5px;right:4px;font-size:6px;letter-spacing:0;padding:3px;z-index:2}
@media(max-width:720px){
 .board-square{aspect-ratio:.9}
 .board-square .edges{font-size:19px}
 .board-square .square-owner{font-size:8px}
 .board-square .edge-level{font-size:23px;min-width:36px;min-height:36px}
}
@media(max-width:360px){
 .board-square{aspect-ratio:.82}
 .board-square .edges{inset:19px 2px 23px;font-size:16px}
 .board-square .edges>span:not(.edge-level){min-width:18px;padding:2px}
 .board-square .edge-level{font-size:20px;min-width:30px;min-height:33px;padding:2px}
 .board-square .square-owner{font-size:7px;letter-spacing:.2px}
 .board-square .slot-label{font-size:8px;top:4px;left:3px}
 .level-caption{font-size:6px;letter-spacing:.5px}
 .move-marker{font-size:5px;right:2px}
}