/* Shared, compact shape navigation. Scoped so it cannot restyle gameplay. */
nav.puzzle-picker{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:4px;padding:5px;background:#e9e3d7;border-radius:14px;max-width:100%;margin:0}
.puzzle-picker .puzzle-choice{position:relative;flex:1 0 62px;max-width:88px;min-width:0;text-align:center}
.puzzle-picker a{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 3px 6px;min-height:65px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.puzzle-picker a svg{display:block;width:38px;height:38px;flex:none;overflow:visible}
.puzzle-picker a:hover,.puzzle-picker a:focus-visible{background:#f5f0e5;color:var(--ink)}
.puzzle-picker a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px #26221f18;outline:1px solid #bbae9a;outline-offset:-1px}
.puzzle-picker .puzzle-info{display:block;margin:1px auto 0;width:28px;height:24px;min-height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#70675d;font:600 13px/24px system-ui;cursor:pointer;touch-action:manipulation}
.puzzle-picker .puzzle-info:hover,.puzzle-picker .puzzle-info[aria-expanded=true]{background:#d6cbb9;color:var(--ink)}
.puzzle-picker a:focus-visible,.puzzle-picker .puzzle-info:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.puzzle-tip{position:fixed;z-index:1000;width:260px;max-width:calc(100vw - 24px);padding:13px 15px;background:#26221f;color:#fffdf8;border:1px solid #51473e;border-radius:12px;box-shadow:0 8px 28px #26221f30;font:400 13px/1.45 system-ui;text-align:left;letter-spacing:normal;user-select:text}
.puzzle-tip strong{display:block;color:#f3d064;font-weight:700;margin-bottom:4px;font-size:14px}
.puzzle-tip[hidden]{display:none!important}
#titleCard{max-width:580px}#titleCard .puzzle-picker{margin:0 0 13px}
.masthead:has(.puzzle-picker){flex-wrap:wrap}.masthead .puzzle-picker{min-width:360px}
@media(max-width:660px){.masthead .puzzle-picker{min-width:0;width:100%}.puzzle-picker .puzzle-choice{flex-basis:56px}.puzzle-picker a{font-size:10.5px}.puzzle-picker a svg{width:34px;height:34px}}

/* Keep shape labels readable and center the last choice on narrow screens. */
@media(max-width:660px){nav.puzzle-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.puzzle-picker .puzzle-choice{width:100%;max-width:none}}

/* Auto margins center or bottom-align when space permits; a tall card starts
   at the scrollable top instead of overflowing above the Classic overlay. */
#titleScreen,#stage.landscape ~ #titleScreen{justify-content:flex-start}
#titleCard{flex-shrink:0;margin-top:auto}
#stage.landscape ~ #titleScreen #titleCard{margin-bottom:auto}
#titleCard a,#titleCard button{scroll-margin-block:12px}

@media(max-width:660px){.puzzle-picker .puzzle-choice:last-child:nth-child(3n+1){grid-column:2}}

/* Tablet controls keep a 44px target without covering the puzzle below. */
.puzzle-picker .puzzle-info { width:44px; height:44px; min-height:44px; line-height:44px; }
#titleCard .title-foot a, #titleCard .title-foot button { min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
@media(min-width:700px) {
  #titleCard { max-width:900px; }
  #titleCard .puzzle-picker { flex-wrap:nowrap; }
  #titleCard .puzzle-choice { max-width:none; }
  .masthead:has(.puzzle-picker) { padding:6px 20px; gap:8px; }
  .masthead .puzzle-picker { min-width:0; flex:1; }
  .masthead .puzzle-choice { flex-basis:54px; }
  .masthead .puzzle-picker a { min-height:60px; }
  main:has(.play-layout) { padding:0 20px; }
  .welcome { padding:10px 0; gap:16px; }
  .status { margin:3px 0; }
  .play-layout { gap:16px; }
  .play-layout canvas { height:min(360px,calc(100dvh - 330px)); }
  .rings { gap:6px; }
  .ring { max-height:min(140px,calc((100dvh - 340px)/2)); }
  .ring-card { padding:4px; }
  .turn-buttons button { min-height:44px; min-width:44px; }
  .ring-note { margin-top:5px; }
}
@media(min-width:700px) and (orientation:portrait) {
  .masthead .puzzle-picker { flex-basis:100%; }
  .play-layout canvas { height:300px; }
  .ring { max-height:140px; }
}

/* Twelve Crystal rings use six columns on landscape tablets. */
@media(min-width:900px) and (orientation:landscape) {
  body:has(#rings .ring-card:nth-child(12)) .play-layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); }
  body:has(#rings .ring-card:nth-child(12)) .rings { grid-template-columns:repeat(6,minmax(0,1fr)); }
  body:has(#rings .ring-card:nth-child(12)) .ring { width:min(100%,110px,calc((100dvh - 400px)/2)); max-height:min(110px,calc((100dvh - 400px)/2)); }
}

@media(min-width:700px) { .play-layout .solid-panel > canvas { height:min(350px,calc(100dvh - 300px)); } }
@media(min-width:900px) and (orientation:landscape) {
  .play-layout .ring { width:min(100%,130px,calc((100dvh - 380px)/2)); max-height:min(130px,calc((100dvh - 380px)/2)); margin:auto; }
  body:has(#rings .ring-card:nth-child(7)):not(:has(#rings .ring-card:nth-child(8))) .rings { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body:has(#rings .ring-card:nth-child(7)):not(:has(#rings .ring-card:nth-child(8))) .ring-card { grid-column:span 1; }
}

/* The shared frame takes part of the viewport; keep the full tablet ring set
   above its bottom edge, including the guidance beneath it. */
@media(min-width:700px) { .ring-note { max-width:none; } }
@media(min-width:700px) and (orientation:portrait) {
  body:has(#rings .ring-card:nth-child(12)) .ring { width:min(100%,110px); max-height:110px; }
}