:root{--vw:1vw;--vh:1vh;--accent:#fffc00;--panel:rgba(18,18,22,.86);--line:rgba(255,255,255,.14)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;color:#fff;overflow:hidden;
  font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
#out{position:fixed;inset:0;width:calc(var(--vw)*100);height:calc(var(--vh)*100);object-fit:cover;display:block;background:#000}
body.fit-contain #out{object-fit:contain}
#frameOv{position:fixed;inset:0;width:calc(var(--vw)*100);height:calc(var(--vh)*100);object-fit:cover;display:none;pointer-events:none}
#frameOv.show{display:block}
body.fit-contain #frameOv{object-fit:contain}
body.cute-frame #count{color:#fff;-webkit-text-stroke:min(calc(var(--vh)*1.2),calc(var(--vw)*1.2)) #ff6fae;paint-order:stroke fill;text-shadow:0 6px 40px rgba(255,111,174,.7)}
.ui{transition:opacity .35s}
body.idle .ui,body.hideui .ui{opacity:0}
body.hideui .ui{pointer-events:none}
body.idle{cursor:none}

/* top bar */
#topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:flex-end;gap:10px;padding:16px;
  background:linear-gradient(rgba(0,0,0,.45),transparent)}
.ibtn{width:46px;height:46px;border-radius:50%;border:none;background:rgba(0,0,0,.38);color:#fff;font-size:20px;
  cursor:pointer;backdrop-filter:blur(8px);display:grid;place-items:center}
.ibtn:hover{background:rgba(0,0,0,.6)}

/* bottom carousel */
#bottom{position:fixed;left:0;right:0;bottom:0;height:240px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
#cats{position:absolute;left:0;right:0;bottom:180px;display:flex;justify-content:center;gap:8px;padding:0 16px;flex-wrap:wrap}
.cat{border:none;border-radius:999px;padding:7px 15px;font:700 14px/1 inherit;font-family:inherit;color:#fff;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);cursor:pointer}
.cat.sel{background:#fff;color:#000}
#lensName{position:absolute;left:0;right:0;bottom:142px;text-align:center;font-weight:700;font-size:18px;
  text-shadow:0 1px 6px rgba(0,0,0,.7);letter-spacing:.05em}
#lenses{position:absolute;left:0;right:0;bottom:0;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;padding:26px calc(calc(var(--vw)*50) - 35px) 38px;scrollbar-width:none}
#lenses::-webkit-scrollbar{display:none}
.lens{flex:0 0 70px;height:70px;border-radius:50%;border:none;background:rgba(255,255,255,.2);font-size:34px;
  display:grid;place-items:center;scroll-snap-align:center;cursor:pointer;transition:transform .2s,background .2s;
  backdrop-filter:blur(6px)}
.lens.sel{transform:scale(1.08);background:rgba(255,255,255,.34)}
#shutter{position:absolute;left:50%;bottom:26px;width:94px;height:94px;margin-left:-47px;border:6px solid #fff;
  border-radius:50%;cursor:pointer;box-shadow:0 0 12px rgba(0,0,0,.4)}
#shutter:active{transform:scale(.94)}

/* hint / toast / hud */
#hint{position:fixed;left:50%;top:16%;transform:translateX(-50%);padding:10px 20px;border-radius:999px;
  background:rgba(0,0,0,.55);font-size:18px;font-weight:700;opacity:0;transition:opacity .3s;pointer-events:none;
  white-space:nowrap}
#hint.show{opacity:1}
#hud{position:fixed;top:16px;left:16px;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;background:rgba(0,0,0,.45);
  padding:6px 10px;border-radius:8px;display:none}
#hud.show{display:block}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:fl .45s ease-out}
@keyframes fl{0%{opacity:.85}100%{opacity:0}}

/* settings */
#settings{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:calc(var(--vw)*92);background:var(--panel);
  backdrop-filter:blur(16px);transform:translateX(105%);transition:transform .3s;overflow:auto;padding:22px 22px 40px;
  z-index:10}
