/* Sori "Try it": the Nopo 1988 tile set on screen. The only colour on the page is in the tiles:
   consonants orange, vowels blue, as in the printed guide. Letter faces come from the original artwork. */
.try{
  --tc:#ee8150; --tv:#1d4973; --u:72px;
  padding-top:clamp(32px,4vw,56px);display:grid;gap:clamp(22px,2.6vw,36px)
}
.try button{color:inherit;font-family:var(--body);font-size:inherit}

/* Guide: three rules and four syllable shapes */
.guide{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start;padding-block:clamp(20px,2.4vw,32px);border-top:1px solid var(--fg);border-bottom:1px solid var(--rule)}
.guide-text{grid-column:1/6;display:grid;gap:14px}
.guide-text h3{font-family:var(--body);font-weight:600;font-size:20px;line-height:1.25;margin:0}
.guide-text ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:r}
.guide-text li{display:grid;grid-template-columns:1.6em 1fr;counter-increment:r}
.guide-text li::before{content:counter(r);font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:3px}
.guide-text p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;max-width:46ch}
.guide-text .o{color:#b5501f;font-weight:600}   /* the tile orange is too light for text on white */
.guide-text .b{color:var(--tv);font-weight:600}
.guide-fig{grid-column:7/13;margin:0}
.guide-fig svg{width:100%;height:auto;max-width:560px;overflow:visible}
.guide-fig .oc{fill:var(--tc)} .guide-fig .bc{fill:var(--tv)}
.pz-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Stage: the word being built, straight after the rules */
.try-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 16px;align-items:start}
/* room for the tallest syllable (three tiles) plus one row for the reading, so the trays never move */
.try-line{display:flex;flex-wrap:wrap;gap:8px calc(var(--u)*.5);align-items:flex-start;align-content:flex-start;min-height:calc(var(--u)*3.45 + 52px)}
.try-edit{display:flex;gap:18px;padding-top:4px}
.try button.link{appearance:none;background:none;border:0;padding:8px 0;margin:-8px 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.try button.link[disabled]{color:var(--muted);text-decoration:none;cursor:default}
.try-word{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.55);align-items:flex-start;padding:0 calc(var(--u)*.14) calc(var(--u)*.14) 0}
.syl{display:grid;grid-auto-columns:var(--u);grid-auto-rows:var(--u);gap:calc(var(--u)*.11)}
.try-read{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;align-content:center;min-height:44px;margin:0}
.try-read > *{background:var(--bg)}   /* the step line passes behind the text */
.try-read b{font-size:clamp(24px,2.4vw,32px);font-weight:600;line-height:1.1}
.try-read span{font-family:var(--mono);font-size:14px;color:var(--muted)}
.try-read em,.try-ans em{font-style:normal;font-weight:600}
.try-read em::before,.try-ans em::before{content:"= ";color:var(--muted);font-weight:400}

/* Puzzle tiles */
.pz{position:relative;display:block;width:var(--u);height:var(--u)}
.pz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pz.c .body,.pz.v .tab,.pz.v .n{fill:var(--tc)}
.pz.v .body,.pz.c .tab,.pz.c .n{fill:var(--tv)}
.pz i{position:absolute;inset:8% 4% 0;background-image:var(--faces);background-size:1400% 200%;background-repeat:no-repeat}
.pz.dim{opacity:.4}
.pz.in{animation:pop .16s ease-out}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}

/* Coach: the current step, sitting above the tray it points to */
.try-pick{display:grid;gap:12px}
.try-trays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}
.try-hint{position:relative;z-index:1;display:grid;gap:6px;justify-items:start;align-content:start;margin:0;padding:0 0 22px calc(var(--u)/2 - 14px);min-height:164px}
.try-hint .pin{position:relative;display:block;width:28px;height:28px;margin-bottom:8px;transform:translateX(var(--lx,0px));transition:transform .2s ease}
.try-hint .n{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--fg);border-radius:50%;background:var(--bg);font-family:var(--mono);font-size:13px;font-weight:500}
.try-hint .ln{position:absolute;left:13.5px;bottom:100%;width:1px;height:var(--lh,0px);background:var(--fg);pointer-events:none}
.try-hint .t{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.try-hint .s{font-size:18px;line-height:1.35;font-weight:500;color:var(--muted)}
.try-hint .x{font-size:15px;line-height:1.45;color:var(--muted);max-width:52ch}
.try-hint .x:empty{display:none}
.try-hint.flash .s{color:var(--fg)}
.try-hint[data-step="0"] .pin{visibility:hidden}

/* Trays */
.try-trays{row-gap:16px}
.tray{display:grid;gap:12px;align-content:start}
.tray .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1vw,12px);max-width:520px;padding:0 1.6% 1.6% 0}
.tile{appearance:none;border:0;padding:0;background:none;width:auto;height:auto;aspect-ratio:1;cursor:pointer;transition:transform .08s,opacity .15s}
.tile:hover{transform:translateY(-2px)}
.tile:active{transform:scale(.95)}
.tile[aria-disabled="true"]{opacity:.24;cursor:default}
.tile[aria-disabled="true"]:hover{transform:none}
.tray-note{grid-column:1/-1;margin:0;font-size:14px;line-height:1.45;color:var(--muted);max-width:56ch}

/* Try to read this: below the tiles, so the list above is the reference */
.try-ex{display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px;border-top:1px solid var(--rule);padding-top:clamp(20px,2.4vw,30px)}
.try-ex .label{flex-basis:100%;margin:0 0 2px}
.chip{appearance:none;background:transparent;border:1px solid var(--rule);border-radius:999px;padding:8px 16px;font-size:17px;font-weight:600;line-height:1.2;cursor:pointer}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--fg)}
.chip:focus-visible,.tile:focus-visible,.link:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.try-ans{flex-basis:100%;min-height:26px;margin:0;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline;font-family:var(--mono);font-size:14px;color:var(--muted)}
.try-ans em{font-family:var(--body);font-size:17px;color:var(--fg)}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .guide-text .b{color:#8db4dc}:root:not([data-theme="light"]) .guide-text .o{color:var(--tc)}}
:root[data-theme="dark"] .guide-text .b{color:#8db4dc}
:root[data-theme="dark"] .guide-text .o{color:var(--tc)}

@media (max-width:900px){
  .guide-text,.guide-fig{grid-column:1/-1}
  .guide-fig svg{max-width:460px}
  .try{--u:64px}
  .try-trays{column-gap:clamp(16px,4vw,32px)}
  .tray .grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:340px}
  .try-hint{min-height:150px;padding-bottom:6px}
}
@media (max-width:560px){
  .try{--u:46px;gap:18px}
  .try-read{min-height:0}
  .tray .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .try-trays{column-gap:14px}
  .try-hint .s{font-size:16px}
  .try-hint .x{font-size:14px}
  .try-hint{min-height:158px;padding-bottom:0}   /* tallest step text at 360px and up, so the trays stay put */
  .try-stage{grid-template-columns:minmax(0,1fr)}
  .try-edit{order:-1;justify-content:flex-end;padding-top:0}
  .try-line{min-height:calc(var(--u)*3.3 + 72px)}
  .try-word{gap:calc(var(--u)*.38)}
}
@media (prefers-reduced-motion:reduce){.pz.in{animation:none}.tile,.try-hint .pin{transition:none}}
@media (max-width:350px){
  .tray .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .try-hint{min-height:180px}
}