/* Keep the navigation space so entering a trial does not resize the board. */
body.four-symbols-active [data-role="main-navigation"] { visibility:hidden; pointer-events:none; }
[data-four-symbols-host] { color:#223d32; }
[data-four-symbols-host] .four-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
[data-four-symbols-host] .four-header h2 { margin:0; white-space:nowrap; }
[data-four-symbols-host] .four-status { min-height:20px; margin:4px 0; font-size:13px; }
[data-four-symbols-host] .four-hud { display:flex; justify-content:space-between; align-items:center; padding:8px 2px; }
[data-four-symbols-host] .four-score { font-size:24px; color:#71511b; font-variant-numeric:tabular-nums; }
[data-four-symbols-host] .four-lives { color:#a33730; font-size:24px; letter-spacing:3px; }
[data-four-symbols-host] .four-board-wrap { position:relative; isolation:isolate; }
[data-four-symbols-host] .four-board { position:relative; width:100%; height:var(--four-board-height,660px); overflow:hidden; background:#182722; border:2px solid #6e8870; box-sizing:content-box; border-left:0; border-right:0; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
[data-four-symbols-host] .four-row { position:absolute; inset:0 0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); height:var(--four-row-height,132px); will-change:transform; }
[data-four-symbols-host] .four-cell { display:flex; align-items:center; justify-content:center; box-sizing:border-box; border:1px solid #455348; background:#19201e; color:#566459; font-size:19px; cursor:pointer; touch-action:none; }
[data-four-symbols-host] .four-cell[data-kind="correct"] { background:linear-gradient(145deg,#f1d989,#71c2a2); color:#153c30; box-shadow:inset 0 0 16px #fff8ba88; font-size:32px; font-weight:bold; }
[data-four-symbols-host] .four-cell[data-cell-state="CONSUMED"] { background:#30483f; color:#91b7a2; box-shadow:none; }
[data-four-symbols-host] .four-cell[data-cell-state="TRIGGERED"] { background:#692c2b; color:#ffd0b6; }
[data-four-symbols-host] .four-cell[data-cell-state="CONSUMED"] > span { animation:four-hit var(--four-feedback-duration,180ms) ease-out; }
[data-four-symbols-host] .four-mask { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; text-align:center; color:#e7e7d7; background:#101a16ed; z-index:2; }
[data-four-symbols-host] .four-mask[hidden], [data-four-symbols-host] [hidden] { display:none!important; }
[data-four-symbols-host] .four-mask h3 { font-size:26px; color:#f0da9e; margin:0; }
[data-four-symbols-host] .four-mask p { margin:0; line-height:1.6; }
[data-four-symbols-host] .four-mask .four-countdown { font-size:72px; color:#f2dea0; }
[data-four-symbols-host] .four-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:12px 0; }
[data-four-symbols-host] button { min-height:40px; padding:7px 16px; border:1px solid #829878; border-radius:5px; background:#253d32; color:#f3ead0; cursor:pointer; font:inherit; }
[data-four-symbols-host] button:disabled { opacity:.5; cursor:default; }
@keyframes four-hit { from { transform:scale(1.2); opacity:1; } to { transform:scale(1); opacity:.65; } }

[data-four-symbols-host] .four-header { min-height:44px; }
[data-four-symbols-host] .four-time { flex:1; white-space:nowrap; font-size:16px; font-variant-numeric:tabular-nums; }

/* Phase 2.5: paint only. Keep the approved board/cell geometry and hit areas. */
[data-four-symbols-host] { --four-gold:var(--jade-gold,#d7b875); --four-ink:var(--jade-ink,#23413f); font-family:KaiTi,STKaiti,"Noto Serif SC","Songti SC",SimSun,serif; }
[data-four-symbols-host] .four-header h2 { color:var(--four-ink); font-size:24px; text-shadow:0 1px #f6e3af; }
[data-four-symbols-host] .four-time { color:var(--jade-muted,#536a61); font-size:15px; }
[data-four-symbols-host] .four-score { color:#705126; font-size:24px; }
[data-four-symbols-host] .four-lives { display:flex; align-items:center; gap:10px; height:28px; }
[data-four-symbols-host] .four-life { display:block; position:relative; width:18px; height:23px; border:1px solid #657e65; border-radius:7px 7px 9px 9px; background:linear-gradient(140deg,#e5edc2,#76a690 48%,#345e54); box-shadow:inset 0 0 0 2px #e5d69c88,0 1px 3px #23413f33; }
[data-four-symbols-host] .four-life::after { content:""; position:absolute; inset:6px; border:1px solid #eff2cd; transform:rotate(45deg); }
[data-four-symbols-host] .four-life.is-spent { background:#686568; border-color:#796568; opacity:.65; box-shadow:inset 0 0 0 2px #b6aeaa44; }
[data-four-symbols-host] .four-life.is-spent::after { border-color:#454e48; border-top-color:transparent; }
[data-four-symbols-host] .four-board-wrap { box-shadow:0 0 0 1px #ad9663,0 0 0 3px #244940; }
[data-four-symbols-host] .four-board-wrap::before { content:""; position:absolute; inset:4px; z-index:3; pointer-events:none; border:1px solid #d7b87577; clip-path:polygon(0 0,24px 0,24px 1px,1px 1px,1px 24px,0 24px,0 0,100% 0,100% 24px,calc(100% - 1px) 24px,calc(100% - 1px) 1px,calc(100% - 24px) 1px,calc(100% - 24px) 0,100% 0,100% 100%,calc(100% - 24px) 100%,calc(100% - 24px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 24px),100% calc(100% - 24px),100% 100%,0 100%,0 calc(100% - 24px),1px calc(100% - 24px),1px calc(100% - 1px),24px calc(100% - 1px),24px 100%,0 100%); }
[data-four-symbols-host] .four-board { border-color:#a18b5d; background:#183c3d url('../assets/images/four-symbols-trial/quiet-stone.webp') center/256px 256px; }
[data-four-symbols-host] .four-cell { position:relative; overflow:hidden; border-color:#365250; background:#183c3d url('../assets/images/four-symbols-trial/quiet-stone.webp') center/cover; color:#718071; }
[data-four-symbols-host] .four-cell > span { position:relative; z-index:1; pointer-events:none; }
[data-four-symbols-host] .four-cell[data-kind="correct"] { background:linear-gradient(145deg,#f0dda1,#c4ddbf); color:#204c41; box-shadow:inset 0 0 0 2px #d7b875; text-shadow:none; font-size:24px; }
/* Each target owns one fixed skin. Only the row transform animates during play. */
[data-four-symbols-host] .four-cell[data-art-ready]::before { content:""; position:absolute; inset:0; background:var(--four-tile-image) center/100% 100% no-repeat; pointer-events:none; }
[data-four-symbols-host] .four-cell[data-cell-state="CONSUMED"] { background:#183c3d; color:#829b8b; box-shadow:none; text-shadow:none; }
[data-four-symbols-host] .four-cell[data-cell-state="CONSUMED"]::before { opacity:.12; filter:grayscale(1); }
[data-four-symbols-host] .four-cell[data-cell-state="CONSUMED"]::after { content:""; position:absolute; inset:0; background:#f4ebbd; pointer-events:none; opacity:0; animation:four-flash var(--four-feedback-duration,180ms) ease-out; }
[data-four-symbols-host] .four-cell[data-cell-state="TRIGGERED"] { background:#593734; color:#e2a18a; text-shadow:none; }
[data-four-symbols-host] .four-cell[data-cell-state="TRIGGERED"] > span { animation:four-seal-break var(--four-feedback-duration,180ms) ease-out; }
[data-four-symbols-host] .four-mask { background:#102d2b99; }
[data-four-symbols-host] .four-mask[data-presentation="ready"], [data-four-symbols-host] .four-mask[data-presentation="countdown"] { background:transparent; }
[data-four-symbols-host] .four-dialog { box-sizing:border-box; width:min(100%,330px); padding:28px 20px 18px; border:1px solid var(--jade-line,#a99e7b); border-radius:6px; color:var(--four-ink); background:var(--jade-card,linear-gradient(135deg,#f5efde,#e4eadc)); box-shadow:inset 0 0 0 3px #fff8e773,0 5px 20px #102e3744; }
[data-four-symbols-host] .four-dialog h3 { color:var(--four-ink); font-size:26px; margin-bottom:20px; }
[data-four-symbols-host] .four-result-label { color:#536a61; }
[data-four-symbols-host] .four-result-score { display:block; font-size:52px; line-height:1.3; font-weight:normal; color:#785827; font-variant-numeric:tabular-nums; }
[data-four-symbols-host] .four-mask .four-countdown { font-family:Georgia,serif; font-size:80px; color:#e4d19a; text-shadow:0 0 16px #b5d3a855; animation:four-count-in 900ms ease-out both; }
/* Existing button classes pick up the shared jade skin in the main game.
   These scoped defaults give the isolated test host the same palette. */
[data-four-symbols-host] .primary-button { background:var(--jade-selected,linear-gradient(135deg,#286265,#19434a)); border-color:#bda063; color:#fff0c9; box-shadow:inset 0 0 0 2px #d1b77829,0 2px 4px #163e4026; }
[data-four-symbols-host] .secondary-button { background:linear-gradient(#f5f1e4,#dbe6d9); border-color:#8faaa0; color:#284c49; box-shadow:inset 0 0 0 2px #fffbed66; }
[data-four-symbols-host] .four-mask[data-presentation="ready"] .primary-button { min-width:164px; min-height:48px; }
[data-four-symbols-host]:is([data-round-state="PAUSED"],[data-round-state="COUNTDOWN"]) .four-cell *, [data-four-symbols-host]:is([data-round-state="PAUSED"],[data-round-state="COUNTDOWN"]) .four-cell::after { animation-play-state:paused; }
@keyframes four-flash { from { opacity:.55; } to { opacity:0; } }
@keyframes four-seal-break { 0%,100% { transform:translateX(0); } 30% { transform:translateX(-2px); } 65% { transform:translateX(2px); } }
@keyframes four-count-in { 0% { opacity:0; transform:scale(1.12); } 20%,70% { opacity:1; } 100% { opacity:.65; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
  [data-four-symbols-host] *, [data-four-symbols-host] *::after { animation:none!important; }
}

/* Phase 4: activity-only ranking view; board geometry/paint stay unchanged. */
[data-four-symbols-host] .four-result-actions [data-four-start] { flex-basis:100%; }
[data-four-symbols-host] .four-leaderboard { height:748px; display:flex; flex-direction:column; gap:8px; color:var(--four-ink); }
[data-four-symbols-host] .four-leaderboard-header, [data-four-symbols-host] .four-leaderboard-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
[data-four-symbols-host] .four-leaderboard-header h2 { margin:0; font-size:22px; }
[data-four-symbols-host] .four-leaderboard-toolbar { font-size:16px; color:var(--jade-muted,#536a61); }
[data-four-symbols-host] .four-leaderboard-status { margin:0; font-size:16px; }
[data-four-symbols-host] .four-leaderboard-status:empty { display:none; }
[data-four-symbols-host] .four-leaderboard-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; border:1px solid var(--jade-line,#a99e7b); background:var(--jade-card,linear-gradient(135deg,#f5efde,#e4eadc)); }
[data-four-symbols-host] .four-leaderboard table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:16px; }
[data-four-symbols-host] .four-leaderboard caption { padding:6px; text-align:left; color:var(--jade-muted,#536a61); }
[data-four-symbols-host] .four-leaderboard th { background:#dce5d7; position:sticky; top:0; z-index:1; font-weight:normal; }
[data-four-symbols-host] .four-leaderboard td, [data-four-symbols-host] .four-leaderboard th { padding:10px 5px; border-bottom:1px solid #a99e7b55; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
[data-four-symbols-host] .four-leaderboard :is(td,th):first-child { width:14%; }
[data-four-symbols-host] .four-leaderboard :is(td,th):nth-child(2) { width:34%; }
[data-four-symbols-host] .four-leaderboard :is(td,th):nth-child(3) { width:28%; }
[data-four-symbols-host] .four-leaderboard :is(td,th):last-child { width:24%; text-align:right; font-variant-numeric:tabular-nums; }
[data-four-symbols-host] .four-leaderboard tr[data-medal="1"] td:first-child { color:#89621f; font-weight:bold; }
[data-four-symbols-host] .four-leaderboard tr[data-medal="2"] td:first-child { color:#536b72; font-weight:bold; }
[data-four-symbols-host] .four-leaderboard tr[data-medal="3"] td:first-child { color:#895738; font-weight:bold; }
[data-four-symbols-host] .four-leaderboard tr[data-self] { background:#bfd8c3; box-shadow:inset 3px 0 #557b63; }
[data-four-symbols-host] .four-leaderboard-self { flex:none; padding:10px 8px; border:1px solid var(--jade-line,#a99e7b); background:var(--jade-card,linear-gradient(135deg,#f5efde,#e4eadc)); }
[data-four-symbols-host] .four-leaderboard-self strong { display:block; margin-bottom:6px; font-size:16px; font-weight:normal; }
.four-rewards-list { overflow-y:auto; min-height:0; flex:1; padding:0 12px 16px; }
.four-reward-tier { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 6px; border-bottom:1px solid rgba(191,164,97,.3); }
.four-reward-tier > div { min-width:0; }
.four-reward-tier p { margin:7px 0 0; line-height:1.6; font-size:12px; overflow-wrap:anywhere; opacity:.8; }
.four-reward-tier button { flex-shrink:0; min-width:70px; }
.four-rewards [data-four-rewards-status] { padding:0 16px; }
/* Local review: quieter ranking layout, with a persistent personal rank. */
[data-four-symbols-host] .four-leaderboard { height:814px; gap:16px; }
[data-four-symbols-host] .four-leaderboard-header { padding:4px 0 12px; border-bottom:1px solid #a99e7b66; }
[data-four-symbols-host] .four-leaderboard-scroll { border-radius:6px; }
[data-four-symbols-host] .four-leaderboard caption { padding:10px 12px; font-size:13px; }
[data-four-symbols-host] .four-leaderboard td, [data-four-symbols-host] .four-leaderboard th { padding:14px 8px; }
[data-four-symbols-host] .four-leaderboard-self { padding:14px 10px; border-radius:6px; }
/* Use the space previously reserved for the bottom navigation. */
body.four-symbols-active #game-root[data-active-page="fourSymbolsTrial"] .game-content { bottom:0; }
#game-root [data-four-symbols-host] .four-mask[data-presentation="ready"] [data-four-best] { color:#e4d19a; }
/* Compact review layout: text-only rewards and matching entry typography. */
[data-four-symbols-host] .four-leaderboard td, [data-four-symbols-host] .four-leaderboard th { padding:5px 8px; line-height:1.25; }
[data-four-symbols-host] .four-leaderboard-self { padding:7px 10px; }
[data-four-symbols-host] .four-leaderboard-self strong { margin-bottom:3px; font-size:14px; }
[data-four-symbols-host] .four-rewards .four-leaderboard-header { gap:8px; }
[data-four-symbols-host] .four-rewards .four-leaderboard-header h2 { font-size:20px; white-space:nowrap; }
[data-four-symbols-host] [data-four-rewards-best] { flex:1; font-size:15px; white-space:nowrap; }
[data-four-symbols-host] .four-rewards .four-leaderboard-header button { padding:6px 10px; }
[data-four-symbols-host] .four-rewards-list { padding:0; }
[data-four-symbols-host] .four-reward-group { border:1px solid #a99e7b; border-radius:6px; overflow:hidden; }
[data-four-symbols-host] .four-reward-group + .four-reward-group { margin-top:14px; }
[data-four-symbols-host] .four-reward-group-title { margin:0; padding:10px 12px; font-size:16px; line-height:1.4; color:#214e50; background:rgba(33,78,80,.08); border-bottom:1px solid #a99e7b66; }
[data-four-symbols-host] .four-reward-group .four-reward-tier:last-child { border-bottom:0; }
[data-four-symbols-host] .four-reward-tier { display:grid; grid-template-columns:65px minmax(0,1fr) 70px; gap:12px; padding:12px; }
[data-four-symbols-host] .four-reward-tier p { margin:0; font-size:14px; opacity:1; }
[data-four-symbols-host] .four-reward-tier button { min-width:0; padding:6px; }
[data-four-symbols-host] .four-reward-tier button:disabled { background:#b3bbb3; color:#59615b; border-color:#929e93; box-shadow:none; opacity:1; }
#game-root .home-activity-shortcut .home-activity-name { font-family:KaiTi,STKaiti,serif; font-size:16px; line-height:1.3; }

/* V1.1: fixed, non-interactive feedback surfaces. No particles or moving layout. */
[data-four-symbols-host] .four-board { -webkit-tap-highlight-color:transparent; }
[data-four-symbols-host] .four-hud { position:relative; }
[data-four-symbols-host] .four-milestone { position:absolute; left:95px; right:95px; top:4px; height:34px; line-height:34px; text-align:center; white-space:nowrap; font-size:26px; font-weight:bold; color:#fff0b7; background:linear-gradient(90deg,#214a43e8,#183f3ef5,#214a43e8); border:1px solid #d9bd78; border-radius:4px; box-shadow:0 0 7px #e4cd8a88; text-shadow:0 1px 2px #102d29; opacity:0; pointer-events:none; }
[data-four-symbols-host] .four-milestone[data-level="4"] { font-size:28px; color:#fff6d7; text-shadow:0 0 5px #f3db8f,0 1px 2px #102d29; }
[data-four-symbols-host] .four-feedback-danger, [data-four-symbols-host] .four-feedback-gold { position:absolute; inset:0; box-sizing:border-box; pointer-events:none; opacity:0; border:2px solid; background:none; }
[data-four-symbols-host] .four-feedback-danger { z-index:4; border-color:#B32632; box-shadow:0 0 12px rgba(220,50,65,.75),inset 0 0 7px rgba(110,15,25,.55); }
/* Broad feathered light: bright at the edges, transparent before the center. */
[data-four-symbols-host] .four-feedback-gold { --four-light-reach:21%; --four-light-peak:.68; z-index:3; border:0; box-shadow:none; background-image:linear-gradient(to right,rgba(255,235,166,var(--four-light-peak)),rgba(255,227,140,.3) 22%,rgba(227,234,166,.12) 55%,transparent),linear-gradient(to left,rgba(255,235,166,var(--four-light-peak)),rgba(255,227,140,.3) 22%,rgba(227,234,166,.12) 55%,transparent),linear-gradient(to bottom,rgba(255,235,166,var(--four-light-peak)),rgba(255,227,140,.3) 22%,rgba(227,234,166,.12) 55%,transparent),linear-gradient(to top,rgba(255,235,166,var(--four-light-peak)),rgba(255,227,140,.3) 22%,rgba(227,234,166,.12) 55%,transparent); background-size:var(--four-light-reach) 100%,var(--four-light-reach) 100%,100% var(--four-light-reach),100% var(--four-light-reach); background-position:left center,right center,center top,center bottom; background-repeat:no-repeat; }
[data-four-symbols-host] .four-feedback-gold[data-level="2"] { --four-light-reach:23%; --four-light-peak:.75; }
[data-four-symbols-host] .four-feedback-gold[data-level="3"] { --four-light-reach:25%; --four-light-peak:.82; }
[data-four-symbols-host] .four-feedback-gold[data-level="4"] { --four-light-reach:27%; --four-light-peak:.9; }
[data-four-symbols-host] .four-mask { z-index:5; }