#settings.open{transform:none}
#settings h2{font-size:18px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
#settings h3{font-size:12px;color:rgba(255,255,255,.55);margin:20px 0 8px;letter-spacing:.1em}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.row select,.row input[type=range]{width:170px}
.row select{background:#26262c;color:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}
input[type=range]{accent-color:var(--accent)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.keys{font-size:12px;color:rgba(255,255,255,.6);line-height:1.9;margin-top:6px}
kbd{background:#333;border-radius:4px;padding:1px 6px;font-family:inherit}

/* face paste */
.pbtn{background:var(--accent);color:#000;border:none;border-radius:999px;padding:10px 20px;font-size:15px;font-weight:800;
  cursor:pointer;font-family:inherit;white-space:nowrap}
.pbtn.ghost{background:rgba(255,255,255,.15);color:#fff}
#pasteBar{position:fixed;top:16px;left:50%;transform:translateX(-50%);display:none;gap:8px;transition:opacity .35s}
#pasteBar .pbtn{box-shadow:0 2px 12px rgba(0,0,0,.4)}
#pasteMode{backdrop-filter:blur(8px);background:rgba(0,0,0,.45)}
body.paste-mode #pasteBar{display:flex}
body.idle #pasteBar,body.hideui #pasteBar{opacity:0}
body.paste-mode.no-face #pasteBar{opacity:1}
body.no-face #pasteMode{display:none}
#picker{position:fixed;inset:0;z-index:15;background:rgba(8,8,10,.94);display:none;flex-direction:column}
#picker.open{display:flex}
.pk-head{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-wrap:wrap}
#pkMsg{font-size:15px;font-weight:700}
.pk-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px 16px}
#pkCanvas{max-width:100%;max-height:100%;cursor:crosshair;touch-action:none;border-radius:6px}

/* start */
#start{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;background:radial-gradient(circle at 50% 40%,#2b2b10,#000 70%);text-align:center;padding:24px}
#start h1{font-size:clamp(36px,calc(var(--vw)*6),68px);letter-spacing:.06em}
#start h1 span{color:var(--accent)}
#start p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.8}
#startBtn{background:var(--accent);color:#000;border:none;border-radius:999px;padding:18px 46px;font-size:20px;
  font-weight:800;cursor:pointer}
#startBtn:disabled{opacity:.6;cursor:wait}
#status{min-height:1.5em;color:var(--accent);font-size:15px}

/* 撮影モード・カウントダウン・録画表示 */
#modes{position:fixed;top:16px;left:16px;display:flex;gap:8px}
#hud.show{top:64px}
#count{position:fixed;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;
  font-size:min(calc(var(--vh)*42),calc(var(--vw)*42));font-weight:900;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.6)}
#count.show{display:flex}
#count.tick{animation:tick .9s ease-out}
@keyframes tick{0%{transform:scale(1.5);opacity:0}15%{opacity:1}100%{transform:scale(.8);opacity:.25}}
#rec{position:fixed;top:70px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:8px;padding:8px 18px;
  border-radius:999px;background:rgba(0,0,0,.6);font-size:16px;font-weight:700}
#rec.show{display:flex}
#rec span{width:14px;height:14px;border-radius:50%;background:#ff2d2d;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
body.recording #shutter{border-color:#ff2d2d;background:rgba(255,45,45,.55)}
body.busy #shutter{opacity:.5}

/* 撮影後のプレビュー */
#review{position:fixed;inset:0;z-index:14;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);padding:calc(var(--vh)*4) calc(var(--vw)*4)}
#review.open{display:flex}
.rv-box{display:flex;gap:28px;align-items:center;max-width:100%;max-height:100%}
#rvMedia img,#rvMedia video{max-width:calc(var(--vw)*62);max-height:calc(var(--vh)*84);border-radius:10px;box-shadow:0 10px 50px rgba(0,0,0,.6);display:block}
.rv-side{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:200px;text-align:center}
#rvMsg{font-size:20px;font-weight:800}
#rvQr img{width:min(calc(var(--vh)*26),240px);height:min(calc(var(--vh)*26),240px);background:#fff;padding:10px;border-radius:10px;image-rendering:pixelated;display:block}
#rvQrMsg{font-size:14px;color:rgba(255,255,255,.75);line-height:1.6}

