/* SecretID — DA : sombre, anonyme, rouge signal sur anthracite */
:root{
  --bg:#111214; --bg2:#16171a; --panel:#1b1c20; --panel2:#232429; --line:#2d2f35; --line2:#3a3c43;
  --text:#ece8e3; --muted:#8a8c93; --dim:#5c5e65;
  --red:#e40b00; --red2:#ff2b1c; --red-deep:#6b0a05; --red-ink:#2a0503;
  --bone:#d8d2c8; --bone-ink:#26241f;
  --yes:#1fbf6a; --no:#e40b00;
  --r:10px; --r-sm:6px;
  --f-display:'Anton', 'Impact', sans-serif;
  --f-body:'Archivo', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--f-body);-webkit-font-smoothing:antialiased}
body{min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}
/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center} .red{color:var(--red2)}
.label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.error{color:var(--red2);font-size:13px;min-height:1em;margin:8px 0 0}
input,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;outline:none;transition:border-color .15s}
input:focus,textarea:focus{border-color:var(--red)}
textarea{resize:vertical}
::placeholder{color:var(--dim)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line2);background:var(--panel2);
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .05s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--muted)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red2);border-color:var(--red2)}
.btn.ghost{background:transparent}
.btn.link{background:none;border:none;color:var(--muted);padding:6px 8px;text-decoration:underline;text-underline-offset:3px}
.btn.danger-ghost{background:transparent;border-color:var(--red-deep);color:var(--red2)}
.btn.danger-ghost:hover{border-color:var(--red);background:var(--red-ink)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.big{padding:15px 22px;font-size:16px;font-family:var(--f-display);letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.btn.block{width:100%}
.btn.yes{background:var(--yes);border-color:var(--yes);color:#04150b;font-family:var(--f-display);font-size:22px;font-weight:400;letter-spacing:.06em;flex:1;padding:14px}
.btn.no{background:var(--red);border-color:var(--red);color:#fff;font-family:var(--f-display);font-size:22px;font-weight:400;letter-spacing:.06em;flex:1;padding:14px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden}
.seg button{background:transparent;border:none;padding:9px 14px;cursor:pointer;color:var(--muted);font-weight:600;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--red);color:#fff}
.seg.locked button{cursor:default}
.seg.locked button:not(.on){opacity:.45}
.chip{border:1px solid var(--line2);border-radius:99px;padding:4px 10px;font-size:12px;letter-spacing:.1em}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);background:rgba(17,18,20,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:30px;height:30px;border-radius:5px}
.brand span{font-family:var(--f-display);font-size:22px;letter-spacing:.06em}
.brand b{color:var(--red2);font-weight:400}
.topbar-right{display:flex;align-items:center;gap:10px}

/* ---------- accueil ---------- */
#view-home{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 20px 60px}
.hero{display:grid;grid-template-columns:1fr 380px;gap:40px 56px;align-items:center;max-width:1040px;width:100%}
.hero-mark{grid-row:span 2;display:none}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(52px,8vw,104px);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;margin:0;grid-column:1}
.hero h1 em{font-style:normal;color:var(--red2)}
.lede{grid-column:1;color:var(--muted);font-size:17px;max-width:460px;margin:0}
.home-card{grid-column:2;grid-row:1/span 2;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px -30px rgba(228,11,0,.25)}
.or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.join-row{display:flex;gap:8px}
.code-input{text-transform:uppercase;letter-spacing:.3em;text-align:center}
.home-rules{list-style:none;padding:0;margin:64px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;max-width:1040px;width:100%;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13px}
.home-rules li{background:var(--bg);padding:18px;color:var(--muted)}
.home-rules b{display:block;color:var(--red2);font-weight:600;margin-bottom:8px}

/* ---------- salle ---------- */
#view-room{flex:1;display:flex;min-height:0}
.room{flex:1;display:grid;grid-template-columns:1fr 320px;min-height:0;width:100%}
.room-main{padding:22px 24px 40px;min-width:0}
.chat{border-left:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;height:calc(100dvh - 57px);position:sticky;top:57px}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 6px}
.chat-log{list-style:none;margin:0;padding:6px 16px 12px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:7px;font-size:14px}
.chat-log li{word-wrap:break-word}
.chat-log .who{font-weight:700;margin-right:6px}
.chat-log .who.A{color:var(--red2)} .chat-log .who.B{color:var(--bone)} .chat-log .who.S{color:var(--muted)}
.chat-log .sys{font-family:var(--f-mono);font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.chat-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.only-mobile{display:none!important}

/* salon */
/* salon centré : tout tient dans une colonne lisible */
#lobby{max-width:760px;margin:8px auto 0}
.invite{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--panel);border:1px dashed var(--line2);border-radius:var(--r);padding:14px 18px;margin-bottom:22px}
.invite-code{font-family:var(--f-display);font-size:40px;letter-spacing:.14em;line-height:1;color:var(--text)}
.teams{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch}
.vs{align-self:center;font-family:var(--f-display);font-size:28px;color:var(--dim)}
.team{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.team::before{content:"";position:absolute;inset:0 0 auto;height:3px}
.team-A::before{background:var(--red)} .team-B::before{background:var(--bone)}
.team header{display:flex;justify-content:space-between;align-items:baseline}
.team h2{font-family:var(--f-display);font-weight:400;font-size:26px;letter-spacing:.03em;text-transform:uppercase;margin:0}
.team-A h2 span{color:var(--red2)} .team-B h2 span{color:var(--bone)}
.count{font-size:12px;color:var(--muted)}
.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-height:118px}
.roster li,.slot-empty{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);background:var(--bg2);font-weight:600}
.slot-empty{border:1px dashed var(--line);background:transparent;color:var(--dim);font-weight:400;font-size:13px}
.avatar{width:24px;height:24px;border-radius:4px;display:grid;place-items:center;font-size:12px;font-family:var(--f-mono);background:var(--panel2);flex-shrink:0}
.team-A .avatar{background:var(--red-ink);color:var(--red2)} .team-B .avatar{background:#2b2924;color:var(--bone)}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;padding:2px 6px;border-radius:4px;border:1px solid var(--line2);color:var(--muted);margin-left:auto}
.tag.host{border-color:var(--red-deep);color:var(--red2)}
.tag+.tag{margin-left:4px}
.roster .off{opacity:.5}
.roster .you{outline:1px solid var(--line2)}
.spectators{display:flex;align-items:center;gap:12px;margin:12px 2px 0;font-size:14px;flex-wrap:wrap}
.spectators .label{margin:0}
.settings{margin-top:26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.settings-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.settings h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:20px;letter-spacing:.05em;text-transform:uppercase}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-bottom:18px}
.settings-grid .field:first-child{grid-column:1/-1}
.board-picker{display:flex;flex-wrap:wrap;gap:8px}
.bp{border:1px solid var(--line2);border-radius:var(--r-sm);padding:9px 12px;background:transparent;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:150px}
.bp small{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.bp.on{border-color:var(--red);background:var(--red-ink)}
.bp.custom{border-style:dashed}
.locked .bp{cursor:default}
.locked .bp:not(.on){opacity:.45}
#btn-start{width:100%}

/* ---------- partie ---------- */
.hud{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.score{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-display);font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.score .muted{font-size:12px;font-family:var(--f-mono)}
.s-team b{font-size:26px;margin:0 6px;font-weight:400}
.s-team.A b{color:var(--red2)}
.turn-banner{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);font-weight:600}
.turn-banner.mine{border-color:var(--red);background:linear-gradient(90deg,var(--red-ink),var(--panel) 70%)}
.timer{font-size:18px;color:var(--text);min-width:52px;text-align:right}
.timer.low{color:var(--red2);animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.game-body{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.dossier{display:flex;flex-direction:column;gap:14px;position:sticky;top:78px}
.dossier-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.remaining{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rem{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column}
.rem span{font-size:10px;letter-spacing:.14em;color:var(--muted)}
.rem b{font-family:var(--f-display);font-size:30px;font-weight:400;line-height:1.1}
.rem.A b{color:var(--red2)} .rem.B b{color:var(--bone)}
#btn-accuse{padding:12px;font-family:var(--f-display);font-size:17px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
#btn-accuse.on{background:var(--red);border-color:var(--red);color:#fff}
.rem small{font-size:11px;color:var(--dim)}
.board-wrap{min-width:0}
.action .act{margin-bottom:16px}
.act{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.act textarea{font-size:17px;margin-bottom:12px;min-height:64px}
.act-row{display:flex;gap:8px;flex-wrap:wrap}
.act-row.center{justify-content:center}
.act-row .btn-accuse{margin-left:auto}
.q-quote{margin:0 0 14px;font-size:20px;font-weight:600;border-left:3px solid var(--red);padding:4px 0 4px 14px}
.q-quote.oral{color:var(--muted);font-style:italic;font-weight:500;font-size:16px}
.qa{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.qa .q-quote{margin:0;flex:1}
.answer-pill{font-family:var(--f-display);font-size:22px;letter-spacing:.08em;padding:4px 14px;border-radius:var(--r-sm)}
.answer-pill.yes{background:var(--yes);color:#04150b} .answer-pill.no{background:var(--red);color:#fff}
.hint{color:var(--muted);font-size:13px;margin:8px 0 12px}
.wait-text{margin:0;color:var(--muted)}
.wait-text b{color:var(--text)}
#q-show-wait{margin:12px 0 0}
.act-split{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.act-split .act-row .btn-accuse{margin-left:0}
.accuse-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:var(--red);background:var(--red-ink)}
.accuse-bar p{margin:0}

/* ---------- cartes ---------- */
.board{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:10px;margin:0 auto;max-width:max(560px,calc((100dvh - 320px) / var(--rows,4) * .75 * var(--cols,6)))}
.card{position:relative;aspect-ratio:3/4;perspective:900px;cursor:default;user-select:none;-webkit-tap-highlight-color:transparent}
.card.clickable{cursor:pointer}
.card-inner{position:absolute;inset:0;transition:transform .45s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.card.down .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8px;overflow:hidden;border:1px solid var(--line2);background:var(--panel2)}
.face.back{transform:rotateY(180deg);background:repeating-linear-gradient(135deg,#1c0604 0 6px,#160403 6px 12px);border-color:var(--red-deep)}
.face.back::before{content:"";position:absolute;inset:22% 18%;background:var(--red);opacity:.55;-webkit-mask:url('/assets/silhouette.png') center/contain no-repeat;mask:url('/assets/silhouette.png') center/contain no-repeat}
.face img{width:100%;height:100%;object-fit:cover;display:block}
/* nom des cartes : même typo pour les boards prédéfinis et les boards perso */
.face .nm{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:var(--text);font-family:var(--f-display);font-weight:400;font-size:clamp(13px,1.4vw,19px);letter-spacing:.02em;text-transform:uppercase;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.face .no{position:absolute;top:6px;left:7px;text-shadow:0 1px 2px #000;font-family:var(--f-mono);font-size:10px;color:var(--muted);z-index:1;transition:opacity .15s}
/* carte abaissée : le numéro disparaît (sinon il apparaît en miroir pendant le retournement) */
.face.front:not(.ph) .no{background:rgba(0,0,0,.5);color:var(--text);padding:1px 4px;border-radius:3px;text-shadow:none}
.card.down .face.front .no,.card.down .face.front .nm{opacity:0}
/* carte sans image : fiche typographique */
.face.ph{display:flex;flex-direction:column;justify-content:flex-end;padding:8px;background:
  radial-gradient(120% 70% at 50% 30%,rgba(228,11,0,.18),transparent 60%),var(--panel2)}
.face.ph::before{content:"";position:absolute;inset:16% 16% 30%;background:var(--text);opacity:.07;-webkit-mask:url('/assets/silhouette.png') center/contain no-repeat;mask:url('/assets/silhouette.png') center/contain no-repeat}
.face.ph .nm{position:relative;background:none;padding:0;text-shadow:none}
.card.clickable:hover .face.front{border-color:var(--muted)}
.card.accusable:hover .face.front{border-color:var(--red2);box-shadow:0 0 0 2px var(--red2)}
.card.secret-mark .face.front{box-shadow:0 0 0 2px var(--bone)}
.card.hit .face.front{box-shadow:0 0 0 3px var(--yes)}
.card.miss .face.front{box-shadow:0 0 0 3px var(--red2)}
.secret-slot .card{width:100%;max-width:170px;margin:0 auto}
.secret-slot .face .nm{font-size:20px}

/* ---------- modales ---------- */
.modal{position:fixed;inset:0;background:rgba(5,5,6,.78);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:16px;overflow-y:auto}
.modal-box{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:26px;width:100%;max-width:560px;box-shadow:0 40px 100px -20px #000}
.modal-box.narrow{max-width:400px;display:flex;flex-direction:column;gap:12px}
.modal-box.wide{max-width:1000px}
.modal-box h2{font-family:var(--f-display);font-weight:400;font-size:30px;letter-spacing:.03em;text-transform:uppercase;margin:0}
.modal-logo{width:56px;height:56px;border-radius:8px}
.modal-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}
.stack{display:flex;flex-direction:column;gap:10px}
.tabs{width:100%;margin-bottom:14px}
.tabs button{flex:1}
/* éditeur */
.editor{display:flex;flex-direction:column;gap:14px;max-height:calc(100dvh - 32px)}
.editor-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-right:30px}
.ed-name{font-family:var(--f-display);font-size:26px;letter-spacing:.03em;background:transparent;border:none;border-bottom:1px solid var(--line2);border-radius:0;padding:4px 0;text-transform:uppercase}
.ed-count{white-space:nowrap;font-size:13px}
.ed-count b{font-size:20px;color:var(--red2)}
.ed-drop{border:1.5px dashed var(--line2);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;transition:.15s}
.ed-drop.over{border-color:var(--red);background:var(--red-ink)}
.ed-rules{margin-top:8px;font-size:11px;color:var(--muted);letter-spacing:.02em}
.ed-url{display:flex;gap:8px;width:100%;max-width:520px}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;overflow-y:auto;min-height:120px;padding:2px}
.ed-card{display:flex;flex-direction:column;gap:5px;position:relative}
.ed-card .thumb{aspect-ratio:3/4;border-radius:7px;overflow:hidden;border:1px solid var(--line2);background:var(--bg2)}
.ed-card img{width:100%;height:100%;object-fit:cover;display:block}
.ed-card input{padding:6px 8px;font-size:12px}
.ed-card .del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:5px;border:none;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;font-size:15px;line-height:1}
.ed-card.loading .thumb{display:grid;place-items:center;color:var(--muted);font-family:var(--f-mono);font-size:11px}
.ed-empty{grid-column:1/-1;color:var(--dim);text-align:center;padding:30px;font-family:var(--f-mono);font-size:12px}
.editor-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.editor-foot .left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* fin de manche */
.roundover{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.roundover h2{font-size:44px}
.roundover h2.A{color:var(--red2)} .roundover h2.B{color:var(--bone)}
.ro-reveal{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;max-width:380px;margin:6px 0}
.ro-score{font-size:15px;letter-spacing:.1em}
.ro-score b{font-family:var(--f-display);font-size:26px;font-weight:400;margin:0 4px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--red);padding:12px 18px;border-radius:var(--r-sm);z-index:60;box-shadow:0 20px 40px -10px #000;max-width:calc(100% - 32px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .settings-grid{grid-template-columns:1fr 1fr}
  .settings-grid .field:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .room{grid-template-columns:1fr}
  .only-mobile{display:inline-flex!important}
  .chat{position:fixed;inset:auto 0 0 0;top:auto;height:min(70dvh,520px);border-left:none;border-top:1px solid var(--line2);z-index:40;transform:translateY(100%);transition:transform .25s;box-shadow:0 -30px 60px -10px #000}
  .chat.open{transform:none}
  .chat-fab{position:fixed;right:16px;bottom:16px;z-index:30;background:var(--panel2);border:1px solid var(--line2);border-radius:99px;padding:11px 18px;font-weight:700;cursor:pointer;align-items:center;gap:8px}
  .badge{background:var(--red);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px}
  .game-body{grid-template-columns:1fr}
  .dossier{position:static;display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto 1fr;gap:10px;align-items:start}
  .dossier-card{grid-row:1/3}
  .dossier-card{padding:8px}
  .remaining{grid-template-columns:1fr;align-content:start}
  .rem{flex-direction:row;align-items:baseline;gap:8px}
  .rem b{font-size:24px}
  .secret-slot .face .nm{font-size:14px}
  .hero{grid-template-columns:1fr;gap:22px}
  .home-card{grid-column:1;grid-row:auto}
  .home-rules{grid-template-columns:1fr 1fr;margin-top:36px}
}
@media (max-width:600px){
  .board{max-width:none}
  .room-main{padding:14px 12px 90px}
  .topbar{padding:10px 14px}
  .teams{grid-template-columns:1fr}
  .vs{justify-self:center;font-size:20px}
  .roster{min-height:0}
  .invite{flex-direction:column;align-items:stretch}
  .settings-grid{grid-template-columns:1fr}
  .seg{width:100%} .seg button{flex:1;padding:9px 6px}
  .bp{flex:1 1 calc(50% - 8px);min-width:0}
  .board{gap:6px}
  .face .nm{font-size:11px;padding:14px 4px 5px}
  .face.ph .nm{padding:0}
  .face .no{font-size:8px;top:3px;left:4px}
  .act textarea{font-size:16px}
  .q-quote{font-size:17px}
  .act-row .btn-accuse{margin-left:0}
  .act-row .btn{flex:1}
  .home-rules{grid-template-columns:1fr}
  .modal-box{padding:20px}
  .editor-head{flex-direction:column;align-items:stretch}
}