/* ==========================================================================
   MARKLING - CONFUSINGLY SIMILAR?, page dress
   Mobile first: the two marks stack on a phone and sit side by side from
   540px. Colours are the sea tokens from style.css plus the labyrinth's
   pixel-world hexes; the card's drag and fly-off live in similar.js.
   ========================================================================== */

#page-similar{max-width:780px}
#page-similar :focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.sim-head{text-align:center;padding:4px 0 2px}
#page-similar .sim-h1{font-size:clamp(1rem,4.6vw,1.55rem);line-height:1.5;letter-spacing:0;
  color:var(--primary);text-shadow:0 0 18px rgba(95,212,200,.45);margin:0 0 14px}
.sim-h1-sub{display:block;margin-top:8px;font-size:.55em;color:#9BC0C6;text-shadow:none}
.sim-intro{color:var(--plum-soft);max-width:560px;margin:0 auto 10px;font-size:1rem}

/* ---------- the table ---------- */
.sim-game{margin-top:20px;outline:none}
.sim-top{display:flex;justify-content:space-between;gap:12px;
  font-family:'Press Start 2P',monospace;font-size:.55rem;color:#6FA3AD;
  -webkit-user-select:none;user-select:none}
.sim-deck{position:relative;margin:10px 0 14px;min-height:150px}

.sim-card{position:relative;background:#062A36;border:3px solid #1B5566;border-radius:12px;
  padding:16px 14px 14px;box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
  cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  transition:transform .25s ease}
.sim-card.dragging{transition:none;cursor:grabbing}
.sim-card.fly{transition:transform .38s ease-in,opacity .38s ease-in;opacity:0}

.sim-pair{display:grid;gap:8px}
@media (min-width:540px){.sim-pair{grid-template-columns:1fr auto 1fr;align-items:stretch}}
.sim-side{display:flex;flex-direction:column;gap:6px;background:#04202B;
  border:1px solid var(--line);border-radius:8px;padding:14px}
.sim-label,.sim-class,.sim-vs{font-family:'Press Start 2P',monospace}
.sim-label{font-size:.5rem;letter-spacing:.06em;color:#6FA3AD}
.sim-mark{font:700 clamp(1.3rem,5.5vw,1.7rem)/1.15 'Space Grotesk','Bricolage Grotesque',sans-serif;
  color:#E9EFF7;letter-spacing:.01em;overflow-wrap:anywhere}
.sim-goods{font-size:.95rem;color:#C2DEE2;line-height:1.4}
.sim-class{font-size:.5rem;color:#E8B04B;margin-top:auto;padding-top:4px}
.sim-vs{align-self:center;justify-self:center;font-size:.6rem;color:var(--primary)}
.sim-note{margin:10px 2px 0;font-size:.85rem;line-height:1.5;color:#9BC0C6;font-style:italic}

/* the stamps that fade in under the finger: CONFLICT on a right drag */
.sim-stamp{position:absolute;top:10px;z-index:2;font-family:'Press Start 2P',monospace;
  font-size:.6rem;padding:6px 8px;border:2px solid currentColor;border-radius:6px;
  background:rgba(4,32,43,.9);opacity:0;pointer-events:none}
.sim-stamp-yes{left:10px;color:#E8886F;transform:rotate(-8deg)}
.sim-stamp-no{right:10px;color:#5FD4C8;transform:rotate(8deg)}

/* what stays after the card has gone */
.sim-stub{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;
  min-height:150px;padding:18px;text-align:center;border:2px dashed #1B5566;border-radius:12px}
.sim-stub-marks{font:700 1.1rem 'Space Grotesk',sans-serif;color:#E9EFF7;overflow-wrap:anywhere}
.sim-stub-call{font-family:'Press Start 2P',monospace;font-size:.55rem;line-height:1.7}
.sim-stub.good .sim-stub-call{color:var(--primary)}
.sim-stub.bad .sim-stub-call{color:var(--red-on-dark)}

/* ---------- the two calls ---------- */
.sim-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sim-btn{min-height:56px;padding:10px 8px;border-radius:10px;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:.6rem;line-height:1.6;
  background:#0A3542;border:2px solid #1B5566;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;transition:border-color .18s,background .18s}
.sim-btn-no{color:#5FD4C8}
.sim-btn-yes{color:#E8886F}
.sim-btn:hover:not(:disabled),.sim-btn:focus-visible{border-color:currentColor;background:#0E3F4D}
.sim-btn:disabled{opacity:.4;cursor:default}

/* ---------- Quill's verdict ---------- */
.sim-host{display:flex;align-items:flex-start;gap:12px;margin-top:16px}
.sim-host canvas{flex:none;width:64px;height:67px;image-rendering:pixelated}
.sim-verdict{flex:1;min-width:0;min-height:67px;position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:.92rem;line-height:1.55;color:#C2DEE2}
.sim-verdict::before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;
  background:var(--card);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg)}
.sim-verdict b{display:block;font-size:1rem}
.sim-verdict b.good{color:var(--primary-deep)}
.sim-verdict b.bad{color:var(--red-on-dark)}
.sim-factor{display:block;margin:8px 0 6px;font-family:'Press Start 2P',monospace;
  font-size:.5rem;line-height:1.8;color:#E8B04B}
.sim-why{display:block}

.sim-next,.sim-action{min-height:48px;padding:12px 26px;border-radius:100px;cursor:pointer;
  font:700 .92rem 'Bricolage Grotesque',sans-serif;transition:background .18s,border-color .18s}
.sim-next{display:block;margin:16px auto 0;background:var(--primary);color:#04202B;border:none}
.sim-next:hover{background:var(--primary-deep)}
.sim-next[hidden]{display:none}

/* ---------- the score ---------- */
.sim-result{text-align:center;background:linear-gradient(140deg,var(--card),rgba(12,49,64,.5));
  border:1px solid var(--line);border-radius:var(--radius);padding:30px 20px 26px}
.sim-final{font:700 3rem/1 'Fraunces',serif;color:var(--primary);margin:0 0 8px}
.sim-title{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--plum);margin:0 0 10px;outline:none}
.sim-row{font-size:1.5rem;letter-spacing:.08em;margin:0 0 8px;overflow-wrap:anywhere}
.sim-best{font-size:.85rem;color:#9BC0C6;margin:0 0 18px;min-height:1.3em}
.sim-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sim-share{background:var(--primary);color:#04202B;border:1px solid var(--primary)}
.sim-share:hover{background:var(--primary-deep)}
.sim-again{background:transparent;color:var(--plum);border:1px solid var(--line)}
.sim-again:hover{border-color:var(--primary)}
.sim-share-status{font-size:.85rem;color:#9BC0C6;margin:14px 0 0;min-height:1.3em;overflow-wrap:anywhere}

/* ---------- small print ---------- */
.sim-footnote{max-width:620px;margin:26px auto 0;text-align:center;font-size:.8rem;line-height:1.6;color:#7FA6AE}
.sim-footnote b{color:#9BC0C6}
.sim-footnote a{color:var(--primary)}
.sim-noscript{max-width:620px;margin:18px auto 0;text-align:center;color:var(--plum-soft)}
html:not(.js) .sim-game{display:none}

@media (prefers-reduced-motion:reduce){
  .sim-card,.sim-card.fly,.sim-btn,.sim-next,.sim-action{transition:none}
}