0
タイマー
05:00
しゅうりょう！
0

とくてんを 0 に
もどしますか？

background:transparent; color:#fff; font-family:inherit; font-weight:700; font-size:clamp(20px,3.2vw,34px); padding:6px 4px; border-radius:14px; border-bottom:3px dashed rgba(255,255,255,.45); outline:none; text-shadow:0 2px 3px rgba(0,0,0,.18); } .name:focus{background:rgba(255,255,255,.18);border-bottom-color:rgba(255,255,255,.9);} .score{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; width:100%; color:#fff; font-weight:900; line-height:1; font-size:clamp(70px,22vmin,280px); text-shadow:0 6px 0 rgba(0,0,0,.13), 0 10px 18px rgba(0,0,0,.18); font-variant-numeric:tabular-nums; } .score.pop{animation:pop .32s ease;} @keyframes pop{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}} .plus{ width:100%; border:none; border-radius:22px; background:#fff; font-family:inherit; font-weight:900; font-size:clamp(34px,7vmin,76px); padding:clamp(12px,2.2vmin,30px) 0; cursor:pointer; box-shadow:0 7px 0 rgba(0,0,0,.16); transition:transform .06s, box-shadow .06s; min-height:64px; } .team.red .plus{color:var(--red-deep);} .team.blue .plus{color:var(--blue-deep);} .plus:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.16);} .minus{ position:absolute; top:14px; right:14px; width:54px;height:54px; border:3px solid rgba(255,255,255,.7); border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-family:inherit;font-weight:900;font-size:30px; cursor:pointer; display:flex;align-items:center;justify-content:center; line-height:1; } .minus:active{background:rgba(255,255,255,.32);} /* ===== center control column ===== */ .center{ flex:0 0 clamp(160px,20vw,260px); display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.4vh,16px); padding-top:6px; min-height:0; overflow-y:auto; } .timer-box{ width:100%; background:var(--cream-deep); border-radius:24px; padding:clamp(12px,2vh,20px) 10px; text-align:center; box-shadow:inset 0 3px 8px rgba(0,0,0,.06), 0 6px 0 var(--cream-deep); } .timer-label{font-size:clamp(13px,1.4vw,16px);font-weight:700;color:#9c8e7d;letter-spacing:.06em;} .timer{ font-weight:900; font-size:clamp(44px,7vw,82px); line-height:1.05; font-variant-numeric:tabular-nums; color:var(--ink); margin:2px 0 8px; } .timer-box.ended .timer{color:var(--red-deep);} .timer-box.ended{animation:flash .7s steps(1) infinite;} @keyframes flash{50%{background:#FBD9D2;}} .ended-msg{display:none;font-weight:900;color:var(--red-deep);font-size:clamp(18px,2.4vw,26px);} .timer-box.ended .ended-msg{display:block;} .minrow{display:flex;gap:8px;justify-content:center;margin-bottom:8px;} .minrow button{ flex:1;border:none;border-radius:14px;background:#fff; font-family:inherit;font-weight:900;font-size:clamp(18px,2.4vw,26px); padding:8px 0;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.12);color:var(--ink); } .minrow button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.12);} .minrow button:disabled{opacity:.4;} .startbtn{ width:100%;border:none;border-radius:18px; font-family:inherit;font-weight:900;font-size:clamp(20px,2.6vw,30px); padding:clamp(12px,2vh,18px) 0;cursor:pointer;color:#fff; background:#5BB07A;box-shadow:0 6px 0 #4a9466;min-height:56px; } .startbtn.running{background:#E8A33C;box-shadow:0 6px 0 #c9862a;} .startbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #4a9466;} .ctrlrow{display:flex;gap:8px;width:100%;} .ctrl{ flex:1;border:none;border-radius:16px;background:#fff;color:var(--ink); font-family:inherit;font-weight:700;font-size:clamp(14px,1.6vw,18px); line-height:1.15; padding:0 6px;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.12); height:clamp(58px,9vh,76px); display:flex;align-items:center;justify-content:center;text-align:center; } .ctrl:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.12);} .ctrl.reset{color:var(--red-deep);} .fs{width:100%;flex:none;} /* reset confirm */ .confirm{ position:fixed;inset:0;background:rgba(74,63,53,.45); display:none;align-items:center;justify-content:center;z-index:20; padding:20px; } .confirm.show{display:flex;} .confirm-box{ background:var(--cream);border-radius:24px;padding:28px 24px;text-align:center; box-shadow:0 16px 40px rgba(0,0,0,.3);max-width:360px;width:100%; } .confirm-box p{font-weight:900;font-size:clamp(20px,3vw,26px);margin:0 0 20px;} .confirm-btns{display:flex;gap:12px;} .confirm-btns button{ flex:1;border:none;border-radius:16px;font-family:inherit;font-weight:900; font-size:20px;padding:16px 0;cursor:pointer;color:#fff;min-height:56px; } .yes{background:var(--red);box-shadow:0 5px 0 var(--red-deep);} .no{background:#9c8e7d;box-shadow:0 5px 0 #7e7264;} .confirm-btns button:active{transform:translateY(3px);} @media (max-width:560px){ .minus{width:44px;height:44px;font-size:24px;} } /* ===== 縦長（スマホ縦・タブレット縦）：縦積み＋コントロールを横並びバーに ===== */ @media (orientation:portrait){ .stage{flex-direction:column;} .team{flex:1 1 0;width:100%;} .center{ flex:0 0 auto; width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding-top:0; overflow:visible; } .timer-box{flex:2 1 240px;width:auto;padding:8px 10px;} .timer{font-size:clamp(34px,8vw,60px);margin:2px 0 6px;} .ctrlrow{flex:1 1 180px;width:auto;} .fs{flex:1 1 120px;width:auto;} .ctrl{height:clamp(52px,7vh,72px);} }
0
タイマー
05:00
しゅうりょう！
0

とくてんを 0 に
もどしますか？