*{box-sizing:border-box}
:root{
  font-family:Inter,ui-rounded,"SF Pro Rounded","Segoe UI",Arial,sans-serif;
  color:#f7f7fb;
  background:#111322;
  font-synthesis:none;
}
html,body{margin:0;min-height:100%;background:#111322}
body{min-height:100dvh;overflow-x:hidden}
button{font:inherit}
.wordy-app{
  width:min(100%,620px);
  min-height:100dvh;
  margin:0 auto;
  padding:max(12px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.wordy-topbar{
  width:100%;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:8px;
}
.status-block{
  min-width:0;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.07);
  text-align:center;
}
.status-level{text-align:left}
.status-label{display:block;font-size:10px;letter-spacing:.12em;opacity:.68}
.status-block strong{display:block;margin-top:2px;font-size:clamp(15px,4vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wordy-instruction{width:100%;min-height:54px;text-align:center}
.wordy-instruction p{margin:3px 0 2px;font-size:clamp(14px,3.8vw,17px);line-height:1.3}
.event-label{min-height:22px;font-weight:900;letter-spacing:.08em;font-size:14px}
.board-stage{width:100%;display:grid;place-items:center;flex:1;min-height:0}
.wordy-board{
  width:min(96vw,720px);
  height:min(70dvh,680px);
  min-height:430px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(7,minmax(0,1fr));
  gap:clamp(4px,.8vw,7px);
  touch-action:none;
  user-select:none;
}
.wordy-tile{
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  padding:4px 6px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:clamp(9px,2.8vw,16px);
  background:#f7f7fb;
  color:#17192a;
  box-shadow:0 3px 0 rgba(0,0,0,.24),0 8px 18px rgba(0,0,0,.14);
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
  font-size:clamp(13px,2.7vw,19px);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.02em;
  transition:transform .14s ease,box-shadow .14s ease,outline-color .14s ease;
}
.wordy-tile:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.24)}
.wordy-tile.is-ready{
  outline:3px solid #ffd55c;
  outline-offset:-3px;
  box-shadow:0 0 0 3px rgba(255,213,92,.22),0 4px 0 rgba(0,0,0,.25);
}
.wordy-tile.is-cross{
  outline:4px double #ff8de1;
  outline-offset:-4px;
  box-shadow:0 0 0 4px rgba(255,141,225,.22),0 4px 0 rgba(0,0,0,.25);
}
.wordy-tile:disabled{opacity:.86}
.wordy-controls{
  width:min(94vw,520px);
  display:grid;
  grid-template-columns:1fr minmax(150px,2fr);
  gap:10px;
  align-items:center;
}
.ready-count{font-size:13px;font-weight:800;text-align:center;opacity:.82}
.pop-button,.primary-button,.secondary-button{
  border:0;
  border-radius:16px;
  min-height:52px;
  font-weight:950;
  letter-spacing:.06em;
}
.pop-button,.primary-button{background:#ffe067;color:#181a29;box-shadow:0 4px 0 #b89227}
.pop-button:disabled{opacity:.34;box-shadow:none}
.secondary-button{background:#e8e9f2;color:#181a29}
.result-overlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  align-items:end;
  background:rgba(7,8,15,.72);
  padding-top:max(16px,env(safe-area-inset-top));
}
.result-overlay[hidden]{display:none}
.result-sheet{
  width:min(100%,620px);
  max-height:94dvh;
  margin:0 auto;
  overflow:auto;
  padding:20px 16px max(18px,env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
  background:#f8f8fc;
  color:#17192a;
}
.result-heading h1{margin:3px 0 14px;font-size:26px}
.result-kicker{font-size:11px;font-weight:900;letter-spacing:.13em;opacity:.6}
.review-section{margin-top:14px}
.review-section h2{font-size:15px;margin:0 0 8px}
.review-list{display:grid;gap:8px}
.review-card{padding:11px 12px;border-radius:14px;background:#ececf4;line-height:1.3}
.review-card strong{display:block;font-size:16px}
.review-card span{display:block;margin-top:2px;font-size:13px;opacity:.78}
.replay-board{
  width:min(62vw,240px);
  aspect-ratio:12 / 7;
  margin:12px auto 0;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(7,minmax(0,1fr));
  gap:2px;
}
.replay-tile{
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  padding:1px;
  border-radius:5px;
  background:#e1e2eb;
  font-size:clamp(5px,1.45vw,8px);
  font-weight:800;
  overflow:hidden;
  white-space:nowrap;
}
.replay-tile.is-suggested{outline:3px solid #b77800;outline-offset:-2px;background:#fff1b7}
.result-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:18px}
@media (min-width:700px){
  .result-overlay{align-items:center;padding:24px}
  .result-sheet{border-radius:26px;max-height:90vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


.wordy-devbar{
  width:100%;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 7px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:12px;
  background:rgba(10,12,22,.92);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.wordy-devbar strong{
  font-size:10px;
  letter-spacing:.12em;
  color:#ffe067;
}
.wordy-devbar select,
.wordy-devbar button{
  min-height:32px;
  border:0;
  border-radius:8px;
  padding:0 9px;
  font:700 12px/1 system-ui,sans-serif;
}
.wordy-devbar select{
  max-width:150px;
  background:#f5f5f8;
  color:#161827;
}
.wordy-devbar button{
  background:#ffe067;
  color:#17192a;
}
@media (max-width:420px){
  .wordy-devbar{
    padding:5px;
  }
  .wordy-devbar select{
    max-width:118px;
  }
}