:root { font-family: "Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif; color:#17212b; background:#eef5fb; }
* { box-sizing:border-box; } html,body { margin:0; width:100%; height:100%; overflow:hidden; }
.board { height:100vh; display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; background:linear-gradient(135deg,#f8fbfd,#e6f1f9); }
section { min-width:0; position:relative; }
section header { color:#fff; font-size:clamp(22px,3vw,50px); padding:.3em .65em; font-weight:700; }
.waiting header { background:#566873; }.calling header { background:#08743f; }
.numbers { display:grid; grid-template-columns:repeat(2,1fr); align-content:start; gap:.12em .45em; padding:.35em .6em; font-size:clamp(38px,7vw,112px); line-height:1.03; font-weight:700; font-variant-numeric:tabular-nums; }
.calling .numbers { color:#06743e; grid-template-columns:1fr; text-align:center; font-size:clamp(50px,9vw,145px); }
.called-history { position:absolute; right:3%; bottom:3%; max-width:88%; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35em .6em; color:#60717e; font-size:clamp(22px,3.4vw,54px); font-weight:700; }
footer { grid-column:1/-1; padding:.35em; text-align:center; font-size:clamp(22px,3vw,54px); font-weight:700; background:rgba(255,255,255,.88); }
.empty { color:#9aabb7; font-size:.45em; padding-top:1em; text-align:center; }
.audio-unlock { position:fixed; z-index:10; right:12px; bottom:12px; min-height:42px; padding:7px 12px; border:0; border-radius:8px; color:#fff; background:#b42318; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.audio-unlock.enabled { background:#08743f; opacity:.72; }