/* Homepage compact Snake layout; retain the game engine and fullscreen controls. */

.slp-preview .slp-boardbar[hidden], .slp-preview .slp-where[hidden], .slp-preview .slp-hint[hidden] { display:none !important; }
.slp-preview .slp-replay[hidden] { display:none !important; }
.slp-preview .slp-replay { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; color:var(--am-url); font-size:13px; line-height:1.6; }
.slp-preview.slp-compact .slp-replay .sn-listen { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:4px 10px; border:1px solid var(--slp-line); border-radius:99px; color:var(--am-violet); background:var(--am-white); font-size:13px; font-weight:600; }
.slp-preview .slp-replay .sn-listen::before { content:''; flex:none; width:16px; height:16px; }

#heroSnake.slp-preview.slp-compact:not(.sn-fs) {
  --sn-board:var(--am-cream,#FBF4EE);
  --sn-grid:color-mix(in srgb,var(--am-code,#2A1A4F) 7%,var(--am-cream,#FBF4EE));
  --sn-line:color-mix(in srgb,var(--am-code,#2A1A4F) 17%,var(--am-white,#FFFFFF));
  --sn-soft:var(--am-white,#FFFFFF);
  --slp-line:color-mix(in srgb,var(--am-code,#2A1A4F) 18%,var(--am-white,#FFFFFF));
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-game {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"pick header" "status status" "task task" "hint hint" "board board" "tap tap" "pad pad" "finish finish";
  column-gap:12px; max-width:928px; padding:28px var(--slp-frame-pad,16px) 36px;
  border-radius:28px; background:var(--am-white,#FFFFFF); color:var(--am-ink,#34343E);
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-game::after { border-color:var(--slp-line); }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-game > :where(.sn-header,.sn-pick,.sn-status,.sn-task,.sn-hint,.sn-boardwrap,.sn-tapbox,.sn-finish) {
  min-width:0; width:100%; max-width:none; margin:0; padding:0;
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) :is(.sn-title,.slp-source-where,.slp-source-hint) {
  position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important;
  margin:-1px !important; padding:0 !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-header { grid-area:header; align-items:flex-start; justify-content:flex-end; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-tools { justify-content:flex-end; max-width:180px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-setpanel { background:var(--am-white,#FFFFFF); border:1px solid var(--slp-line); border-radius:16px; box-shadow:0 8px 24px #2A1A4F12; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-tools button {
  min-height:44px; padding:8px 14px; border:1px solid var(--slp-line); color:var(--am-url,#40404C); font-size:14px; font-weight:600;
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-pick { grid-area:pick; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr); gap:8px; align-items:start; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) :is(.sn-packs,.sn-levels) { min-width:0; width:auto; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-pick select {
  width:100%; min-width:0; min-height:44px; padding-top:8px; padding-bottom:8px; font-size:16px; font-weight:600; text-overflow:ellipsis;
  color:var(--am-ink,#34343E); border:1px solid var(--slp-line); background-color:var(--am-white,#FFFFFF);
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-hardlv { grid-column:1 / -1; justify-self:start; min-height:38px; border:1px dashed var(--slp-line); color:var(--am-violet,#5B3D99); font-size:13px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-hardlv.on { border-style:solid; background:var(--am-violet,#5B3D99); color:var(--am-white,#FFFFFF); }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-status { grid-area:status; margin-top:18px; gap:8px 16px; color:var(--am-url,#40404C); font-size:13px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-whereg { gap:8px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-where { font-weight:600; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-cefr { display:none; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-task { grid-area:task; margin-top:8px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-zh { color:var(--am-ink,#34343E); font-size:clamp(18px,2.2vw,22px); font-weight:600; line-height:1.55; overflow-wrap:anywhere; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-pattern { margin-top:5px; color:var(--am-url,#40404C); font-size:14px; line-height:1.5; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) :is(.sn-pattern.slp-pattern-duplicate,.sn-last.sn-intro) { display:none; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-slots { margin-top:12px; gap:8px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-slot { min-height:38px; padding:6px 12px; border-width:1px; font-size:15px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-last { min-height:0; color:var(--am-url,#40404C); font-size:14px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-hint { grid-area:hint; min-width:0; min-height:1.6em; margin:8px 0 0; color:var(--am-url,#40404C); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-boardwrap { grid-area:board; display:flex; flex-direction:column; align-items:center; margin-top:12px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardbar {
  display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px;
  width:var(--slp-board-width,100%); max-width:100%; min-height:48px; padding:4px 12px;
  color:var(--am-ink,#34343E); background:var(--am-cream,#FBF4EE); border:2px solid var(--slp-line); border-bottom:0; border-radius:14px 14px 0 0;
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardstats { display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; font-size:13px; font-variant-numeric:tabular-nums; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardstats { margin-right:auto; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardbar :is(.sn-sound-quick,.sn-fsbtn):not([hidden]) {
  display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:42px; padding:4px 10px;
  border:1px solid var(--slp-line); border-radius:99px; background:#fff;
  color:var(--am-ink,#34343E); font:inherit; font-size:13px; cursor:pointer;
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardbar .sn-pause {
  position:relative; flex:none; min-width:54px; min-height:28px; padding:4px 12px; border:0; border-radius:99px;
  background:var(--am-violet,#5B3D99); color:var(--am-white,#FFFFFF); font-size:12px; line-height:20px; font-weight:600;
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardbar .sn-pause::before { content:""; position:absolute; inset:-8px -4px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardbar .sn-pause:hover { background:var(--am-code,#2A1A4F); }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-board { flex:none; margin:0 auto; border-color:var(--slp-line); border-radius:0 0 14px 14px; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-paused {
  inset:var(--slp-bar-height,54px) 0 0; width:var(--slp-board-width,100%); max-width:100%; margin-inline:auto;
  border-radius:0 0 14px 14px; color:var(--am-ink,#34343E);
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-boardwrap:has(.sn-done:not([hidden])) {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; justify-items:center;
}
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardbar { grid-area:1 / 1; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-boardwrap:has(.sn-done:not([hidden])) :is(.sn-board,.sn-done) { grid-area:2 / 1; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-tip { top:calc(var(--slp-bar-height,54px) + 10px); }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-tapbox { grid-area:tap; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-pad { grid-area:pad; }
#heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-finish { grid-area:finish; margin-top:24px; }

@media(max-width:640px) {
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-game { padding-top:22px; padding-bottom:28px; border-radius:22px; column-gap:6px; grid-template-columns:minmax(0,1fr) 52px; }
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-pick { grid-template-columns:minmax(98px,.85fr) minmax(0,1.2fr); gap:6px; }
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-pick select { padding-left:8px; padding-right:22px; background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%; background-size:4px 4px,4px 4px; }
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-tools { max-width:74px; }
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-tools button { padding-inline:10px; }
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-status { margin-top:18px; }
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .sn-boardwrap { margin-top:14px; }
  #heroSnake.slp-preview.slp-compact:not(.sn-fs) .slp-boardbar { padding:5px 8px; gap:4px; flex-wrap:wrap; }
}