/* 呼び込み表示（顔がしばらく映っていないとき） */
#attract{position:fixed;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(0,0,0,.55);text-align:center;pointer-events:none}
body.attract #attract{display:flex}
body.attract #hint{display:none}
.at-emoji{font-size:min(calc(var(--vh)*22),180px);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(calc(var(--vh)*-4)) rotate(8deg)}}
.at-msg{font-size:clamp(28px,calc(var(--vw)*5),64px);font-weight:900;color:var(--accent);text-shadow:0 3px 20px rgba(0,0,0,.6)}
.at-sub{font-size:clamp(14px,calc(var(--vw)*2),24px);color:rgba(255,255,255,.85)}
/* キオスク（無人）表示では設定系のボタンを隠す。設定は S キーで開ける */
body.kiosk #topbar{display:none}

/* 画面の回転（縦置きモニターなど）。body ごと回し、幅と高さの単位を入れ替える */
html.rot90,html.rot270{--vw:1vh;--vh:1vw}
html.rot90 body,html.rot180 body,html.rot270 body{position:fixed;top:0;left:0;width:calc(var(--vw)*100);height:calc(var(--vh)*100);transform-origin:0 0}
html.rot90 body{transform:translateX(100vw) rotate(90deg)}
html.rot180 body{transform:translate(100vw,100vh) rotate(180deg)}
html.rot270 body{transform:translateY(100vh) rotate(270deg)}
.row input[type=number]{width:74px;background:#26262c;color:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}

/* 手かざしメニュー */
.hb{position:fixed;top:calc(var(--vh)*12);right:calc(var(--vw)*3);width:min(calc(var(--vh)*20),calc(var(--vw)*20));aspect-ratio:1;display:none;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.2);cursor:pointer;transition:transform .15s,background .15s;z-index:2}
body.handbtn .hb{display:flex}
.hb svg{position:absolute;inset:0;transform:rotate(-90deg);pointer-events:none}
.hb circle{fill:none;stroke-width:7}
.hb-bg{stroke:rgba(255,255,255,.4)}
.hb-ring{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:289.03}
.hb span{display:flex;flex-direction:column;align-items:center;font-size:min(calc(var(--vh)*6),calc(var(--vw)*6));font-weight:900;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hb small{font-size:.34em;margin-top:.3em}
.hb.on{background:rgba(255,252,0,.28);transform:scale(1.08)}
body.attract .hb{opacity:0}
#hmenu{position:fixed;inset:0;z-index:6;display:none;background:rgba(0,0,0,.42)}
#hmenu.open{display:block}
#hmGrid{position:absolute;inset:1.2%;display:grid;grid-template-columns:repeat(var(--cols,12),1fr);grid-template-rows:repeat(var(--rows,8),1fr);gap:.5%}
.hm-cell{position:relative;min-width:0;min-height:0;border:none;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;overflow:hidden;padding:2px;container-type:size;transition:transform .12s}
.hm-icon{font-size:46cqh;line-height:1}
.hm-name{font-size:15cqh;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hm-cell.sel{background:rgba(255,255,255,.34);outline:2px solid #fff}
.hm-cell.hm-close{background:rgba(255,77,77,.55)}
.hm-cell.hot{transform:scale(1.18);z-index:1;background:rgba(40,40,40,.95);outline:3px solid var(--accent)}
.hm-cell.hot::after{content:"";position:absolute;left:0;bottom:0;height:9%;width:calc(var(--k,0)*100%);background:var(--accent)}
.hcur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:4px solid #fff;background:rgba(255,252,0,.75);
  box-shadow:0 0 12px rgba(0,0,0,.6);pointer-events:none;z-index:7;display:none}
#out.shake{animation:shake .5s linear}
@keyframes shake{10%{transform:translate(-1.2%,.8%)}30%{transform:translate(1.4%,-1%)}50%{transform:translate(-1%,-1.2%)}70%{transform:translate(1%,1%)}90%{transform:translate(-.6%,.4%)}}

/* アナウンス（エフェクトのやり方の案内） */
#announce{position:fixed;left:50%;top:calc(var(--vh)*2.5);transform:translateX(-50%) scale(.6);opacity:0;pointer-events:none;z-index:4;text-align:center;
  padding:calc(var(--vh)*1.4) calc(var(--vw)*2.6);border-radius:24px;transform-origin:50% 0;white-space:nowrap;background:rgba(0,0,0,.72);border:4px solid var(--accent);max-width:calc(var(--vw)*88);
  transition:opacity .3s,transform .3s cubic-bezier(.2,1.6,.4,1)}
#announce.show{opacity:1;transform:translateX(-50%) scale(1)}
#anName{font-size:clamp(16px,calc(var(--vw)*2.2),30px);font-weight:700;color:rgba(255,255,255,.85);margin-bottom:.35em}
#anMsg{font-size:clamp(24px,calc(var(--vw)*3.6),52px);font-weight:900;color:var(--accent);line-height:1.25;text-shadow:0 3px 14px rgba(0,0,0,.6)}
body.attract #announce{display:none}

/* 画像を使うレンズボタン（レンズ定義の iconImg） */
.lens img{width:82%;height:82%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.hm-icon img{height:52cqh;width:auto;display:block;pointer-events:none}
/* レンズボタンを表示しない設定（ジャンル・レンズ名・レンズの列を隠す。シャッターは残す） */
body.nolens #cats,body.nolens #lensName,body.nolens #lenses{display:none}
body.nolens #bottom{height:150px}

/* 設定：表示するレンズの一覧 */
.lf-head{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:14px;font-weight:700;cursor:pointer}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.lf-grid label{display:flex;align-items:center;gap:6px;font-size:13px;padding:4px 0;cursor:pointer;min-width:0}
.lf-grid label span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-icon{flex:0 0 22px;width:22px;height:22px;font-size:18px;line-height:22px;text-align:center}
.lf-icon img{width:22px;height:22px;object-fit:contain;display:block}
#lensFilter input[type=checkbox]{flex:0 0 18px;width:18px;height:18px}
.cat[hidden]{display:none}

/* 保存した顔レンズ */
#pasteAdd{backdrop-filter:blur(8px);background:rgba(0,0,0,.5)}
body.no-face #pasteAdd{display:none}
.lens img.round{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:none}
.hm-icon img.round{height:54cqh;aspect-ratio:1;object-fit:cover;border-radius:50%}
.lf-icon img.round{object-fit:cover;border-radius:50%}
#nameDlg{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7)}
#nameDlg.open{display:flex}
.nd-box{background:#1d1d22;border:1px solid var(--line);border-radius:18px;padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:300px}
.nd-title{font-size:18px;font-weight:800}
#ndThumb{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#333}
#ndName{width:240px;font-size:18px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#2a2a30;color:#fff;text-align:center;font-family:inherit}
#ndMsg{min-height:1.3em;font-size:13px;color:#ff8a8a}
.nd-btns{display:flex;gap:10px}
#faceList .row img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px}
#faceList .row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#faceList .row button{font-size:12px;padding:6px 12px;background:#ff4d4d;color:#fff}
#faceList .empty{font-size:12px;color:rgba(255,255,255,.5);padding:8px 0}

.nd-opt{display:flex;align-items:center;gap:8px;font-size:14px}
.nd-opt select,.fl-opt select{background:#26262c;color:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 6px;font-size:12px}
.nd-note{font-size:12px;color:rgba(255,255,255,.6)}
.fl-opt{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.75);padding:4px 0 10px 46px;border-bottom:1px solid var(--line)}
#faceList .row{border-bottom:none}
.fl-opt{flex-wrap:wrap}
.fl-set{flex-basis:100%;font-size:11px;color:rgba(255,255,255,.5)}
.nd-note{text-align:center;line-height:1.6}

/* 手かざしメニューのボタンの文字 */
.hb small{white-space:nowrap;font-size:.3em;background:rgba(0,0,0,.55);padding:.25em .7em;border-radius:999px;margin-top:.35em}
/* 呼び込み表示の案内文：手かざしメニューが有効かどうかで切り替える */
.at-btn{display:block}.at-hand{display:none}
body.handbtn .at-btn{display:none}body.handbtn .at-hand{display:block}
/* 呼び込み表示のあいだも、手かざしメニューのボタンは見せておく（案内文がこのボタンを指しているため） */
body.attract .hb{opacity:1;z-index:6}
.hb-ring{stroke-linecap:butt}
/* 一覧の背景を薄くしたぶん、ボタンの文字が読めるよう影を付ける */
.hm-name{text-shadow:0 1px 4px rgba(0,0,0,.9)}
.hm-cell{background:rgba(40,40,46,.5)}
.hm-cell.sel{background:rgba(120,120,130,.6)}

/* ゲーム */
#game{position:fixed;inset:0;pointer-events:none;z-index:4;display:none;--gs:min(calc(var(--vh)*1),calc(var(--vw)*.62))}
#game.show{display:block}
body.gaming .hb,body.gaming .hcur{opacity:0!important;pointer-events:none}
#game[data-st=ready] #gBar,#game[data-st=result] #gBar{opacity:0}
#gBar{position:absolute;left:50%;top:calc(var(--vh)*1.6);transform:translateX(-50%);display:flex;gap:calc(var(--gs)*2.4);align-items:center;white-space:nowrap;
  padding:calc(var(--gs)*.9) calc(var(--gs)*2.6);border-radius:999px;background:rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.25);transition:opacity .3s}
#gTitle{font-size:calc(var(--gs)*2.6);font-weight:800;color:rgba(255,255,255,.9)}
#gTime{font-size:calc(var(--gs)*3.8);font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
#gTime:empty{display:none}
#gTime.hurry{color:#ff4d4d;animation:blink .5s steps(1) infinite}
#gPanel{position:absolute;left:50%;top:calc(var(--vh)*7);transform:translateX(-50%) scale(.85);opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.2,1.5,.4,1);
  width:min(calc(var(--vw)*90),calc(var(--gs)*95));padding:calc(var(--gs)*2.4) calc(var(--gs)*3.2);border-radius:calc(var(--gs)*3);
  background:rgba(12,14,24,.82);border:4px solid var(--accent);text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#gPanel.show{opacity:1;transform:translateX(-50%) scale(1)}
#gPanel.ready{top:auto;bottom:calc(var(--vh)*20);width:min(calc(var(--vw)*80),calc(var(--gs)*80))}
#gPanel.result{top:50%;transform:translate(-50%,-50%) scale(.85)}#gPanel.result.show{transform:translate(-50%,-50%) scale(1)}
.g-icon{font-size:calc(var(--gs)*7);line-height:1.1}
.g-title{font-size:calc(var(--gs)*5);font-weight:900;color:var(--accent);margin:.1em 0 .25em}
.g-lead{font-size:calc(var(--gs)*2.7);font-weight:800}
.g-start{margin:calc(var(--gs)*1.6) auto 0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--gs)*.8);font-size:calc(var(--gs)*3.2);font-weight:900;color:#9dff9d}
.g-start span{animation:bob2 1.2s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(calc(var(--gs)*-.8))}}
.g-bar{width:60%;height:calc(var(--gs)*1.3);border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}.g-bar i{display:block;height:100%;width:0;background:#9dff9d;border-radius:999px}
#gStartBtn{pointer-events:auto;font-size:calc(var(--gs)*2.2);padding:.35em 1.4em}
body.idle #gStartBtn{opacity:.35}
.g-rules{list-style:none;text-align:left;margin:calc(var(--gs)*1.4) auto;display:inline-block;font-size:calc(var(--gs)*3);font-weight:800;line-height:1.55}
.g-rules li::before{content:'▶ ';color:var(--accent)}
.g-safe{font-size:calc(var(--gs)*2.6);font-weight:800;color:#ffd0a0;background:rgba(255,120,0,.18);border-radius:12px;padding:.4em .8em}
.g-sub{margin-top:.5em;font-size:calc(var(--gs)*2.2);opacity:.8}
.g-res{display:flex;flex-direction:column;gap:calc(var(--gs)*.6);margin:calc(var(--gs)*1.2) 0}
.g-pr,.g-ri{display:flex;align-items:center;gap:calc(var(--gs)*1.2);font-weight:900;padding:.2em .6em;border-radius:10px;background:rgba(255,255,255,.06)}
.g-pr{font-size:calc(var(--gs)*3.6)}.g-pr em,.g-ri em{margin-left:auto;font-style:normal;color:var(--accent)}
.g-pr i,.g-ri i{width:1em;height:1em;border-radius:50%;flex:none;border:2px solid #fff}
.g-rank{margin-top:calc(var(--gs)*1.4);text-align:left}
.g-rh{font-size:calc(var(--gs)*2.8);font-weight:900;color:#ffd76a;margin-bottom:.3em;text-align:center}
.g-ri{font-size:calc(var(--gs)*2.4);margin-top:3px}.g-ri b{width:1.4em;text-align:center}
.g-ri.me{background:rgba(255,252,0,.25);animation:blink 1s steps(1) 4}
.g-empty{font-size:calc(var(--gs)*2.3);opacity:.75;text-align:center}
#gBig{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-weight:900;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.7),0 0 4px #000}
#gBig.show{display:flex;animation:gpop 1s ease-out forwards}
#gBig.num{font-size:calc(var(--gs)*40)}#gBig.go{font-size:calc(var(--gs)*15);color:var(--accent)}
@keyframes gpop{0%{transform:scale(1.6);opacity:0}15%{transform:scale(1);opacity:1}75%{opacity:1}100%{opacity:0}}
#gQ{position:absolute;left:50%;top:calc(var(--vh)*9.5);transform:translateX(-50%);width:min(calc(var(--vw)*92),calc(var(--gs)*150));display:none;text-align:center;
  padding:calc(var(--gs)*1.4) calc(var(--gs)*2.4);border-radius:calc(var(--gs)*2.4);background:rgba(10,20,60,.82);border:3px solid #7fb3ff}
#gQ.show{display:block}
.q-no{font-size:calc(var(--gs)*2.2);font-weight:800;color:#9cc4ff}
.q-text{font-size:calc(var(--gs)*4.4);font-weight:900;line-height:1.3}
.q-bar{height:calc(var(--gs)*1);margin-top:.5em;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}.q-bar i{display:block;height:100%;background:var(--accent);transition:width .1s linear}
.q-ans{margin-top:.4em;font-size:calc(var(--gs)*3);font-weight:800}.q-ans b{color:#5dff8f;font-size:1.25em}.q-ans span{font-size:.8em;opacity:.9}
.g-need{display:none;margin-top:calc(var(--gs)*1);font-size:calc(var(--gs)*2.8);font-weight:900;color:#ffb3b3}.g-need.show{display:block}
.g-cd{display:flex;align-items:baseline;justify-content:center;gap:.3em;color:var(--accent);font-weight:900;margin-bottom:.1em}
.g-cd b{font-size:calc(var(--gs)*11);line-height:1;display:inline-block;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.g-cd b.tick{animation:cdpop .9s ease-out}.g-cd span{font-size:calc(var(--gs)*3.6)}
@keyframes cdpop{0%{transform:scale(1.6);opacity:.3}20%{transform:scale(1);opacity:1}}
#gPanel.how{top:calc(var(--vh)*4)}