:root{
  --bg:#393939;            /* rgb(57,57,57)  */
  --fg:#fe8f17;            /* rgb(254,143,23) */
  --muted:#b28252;         /* dimmed orange   */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
       padding:6vmin clamp(28px,8vw,160px)}
#card{
  width:fit-content;max-width:1500px;text-align:left;
  opacity:0;transition:opacity .5s ease;
  display:flex;flex-direction:column;align-items:flex-start;gap:2.2vmin;
}
#card.show{opacity:1}

/* definition card */
.tic{width:clamp(46px,10.5vmin,132px);height:auto;color:var(--fg);stroke:currentColor;fill:none;
     stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:1.4vmin}
.word{font-weight:700;line-height:1.03;letter-spacing:-.01em;
      font-size:clamp(34px,9.2vmin,180px)}
.pos{color:var(--muted);font-size:clamp(13px,2.6vmin,34px)}
.def{color:var(--fg);line-height:1.25;max-width:26ch;
     font-size:clamp(17px,4.3vmin,62px)}
.tr{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.6em 1.6em;color:var(--muted);
    font-size:clamp(12px,2.3vmin,30px);margin-top:1vmin}
.tr span b{color:var(--fg);font-weight:700;font-size:.78em;margin-right:.35em;letter-spacing:.04em}

/* quote card */
.portrait{max-width:clamp(160px,32vmin,420px);max-height:48vmin;width:auto;height:auto;
          border-radius:16px;filter:grayscale(1) contrast(1.02);background:#2c2c2c}
/* multiple portraits of the same person, shown side by side when there's room */
.portraits{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:clamp(10px,2.2vmin,28px)}
.portraits .portrait{max-height:42vmin;max-width:clamp(120px,24vmin,300px)}
.portraits.n3 .portrait{max-height:38vmin;max-width:clamp(110px,20vmin,250px)}
.quote{line-height:1.28;max-width:24ch;font-weight:400;font-size:clamp(20px,4.6vmin,72px)}
.author{font-weight:600;color:var(--fg);font-size:clamp(15px,2.9vmin,38px);margin-top:1vmin}
.source{color:var(--muted);font-size:clamp(12px,2.2vmin,28px)}

/* controls — fixed bottom bar, fades in on mouse/touch activity (body.ui) */
#lower{position:fixed;left:0;right:0;bottom:14px;display:flex;align-items:center;
       gap:clamp(16px,4vw,52px);padding:0 16px;
       opacity:0;transition:opacity .3s;pointer-events:none}
body.ui #lower{opacity:1;pointer-events:auto}
body:not(.ui){cursor:none}
button{font:inherit;color:var(--fg);background:none;border:0;padding:.4em .5em;cursor:pointer;
       font-size:clamp(26px,3.4vmin,60px);line-height:1;opacity:.8;transition:opacity .2s}
button:hover{opacity:1}
#awake{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
#dot{width:9px;height:9px;border-radius:50%;background:#7a6a55;transition:background .3s}
#dot.on{background:var(--fg);box-shadow:0 0 10px var(--fg)}
#err{position:fixed;inset:0;display:none;place-items:center;text-align:center;padding:8vmin;
     color:var(--muted);font-size:clamp(14px,2.4vmin,26px)}

/* progress through the deck — fills the space between the lower buttons */
#prog{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
#prog span{display:block;height:100%;width:0;border-radius:2px;background:var(--fg)}

/* right-click "report photo" menu */
#ctx{position:fixed;z-index:50;background:#2b2b2b;border:1px solid #555;border-radius:8px;
     padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#ctx button{display:block;width:100%;text-align:left;white-space:nowrap;color:var(--fg);
     font-size:15px;padding:8px 14px;border-radius:5px;opacity:1}
#ctx button:hover{background:rgba(254,143,23,.16)}
/* confirmation toast */
#toast{position:fixed;left:50%;bottom:54px;transform:translateX(-50%) translateY(10px);z-index:60;
     background:#2b2b2b;border:1px solid #555;color:var(--fg);padding:10px 18px;border-radius:10px;
     font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* reported-photos review panel (Shift+R or #reports) */
#reports{position:fixed;inset:0;z-index:70;display:none;place-items:center;
     background:rgba(0,0,0,.6);padding:5vmin}
#reports .rbox{background:#2b2b2b;border:1px solid #555;border-radius:14px;width:min(820px,94vw);
     max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
#reports .rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
     padding:14px 18px;border-bottom:1px solid #444;color:var(--fg);font-size:17px}
#reports .rhead span{display:flex;gap:8px}
#reports .rhead button{font-size:13px;color:var(--fg);border:1px solid #555;border-radius:7px;
     padding:6px 12px;opacity:.9}
#reports .rhead button:hover{opacity:1;background:rgba(254,143,23,.14)}
#reports .rscroll{overflow:auto}
#reports table{width:100%;border-collapse:collapse;font-size:14px;color:var(--fg)}
#reports th,#reports td{text-align:left;padding:9px 18px;border-bottom:1px solid #3a3a3a;vertical-align:top}
#reports th{color:var(--muted);font-weight:600;position:sticky;top:0;background:#2b2b2b}
#reports td .empty,#reports td.empty{color:var(--muted)}
#reports td button{font-size:12px;color:var(--muted);border:1px solid #4a4a4a;border-radius:6px;padding:4px 9px}
#reports td button:hover{color:var(--fg);border-color:var(--fg)}