/* Draw My Face From Memory — 本游戏自己的样式(前缀 bfg-dmf-)。共用组件在 static/bfg.css「GAME UI KIT」一段。 */
.bfg-dmf-head{padding:10px 16px 0;flex:none}
.bfg-dmf-head .bfg-sd{margin-top:4px}
/* 画板:拇指区以上能放下的最大正方形 */
.bfg-dmf-board{flex:1;min-height:0;container-type:size;display:grid;place-items:center;margin:10px 16px 12px}
.bfg-dmf-paper{width:100%;aspect-ratio:1;max-height:100%;width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
canvas.bfg-dmf-cv{display:block;width:100%;height:100%;max-width:none;border:2px solid var(--ink);border-radius:18px;background:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bfg-dmf-paper canvas.bfg-dmf-cv{box-shadow:0 6px 0 var(--ink);cursor:crosshair}
.bfg-dmf-tools{flex:none;padding:0 16px 16px;display:grid;gap:14px}
.bfg-dmf-sw{display:flex;justify-content:space-between;gap:8px;padding:0 6px}
.bfg-dmf-sw button{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--c);box-shadow:inset 0 0 0 3px #fff;padding:0;flex:none;transition:transform .12s;touch-action:manipulation}
.bfg-dmf-sw button.on{transform:scale(1.16);box-shadow:inset 0 0 0 3px #fff,0 0 0 3px #fff,0 0 0 5px var(--ink)}
.bfg-dmf-btns{display:grid;grid-template-columns:1fr 1.7fr;gap:12px}
.bfg-fs .bfg-dmf-btns .bfg-btn{min-height:56px}
/* 等对方画完:自己的画缩小放着 */
.bfg-dmf-wait{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:10px 16px}
.bfg-dmf-mini{width:min(62vw,300px);width:min(62cqw,36cqh,300px);aspect-ratio:1;transform:rotate(-3deg);margin-left:6px}
.bfg-dmf-mini canvas{box-shadow:0 6px 0 var(--ink)}
/* 招牌瞬间:两张画像并排,遮布同时掀开 */
.bfg-dmf-rv{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8px 16px 0}
.bfg-dmf-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:calc(68vh + 14px);max-width:calc(68cqh + 14px)}
.bfg-dmf-fr{margin:0;min-width:0;transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.bfg-dmf-in{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:1;box-shadow:0 6px 0 var(--ink)}
.bfg-dmf-veil{position:absolute;inset:0;background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:600 11.5px/1.2 var(--mono);letter-spacing:.09em;border-radius:16px;transition:transform .42s cubic-bezier(.5,0,.2,1)}
.bfg-dmf-veil .bfg-tok{border-color:#fff}
.bfg-dmf-pair.open .bfg-dmf-veil{transform:translateY(-104%)}
.bfg-dmf-pair.shake .bfg-dmf-fr{animation:bfg-dmf-wob .35s}
@keyframes bfg-dmf-wob{25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
.landed .bfg-dmf-fr:nth-child(1){transform:rotate(-2deg)}.landed .bfg-dmf-fr:nth-child(2){transform:rotate(2deg)}
.bfg-dmf-fr figcaption{margin-top:14px}
.bfg-dmf-fr.ask .bfg-dmf-in{outline:4px solid var(--mari);outline-offset:2px}
.bfg-dmf-rate{flex:none;min-height:158px;padding:14px 16px 18px;display:grid;gap:10px;align-content:end}
.bfg-dmf-ask{font:700 19px/1.25 var(--body)}
.dmf-r .bfg-vd h3{font-size:min(7.4vw,30px);font-size:min(7.4cqw,30px)}
/* 横屏手机:画板在左,工具在右 */
@container bfgfs (max-height:520px) and (min-width:560px){
 .bfg-fs-in.dmf{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto auto 1fr}
 .dmf .bfg-dmf-board{grid-column:1;grid-row:3/5;margin:8px 16px 10px}
 .dmf .bfg-dmf-head{grid-column:2;grid-row:3;padding:10px 20px 0 0}
 .dmf .bfg-dmf-tools{grid-column:2;grid-row:4;align-content:end;padding:0 20px 12px 0}
 .dmf .bfg-dmf-wait{grid-column:1;grid-row:3/5}.dmf .bfg-mid{grid-column:2;grid-row:3/5}
 .dmf-r .bfg-dmf-rv{grid-column:1;grid-row:3/5}.dmf-r .bfg-dmf-rate{grid-column:2;grid-row:3/5;padding-left:0}
 .bfg-dmf-pair{max-width:calc(110cqh)}
 .dmf-r .bfg-vd{display:none}
}
@container bfgfs (min-width:700px) and (min-height:521px){
 .bfg-dmf-head,.bfg-dmf-rv,.bfg-dmf-wait{padding-inline:40px}.bfg-dmf-board{margin-inline:40px}
 .bfg-dmf-tools{padding:0 40px 20px;grid-template-columns:1fr 1fr;align-items:center}
 .bfg-dmf-sw{justify-content:flex-start;gap:16px}
 .bfg-dmf-rate{padding:14px 40px 22px}
 .bfg-dmf-pair{max-width:560px}
}