/* ─────────────────────────────────────────────────────────────────────────────
   game_hints.css -- the HINT boxes of Ostdle, Passivedle and Silhouette (owner, 16 Oct 2026: H3 of
   hintbox_trial.html) and the 4th hint, PICK ONE (hint4.js).
   H3: a near-black box (the item-box look) with its name on a small site-colour tab across the top edge, the value
   big in the middle. The selectors carry #hints so they win over each game's own .hint block, which is still in
   the page (the old grey angled plate); the !important ones beat its phone rules.
   ───────────────────────────────────────────────────────────────────────────── */
#hints.hints{gap:22px 16px;margin-top:16px;padding-top:12px;align-items:stretch;}
#hints .hint{flex-direction:column;justify-content:center;min-width:110px;min-height:76px;padding:20px 18px 12px;
  background:none;border:none;}
#hints .hint::before{transform:none;border-radius:10px;background:#0d1016;
  border:1px solid rgba(var(--acc-rgb,232,50,60),.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 14px rgba(var(--acc-rgb,232,50,60),.18);}
/* the YEAR value and the PICK ONE facts share one font (owner, 16 Oct 2026) */
#hints .hint b{font-family:'Rajdhani',sans-serif;font-weight:700;}
#hints .hint .hl{position:absolute;top:0;left:50%;transform:translate(-50%,-50%) skewX(-12deg);white-space:nowrap;
  padding:3px 12px;border-radius:3px;background:var(--acc,#E8323C);color:#fff;
  font:700 .62rem 'Oswald',sans-serif;letter-spacing:1.6px;box-shadow:0 0 10px rgba(var(--acc-rgb,232,50,60),.6);}
#hints .hint b{color:#fff;font-size:1.6rem;}
@media (max-width:700px){
  #hints .hint{min-width:88px !important;min-height:64px;padding:16px 10px 8px !important;}
  #hints .hint .hl{font-size:.56rem;letter-spacing:1.2px;}
}

/* ── PICK ONE: two boxes in one H3 box. Locked until the last heart, then two question marks; one opens ── */
#hints .hint.h4p{padding:18px 10px 10px;}
.h4row{display:flex;gap:8px;}
.h4c{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:116px;min-height:52px;padding:6px 8px;border-radius:7px;border:1px solid rgba(var(--acc-rgb,232,50,60),.35);
  background:rgba(var(--acc-rgb,232,50,60),.05);color:#b9bfcc;font:700 .58rem 'Oswald',sans-serif;letter-spacing:1.2px;text-align:center;}
.h4c i{font-style:normal;}
.h4c.lock{border-style:dashed;opacity:.75;}
.h4c.lock svg{width:18px;height:18px;}
/* the two question marks: lit and clickable at the last heart */
button.h4c{cursor:pointer;font:700 1.7rem 'Oswald',sans-serif;color:#fff;letter-spacing:0;
  border:1px solid var(--acc,#E8323C);background:linear-gradient(180deg,rgba(var(--acc-rgb,232,50,60),.32),rgba(var(--acc-rgb,232,50,60),.08));
  box-shadow:0 0 10px rgba(var(--acc-rgb,232,50,60),.4);transition:transform .12s,box-shadow .15s;}
button.h4c:hover{transform:translateY(-2px);box-shadow:0 0 16px rgba(var(--acc-rgb,232,50,60),.7);}
.h4p.ready button.h4c{animation:h4pulse 1.6s ease-in-out infinite;}
@keyframes h4pulse{50%{box-shadow:0 0 18px rgba(var(--acc-rgb,232,50,60),.75);}}
.h4c.q.off{font:700 1.7rem 'Oswald',sans-serif;letter-spacing:0;opacity:.35;}
/* an opened hint: its kind small, the fact in white */
.h4c.shown{border-color:rgba(var(--acc-rgb,232,50,60),.6);background:#090b10;}
.h4c.shown b{color:#fff;font:700 1.02rem 'Rajdhani',sans-serif !important;letter-spacing:.2px;line-height:1.1;}   /* the YEAR value's font (owner) */
.h4c.shown.mine{border-color:var(--acc,#E8323C);box-shadow:0 0 10px rgba(var(--acc-rgb,232,50,60),.4);}
@media (max-width:700px){
  #hints .hint.h4p{flex-basis:100%;max-width:300px;padding:16px 8px 8px !important;}
  .h4row{width:100%;} .h4c{flex:1 1 0;width:auto;}
}