/* Scoped Target Trail styles: safe to mount inside any CleverCay page. */
.cay-game { --cay-ink:#173e3e; --cay-teal:#087f7b; --cay-deep:#075f5d; --cay-mint:#ecf7ed; --cay-orange:#e68338; box-sizing:border-box; color:var(--cay-ink); font:inherit; background:#fff; border:1px solid #dfeae5; border-radius:26px; padding:28px; width:100%; }
.cay-game *, .cay-game *::before, .cay-game *::after { box-sizing:border-box; }
.cay-game button, .cay-game input { font:inherit; }
.cay-game button { cursor:pointer; color:var(--cay-ink); min-height:44px; border:1px solid #cadfd9; background:#fff; border-radius:12px; font-size:.86rem; font-weight:750; padding:10px 14px; transition:background .15s,transform .15s; }
.cay-game button:hover:not(:disabled) { background:#eaf5ef; transform:translateY(-1px); }
.cay-game button:active:not(:disabled) { transform:translateY(1px); }
.cay-game button:disabled { opacity:.48; cursor:default; }
.cay-game button:focus-visible, .cay-game input:focus-visible, .cay-game-board-wrap:focus-visible { outline:3px solid #e99736; outline-offset:4px; }
.cay-game-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cay-game-title-group { display:flex; align-items:center; gap:15px; }
.cay-game-mark { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; background:#e4f2dc; border-radius:19px; color:#08796b; font-size:42px; line-height:1; transform:rotate(-10deg); }
.cay-game .cay-game-eyebrow { margin:0 0 5px; letter-spacing:.15em; font-size:.63rem; font-weight:800; color:#596f63; }
.cay-game h2 { margin:0; color:var(--cay-ink); font-size:clamp(1.65rem,2.7vw,2.2rem); line-height:1.1; letter-spacing:-.04em; }
.cay-game .cay-game-tagline { margin:7px 0 0; color:#596f63; font-size:.83rem; }
.cay-game-reward { display:flex; gap:5px; align-items:center; flex-shrink:0; border:1px solid #f1dcc0; border-radius:30px; padding:9px 12px; background:#fff8e9; color:#8f6029; font-size:.7rem; }
.cay-game-reward > strong { font-size:.85rem; }
.cay-game-context { margin:20px 0 22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:.68rem; color:#5d7367; }
.cay-game-grade { padding:6px 10px; border-radius:7px; background:#f0f6f1; font-weight:750; color:#4a7561; }
.cay-game-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:26px; }
.cay-game-main { min-width:0; }
.cay-game-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:0 0 14px; }
.cay-game-stats > div { border:1px solid #e1e9df; background:#f7faf4; border-radius:13px; padding:12px 10px; text-align:center; }
.cay-game-stats > div:first-child { background:#0e7771; border-color:#0e7771; color:#fff; }
.cay-game-stats span { display:block; font-size:.65rem; font-weight:650; opacity:.9; margin-bottom:5px; }
.cay-game-stats strong { display:block; font-size:1.65rem; line-height:1.1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.cay-game-board-wrap { position:relative; isolation:isolate; overflow:hidden; border:7px solid #e5eddb; border-radius:22px; background:#d9e8c2; box-shadow:0 3px 0 #cfddc2; }
.cay-game-board { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); aspect-ratio:3/2; padding:9px; gap:3px; background:linear-gradient(145deg,#c8dfa7,#b6d38d); }
.cay-game-cell { min-width:0; min-height:0; display:flex; justify-content:center; align-items:center; border-radius:7px; background:#d8e7bc80; position:relative; }
.cay-game-cell-alt { background:#c7dda880; }
.cay-game-cell::before { content:''; position:absolute; width:9%; height:9%; border-radius:50%; background:#779b4b1a; top:20%; left:20%; }
.cay-game-cell-trail { background:#6ab8a0; border:2px solid #46a38e; box-shadow:inset 0 -3px 0 #51a78e; border-radius:36%; }
.cay-game-cell-head { background:#07867b; border:2px solid #046b63; box-shadow:inset 0 -3px 0 #046f66,0 2px 2px #4e783c30; border-radius:40% 43% 43% 40%; z-index:2; }
.cay-game-cell-head::before { display:none; }
.cay-game-eyes { position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; right:15%; top:18%; box-shadow:0 11px 0 #fff; }
.cay-game-eyes::after { content:''; position:absolute; width:4px; height:4px; background:#153c37; border-radius:50%; right:0; top:2px; box-shadow:0 11px 0 #153c37; }
.cay-game-cell-head[data-direction="left"] { transform:rotate(180deg); }
.cay-game-cell-head[data-direction="up"] { transform:rotate(-90deg); }
.cay-game-cell-head[data-direction="down"] { transform:rotate(90deg); }
.cay-game-cell-food { z-index:1; }
.cay-game-cell-food::before { display:none; }
.cay-game-cell-food > span { display:flex; align-items:center; justify-content:center; position:relative; min-width:90%; min-height:82%; padding:2px 1px; background:#fff5d8; border:2px solid #e99c49; border-radius:35%; color:#724a22; box-shadow:0 3px 0 #bd8f4233; font-weight:850; font-size:clamp(.55rem,1.1vw,.8rem); white-space:nowrap; }
.cay-game-cell-food > span::before { content:''; width:6px; height:4px; position:absolute; top:-5px; left:52%; background:#39805a; border-radius:6px 0; transform:rotate(-15deg); }
.cay-game-board-note { position:absolute; z-index:3; width:70%; max-width:270px; padding:17px 16px 19px; top:50%; left:50%; transform:translate(-50%,-50%); background:#fffffff2; backdrop-filter:blur(6px); border:1px solid #ffffff; border-radius:18px; box-shadow:0 10px 30px #416d3740; text-align:center; pointer-events:none; }
.cay-game-board-note[hidden] { display:none; }
.cay-game-note-symbol { display:block; color:#d28a32; font-size:25px; margin-bottom:5px; }
.cay-game-board-note > strong { display:block; font-size:1rem; color:#235e4f; }
.cay-game-board-note > span:last-child { display:block; font-size:.7rem; color:#6b7a70; margin-top:6px; line-height:1.5; }
.cay-game-board-caption { display:flex; align-items:center; justify-content:center; gap:7px; color:#5f7458; font-size:.66rem; margin-top:11px; }
.cay-game-board-caption > span { font-size:1rem; color:#7e9c62; }
.cay-game-equation-box { border:1px dashed #cbded0; border-radius:12px; background:#f8fbf7; padding:12px 15px; margin-top:15px; }
.cay-game-equation-box > span { color:#59704f; font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.cay-game-equation-box > p { margin:6px 0 0; font-size:.88rem; font-weight:700; line-height:1.6; overflow-wrap:anywhere; color:#385e4d; }
.cay-game-side { display:flex; flex-direction:column; gap:20px; padding-top:3px; }
.cay-game-section-label { display:block; color:#5d725d; font-size:.6rem; font-weight:850; letter-spacing:.13em; }
.cay-game h3 { margin:8px 0; font-size:1.12rem; line-height:1.25; letter-spacing:-.025em; }
.cay-game-side p { margin:6px 0 0; color:#5c705c; font-size:.75rem; line-height:1.6; }
.cay-game-buttons { display:flex; flex-direction:column; gap:9px; }
.cay-game button.cay-game-primary { background:var(--cay-teal); color:#fff; border-color:var(--cay-teal); min-height:47px; display:flex; align-items:center; justify-content:space-between; padding-left:17px; box-shadow:0 3px 0 #065e5b; }
.cay-game button.cay-game-primary:hover:not(:disabled) { background:var(--cay-deep); }
.cay-game-buttons > div { display:grid; grid-template-columns:.8fr 1.2fr; gap:7px; }
.cay-game-buttons > div button { font-size:.7rem; padding:8px; min-height:40px; }
.cay-game-steering { padding-top:17px; border-top:1px solid #e5ece3; }
.cay-game-dpad { display:grid; grid-template-columns:repeat(3,45px); grid-template-rows:repeat(3,44px); gap:5px; justify-content:center; margin:13px 0; }
.cay-game-dpad > button { padding:0; font-size:1.4rem; min-height:44px; background:#f0f6ed; border-color:#d7e4ce; border-radius:11px; touch-action:manipulation; }
.cay-game-dpad [data-direction="up"] { grid-column:2; grid-row:1; }
.cay-game-dpad [data-direction="left"] { grid-column:1; grid-row:2; }
.cay-game-dpad [data-direction="right"] { grid-column:3; grid-row:2; }
.cay-game-dpad [data-direction="down"] { grid-column:2; grid-row:3; }
.cay-game-dpad-center { grid-column:2; grid-row:2; display:grid; place-items:center; color:#cfb47f; font-size:1.2rem; }
.cay-game-cruise { display:flex; align-items:flex-start; gap:8px; font-size:.7rem; color:#456953; cursor:pointer; padding:9px; border-radius:9px; background:#f6f9f2; }
.cay-game-cruise input { accent-color:var(--cay-teal); margin:2px 0 0; width:15px; height:15px; flex:0 0 15px; }
.cay-game-cruise small { display:block; font-size:.6rem; color:#61745b; margin-top:3px; }
.cay-game-snack-panel { padding-top:17px; border-top:1px solid #e5ece3; }
.cay-game-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }
.cay-game button.cay-game-choice { display:flex; flex-direction:column; align-items:center; padding:10px 5px; background:#fff8ed; border-color:#f1dbb9; min-height:65px; border-radius:12px; color:#805325; }
.cay-game button.cay-game-choice:hover:not(:disabled) { background:#ffecd0; }
.cay-game-choice strong { font-size:1.15rem; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.cay-game-choice span { font-size:.55rem; text-transform:uppercase; letter-spacing:.07em; margin-top:4px; color:#82602e; }
.cay-game .cay-game-choice-complete { grid-column:1/-1; color:#24715a; font-weight:750; padding:12px; border-radius:10px; background:#edf6e9; margin:0; text-align:center; }
.cay-game-status { font-size:.75rem; line-height:1.6; background:#f4f8f0; border-radius:11px; padding:11px 14px; margin:22px 0 0; color:#58704c; }
.cay-game-is-complete .cay-game-stats > div:first-child { background:#13674e; border-color:#13674e; }
@media (min-width:1200px) { .cay-game-layout { grid-template-columns:minmax(0,1fr) 255px; gap:30px; } }
@media (max-width:850px) { .cay-game { padding:20px; } .cay-game-layout { grid-template-columns:minmax(0,1fr) 210px; gap:18px; } .cay-game-context { gap:8px; } .cay-game-context > span:last-child { font-size:.6rem; } .cay-game-cell-food > span { font-size:.55rem; border-width:1px; } .cay-game-eyes { width:6px; height:6px; top:16%; right:11%; box-shadow:0 8px 0 #fff; } .cay-game-eyes::after { width:3px; height:3px; top:1px; box-shadow:0 8px 0 #153c37; } }
@media (max-width:650px) { .cay-game { padding:17px; border-radius:20px; } .cay-game-heading { align-items:flex-start; flex-wrap:wrap; gap:13px; } .cay-game-mark { flex-basis:48px; width:48px; height:48px; font-size:36px; border-radius:16px; } .cay-game-title-group { gap:11px; } .cay-game h2 { font-size:1.8rem; } .cay-game .cay-game-tagline { font-size:.74rem; } .cay-game-reward { padding:6px 9px; font-size:.62rem; margin-left:auto; } .cay-game-context { margin:15px 0; } .cay-game-layout { grid-template-columns:1fr; gap:20px; } .cay-game-stats > div { padding:10px 5px; } .cay-game-stats strong { font-size:1.5rem; } .cay-game-stats span { font-size:.58rem; } .cay-game-board-wrap { border-width:5px; border-radius:17px; } .cay-game-board { gap:2px; padding:7px; } .cay-game-cell { border-radius:5px; } .cay-game-cell-food > span { font-size:clamp(.52rem,2vw,.78rem); } .cay-game-side { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:18px 15px; } .cay-game-instructions { grid-column:1/-1; } .cay-game h3 { font-size:1.05rem; margin:5px 0; } .cay-game-instructions p { margin-top:4px; } .cay-game-buttons { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; align-items:start; } .cay-game-buttons > div { grid-template-columns:1fr 1fr; padding-top:1px; } .cay-game-buttons > div button { min-height:47px; font-size:.6rem; } .cay-game-steering, .cay-game-snack-panel { padding-top:15px; } .cay-game-dpad { grid-template-columns:repeat(3,44px); gap:4px; } .cay-game-cruise { font-size:.63rem; padding:8px 5px; } .cay-game-cruise small { font-size:.55rem; } .cay-game-board-note { padding:12px; } .cay-game-board-note > strong { font-size:.9rem; } .cay-game-board-note > span:last-child { font-size:.64rem; } .cay-game-status { margin-top:18px; font-size:.7rem; } }
@media (max-width:370px) { .cay-game { padding:12px; } .cay-game-side { gap:15px 10px; } .cay-game-side { grid-template-columns:1fr; } .cay-game-dpad { grid-template-columns:repeat(3,44px); } .cay-game-snack-panel .cay-game-section-label { font-size:.53rem; } .cay-game-choice strong { font-size:1rem; } .cay-game-buttons { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .cay-game *, .cay-game *::before, .cay-game *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } .cay-game button:hover:not(:disabled), .cay-game button:active:not(:disabled) { transform:none; } }