/* ============================================================
   REBUS ENGINE — additions on top of the shared stylesheet
   (build-standalone.js inlines tt-engine.css BEFORE this file, so
   everything the engines share keeps one single source.)
   ============================================================ */

/* one wide stage, no side panel */
#board{grid-template-columns:1fr}

/* "2 points" chip in the turn bar; amber once someone has peeked */
#worth{padding:5px 12px;border-radius:999px;font-size:clamp(11px,1vw,13px);
  font-weight:800;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
  color:#7ee2a8;border:2px solid #2f7a52;background:rgba(61,220,132,.10)}
#worth.peeked{color:#ffd479;border-color:#8a6a1e;background:rgba(255,212,121,.10)}

/* ---------- the sentence ---------- */
/* size tokens per density, set by the engine from the sentence length */
#rebus{--emo:clamp(46px,6.2vw,92px);--slot:clamp(30px,3.1vw,48px);--plain:clamp(22px,2.4vw,38px);
  flex:1;min-height:0;overflow:auto;padding:6px 2px;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;align-content:center;
  gap:22px 26px}
#rebus[data-size="m"]{--emo:clamp(34px,4.1vw,58px);--slot:clamp(23px,2.25vw,34px);
  --plain:clamp(18px,1.8vw,28px);gap:16px 20px}
#rebus[data-size="s"]{--emo:clamp(28px,3.3vw,48px);--slot:clamp(20px,1.9vw,29px);
  --plain:clamp(16px,1.55vw,24px);gap:12px 15px}

/* a word nobody has to decode: sits on the slot baseline */
.plain{font-size:var(--plain);font-weight:800;color:#cfe0f7;line-height:1;
  padding-bottom:calc(var(--slot)*.28)}
#rebus .endmark{font-size:calc(var(--plain)*1.3);line-height:1;padding-bottom:calc(var(--slot)*.18)}

/* a coded word: pictures on top, letter slots underneath */
.rw{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 8px 8px;border-radius:14px;transition:background .2s}
.rw .pic{display:flex;align-items:flex-end;gap:4px}
.rw .lit{font-size:calc(var(--emo)*.6);font-weight:900;color:var(--text);line-height:1;
  align-self:center;letter-spacing:.5px}
.part{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;padding:0 2px;cursor:help;font-family:inherit;color:inherit;
  border-radius:10px;transition:transform .12s}
.part:hover{transform:translateY(-2px)}
.part.peeked{cursor:default}
.part.peeked:hover{transform:none}
.emo{font-size:var(--emo);line-height:1.08;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.ops{font-size:calc(var(--slot)*.56);font-weight:800;color:#ffd479;letter-spacing:.6px;
  white-space:nowrap;line-height:1.1;min-height:1.1em}
.peekname{font-size:calc(var(--slot)*.46);font-weight:700;color:var(--muted);
  font-style:italic;line-height:1;min-height:1em;letter-spacing:.3px}

.slots{display:flex;gap:3px;align-items:flex-end}
.slot{width:var(--slot);height:calc(var(--slot)*1.18);padding:0;
  font-family:inherit;font-size:calc(var(--slot)*.68);font-weight:900;text-align:center;
  text-transform:uppercase;color:#fff;caret-color:transparent;
  background:var(--panel2);border:0;border-bottom:3px solid #6b7fa5;border-radius:7px 7px 3px 3px;
  user-select:text;-webkit-user-select:text;transition:background .12s,border-color .12s}
.slot:focus{outline:none;background:#2f4466;border-bottom-color:var(--t1);
  box-shadow:0 0 0 2px rgba(47,181,240,.45)}
#turnBar.t2 ~ #board .slot:focus{border-bottom-color:var(--t2);box-shadow:0 0 0 2px rgba(255,159,46,.45)}
.fixch{font-size:calc(var(--slot)*.8);font-weight:900;color:var(--muted);line-height:1;
  padding-bottom:2px}

.rw.solved{background:rgba(61,220,132,.08)}
.rw.solved .slot{background:rgba(61,220,132,.16);border-bottom-color:var(--good);color:var(--good)}
.rw.revealed{background:rgba(255,93,108,.07)}
.rw.revealed .slot{background:rgba(255,93,108,.12);border-bottom-color:var(--bad);color:#ff96a1}
.rw.wrong .slots{animation:rbShake .45s ease}
.rw.wrong .slot{border-bottom-color:var(--bad);background:rgba(255,93,108,.14)}
@keyframes rbShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---------- start-screen example ---------- */
.rbdemo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:10px 22px}
.rbdemo .emo{font-size:clamp(30px,3.4vw,46px)}
.rbdemo .ops{font-size:clamp(14px,1.4vw,19px)}
.rbdemo .arrow{color:var(--muted);font-weight:800}
.rbdemo b{font-size:clamp(17px,1.8vw,24px);letter-spacing:2px;color:var(--good)}
.rbdemo .sep{width:2px;height:34px;background:var(--line);margin:0 10px}

@media (max-height:820px){
  #rebus{--emo:clamp(40px,5.4vw,76px);--slot:clamp(27px,2.7vw,40px);gap:16px 24px}
  #rebus[data-size="m"]{--emo:clamp(30px,3.5vw,48px);--slot:clamp(21px,2vw,30px);gap:11px 16px}
  #rebus[data-size="s"]{--emo:clamp(25px,2.9vw,40px);--slot:clamp(18px,1.7vw,26px);gap:9px 12px}
  .rbdemo{padding:6px 18px}
  .rbdemo .emo{font-size:clamp(26px,2.8vw,38px)}
}