/* Charades Word Generator: page shell. Mobile-first, no external fonts. Tool styles live in charades.css. */
:root{--ink:#1d1b2e;--ink2:#3b3850;--bg:#fbf7f0;--card:#ffffff;--line:#e3dccf;--muted:#5f5a6b;--accent:#bf4020;--accent-ink:#ffffff;--accent-2:#2a6f97;--gold:#f4b942;--radius:14px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.65rem,5.4vw,2.5rem);margin:.25em 0 .35em}
h2{font-size:clamp(1.25rem,3.6vw,1.6rem);margin:1.8em 0 .5em}
h3{font-size:1.08rem;margin:1.2em 0 .4em}
p{margin:0 0 1em}
a{color:#1f5f86;text-underline-offset:3px}
a:hover{color:var(--accent)}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:6px;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:6px;z-index:2000;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
.site-head{background:var(--ink);color:#fff}
.site-head .wrap{display:flex;flex-direction:column;gap:2px;padding-top:8px;padding-bottom:4px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-height:44px;font-weight:800;font-size:1.15rem}
.brand:hover{color:#fff}
.brand svg{width:36px;height:36px;flex:none}
.nav{display:flex;flex-wrap:nowrap;gap:1px;margin:0 -6px;padding:0 0 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none;color:#fff;text-decoration:none;font-size:.9rem;padding:10px 6px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav a[aria-current=page]{background:var(--accent);color:#fff;font-weight:700}
@media(min-width:420px){.nav{gap:4px}.nav a{font-size:.92rem;padding:10px}}
@media(min-width:980px){.site-head .wrap{flex-direction:row;align-items:center;justify-content:space-between;column-gap:16px}.nav{margin:0;padding:6px 0}}
main{padding:10px 0 40px}
.crumbs{font-size:.85rem;color:var(--muted);margin:6px 0 0}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}
.crumbs li+li::before{content:"\203A";margin-right:6px}
.crumbs a{color:var(--muted)}
.lede{font-size:1.05rem;color:var(--ink2);margin-bottom:14px}
.tool-h2{margin-top:.8em}
.tool{margin:8px 0 26px;min-height:1390px}
@media(min-width:360px){.tool{min-height:1330px}}@media(min-width:375px){.tool{min-height:1296px}}@media(min-width:414px){.tool{min-height:1215px}}@media(min-width:640px){.tool{min-height:985px}}@media(min-width:900px){.tool{min-height:1015px}}
.noscript{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.content{max-width:760px}
.content ul,.content ol{padding-left:1.3em}
.content li{margin:.25em 0}
.content table{border-collapse:collapse;width:100%;margin:0 0 1em;font-size:.95rem;display:block;overflow-x:auto}
.content th,.content td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.content th{background:#f3ede2}
.steps{padding-left:1.4em}
.reviewed{font-size:.85rem;color:var(--muted);font-style:italic}
.faq{max-width:760px}
.faq .qa{border-top:1px solid var(--line);padding-top:4px}
.related ul{padding-left:1.2em}
.site-foot{background:var(--ink);color:#e9e6f2;padding:22px 0 30px;font-size:.92rem}
.site-foot a{color:#fff}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:12px}
.foot-links a{min-height:44px;display:inline-flex;align-items:center}
.disclaimer{font-size:.82rem;color:#c9c4d8}
.print-sheet{display:none}
@media print{.site-head,.site-foot,.nav,.skip,.related,.crumbs,.tool,.tool-h2{display:none!important}body{background:#fff;color:#000}a{color:inherit}main{padding:0}.lede,.content,.faq{max-width:none;color:#000}h2,h3{break-after:avoid}.qa,.steps li{break-inside:avoid}}

/* charades.css */
.cw-app{display:flex;flex-direction:column;gap:12px}
.cw-controls{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.cw-field{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 140px}
.cw-field label{font-size:.82rem;font-weight:650;color:var(--ink2)}
.cw-input{font:inherit;min-height:44px;padding:8px 10px;border:1.5px solid #9a95a8;border-radius:10px;background:#fff;color:var(--ink);min-width:0;max-width:100%;width:100%}
.cw-input:focus{border-color:var(--accent-2)}
.cw-check{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600}
.cw-check input{width:22px;height:22px;margin:0;accent-color:var(--accent);flex:none}
.cw-hint{margin:0;font-size:.92rem;color:var(--muted)}
.cw-stage{display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.cw-card{position:relative;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px rgba(29,27,46,.10);min-height:320px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.cw-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent-2))}
@media(min-width:900px){.cw-card{min-height:340px;padding:18px 24px}}
.cw-meta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-2);margin-top:4px}
.cw-diff{background:#eef4f8;border-radius:999px;padding:2px 10px}
.cw-diff[data-d=easy]{background:#e7f6ea;color:#1d6b33}
.cw-diff[data-d=hard]{background:#fdecea;color:#a32e18}
.cw-diff[data-d=adult]{background:#efeaf8;color:#4b3a8a}
.cw-word{margin:0;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;line-height:1.08;font-size:clamp(2rem,8vw,4.75rem);overflow-wrap:anywhere;padding:12px 0;color:var(--ink)}
.cw-word.cw-long{font-size:clamp(1.7rem,6.5vw,3.9rem)}
.cw-msg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;font-size:1.1rem;font-weight:600}
.cw-msg p{margin:0}
.cw-foot{min-height:50px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.cw-overlay{position:absolute;inset:0;background:rgba(29,27,46,.92);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;cursor:pointer}
.cw-overlay strong{font-size:clamp(2rem,8vw,4rem)}
.cw-overlay-sub{font-size:1.05rem}
.cw-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:640px){.cw-actions{grid-template-columns:2fr 1fr 1.6fr 1.2fr}}
.cw-btn{font:inherit;font-weight:700;min-height:48px;min-width:44px;padding:8px 14px;border-radius:12px;border:2px solid var(--ink2);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;overflow-wrap:anywhere}
.cw-btn:hover{background:#f4f1ec}
.cw-btn:disabled{opacity:.45;cursor:not-allowed}
.cw-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.cw-primary:hover{background:#a8361a;border-color:#a8361a}
.cw-got{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.cw-got:hover{background:#215a7b}
.cw-link{border-color:transparent;background:transparent;text-decoration:underline;font-weight:600;padding:6px 8px;min-height:44px;color:var(--ink2)}
.cw-link:hover{background:transparent;color:var(--accent)}
.cw-timer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.cw-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:2.4rem;line-height:1;min-width:4.2ch;color:var(--ink)}
.cw-time.cw-warn{color:var(--accent)}
.cw-time.cw-done{color:#a32e18}
.cw-timer-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;flex:1;min-width:0}
.cw-timer-ctl .cw-field{flex:0 1 150px}
.cw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.cw-scores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cw-team{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cw-team.cw-on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(191,64,32,.18)}
.cw-name{font-weight:700;text-align:center}
.cw-team-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cw-sq{width:44px;height:44px;padding:0;font-size:1.4rem;flex:none}
.cw-pts{font-variant-numeric:tabular-nums;font-weight:800;font-size:2rem;text-align:center;flex:1;min-width:0}
.cw-turn{justify-content:center;font-size:.9rem}
.cw-scores-foot{grid-column:1/-1;display:flex;justify-content:flex-end}
.cw-print{background:var(--card);border:1.5px dashed var(--line);border-radius:var(--radius);padding:10px 12px}
.cw-print-h{margin:0 0 6px;font-size:1.05rem}
.cw-print-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:6px}
.cw-print-row .cw-field{flex:0 1 180px}
@keyframes cw-in{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.cw-anim .cw-word{animation:cw-in .15s ease-out}
@media(prefers-reduced-motion:reduce){.cw-anim .cw-word{animation:none}}
#tool:focus{outline:none}
.cw-stage:fullscreen{padding:16px;overflow:auto;justify-content:center}
.cw-stage:-webkit-full-screen{padding:16px;overflow:auto}
.cw-full{position:fixed;inset:0;z-index:1000;padding:12px;overflow:auto}
html.cw-lock,html.cw-lock body{overflow:hidden}
.cw-is-full .cw-card,.cw-full .cw-card{min-height:52vh}
.cw-is-full .cw-word,.cw-full .cw-word{font-size:clamp(2.5rem,11vw,8rem)}
.cw-is-full .cw-word.cw-long,.cw-full .cw-word.cw-long{font-size:clamp(2.1rem,8.5vw,6.5rem)}
@media print{
  .cw-app{display:none!important}
  html.cw-printing body>*{display:none!important}
  html.cw-printing body>#print-sheet{display:block!important}
  html.cw-printing body{margin:0;background:#fff;color:#000}
  .cw-sheet-h{margin:0;font:700 10pt/1 system-ui,Arial,sans-serif;height:.3in;display:flex;align-items:center}
  html[data-paper=a4] .cw-sheet-h{height:8mm}
  .cw-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:.96in;border-left:1px dashed #777;border-top:1px dashed #777;overflow:hidden;break-inside:avoid}
  html[data-paper=a4] .cw-sheet-grid{grid-auto-rows:26.6mm}
  .cw-cut{box-sizing:border-box;border-right:1px dashed #777;border-bottom:1px dashed #777;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;overflow:hidden;break-inside:avoid}
  .cw-cut-w{font:700 13pt/1.15 system-ui,Arial,sans-serif;overflow-wrap:anywhere}
  .cw-cut-long .cw-cut-w{font-size:11pt}
  .cw-cut-c{font:600 7pt/1 system-ui,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#555}
}
