/* 本番の舞台と決着（C1）。契約 ../../API.md §6-3・§6-4。色と書体は tokens.css の変数だけを使う。 「昭和〜平成のバラエティ番組のセット」×「熊本の祭りの夜」。太い墨線・ずらし影・サンバースト・電飾。 スマホ縦（390×844）／PC（1280×800）／スタジオ（1920×1080・）。 */ /* ===== 舞台の枠 ===== */ .screen.mk-stage{ position:absolute; inset:0; display:grid; overflow:hidden; grid-template-rows:auto auto minmax(0,1fr) auto auto; grid-template-areas:"head" "meter" "main" "caps" "ctrls"; background:var(--stage); color:var(--white); font-family:var(--font-body); -webkit-text-size-adjust:100%; } .mk-stage *{box-sizing:border-box} .mk-stage__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: repeating-conic-gradient(from 0deg at 50% 4%, rgba(255,201,60,.085) 0deg 5.2deg, rgba(255,201,60,0) 5.2deg 10.4deg), radial-gradient(130% 70% at 50% -6%, var(--stage-3) 0%, var(--stage-2) 42%, var(--stage) 78%); } .mk-stage__bg::after{ content:""; position:absolute; inset:0; opacity:.16; background-image:radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.2px); background-size:13px 13px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%); mask-image:linear-gradient(180deg,#000,transparent 62%); } /* テロップ文字（縁取り） */ .mk-stage .telop, .mk-head__title,.mk-clock__v,.mk-name__n,.mk-vs__n,.mk-round b,.mk-pop,.mk-sticker__t,.mk-band__t,.mk-paused__t{ font-family:var(--font-display); font-weight:400; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; letter-spacing:.01em; } /* ===== 上の帯: ステージ名・残り時間 ===== */ .mk-head{ grid-area:head; position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:calc(8px + env(safe-area-inset-top)) 12px 4px; } .mk-head__l{min-width:0} .mk-head__k{display:flex; align-items:center; gap:6px; margin-bottom:2px} .mk-head__badge,.mk-head__lv{ display:inline-block; padding:2px 8px; border-radius:var(--r-pill); font:700 .66rem/1.5 var(--font-body); border:2px solid var(--ink); } .mk-head__badge{background:var(--gold); color:var(--ink)} .mk-head__lv{background:var(--red); color:var(--white)} .mk-head__title{ margin:0; font-size:1.32rem; line-height:1.15; color:var(--gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mk-head__mission{ margin:2px 0 0; font:700 .72rem/1.3 var(--font-body); color:rgba(255,255,255,.78); overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; } .mk-clock{display:flex; flex-direction:column; align-items:center; flex:0 0 auto; line-height:1} .mk-clock__k{font:700 .6rem/1 var(--font-body); color:rgba(255,255,255,.7); letter-spacing:.14em} .mk-clock__v{font-size:2.3rem; color:var(--white); margin-top:1px; font-variant-numeric:tabular-nums} [data-phase="clutch"] .mk-clock__v,[data-phase="overtime"] .mk-clock__v{color:var(--red); animation:mk-beat .58s var(--ease-pop) infinite} @keyframes mk-beat{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}} /* ===== よかよメーター ===== */ .mk-meter{grid-area:meter; position:relative; z-index:2; padding:2px 12px 10px} .mk-meter__k{ display:inline-block; font:700 .66rem/1.5 var(--font-body); color:var(--ink); background:var(--paper); border:2px solid var(--ink); border-radius:var(--r-pill); padding:1px 9px; margin-bottom:4px; letter-spacing:.06em; } .mk-meter__wrap{display:flex; align-items:center; gap:9px} .mk-meter__track{ position:relative; flex:1 1 auto; min-width:0; height:28px; background:var(--paper-2); border:var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-sm); overflow:visible; } .mk-meter__fill{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:var(--r-pill); background: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 7px, rgba(255,255,255,0) 7px 15px), linear-gradient(90deg,var(--orange),var(--gold)); transition:width .42s var(--ease-out); } .mk-meter__tick{position:absolute; top:3px; bottom:3px; width:3px; background:var(--ink); opacity:.28; border-radius:2px} .mk-meter__num{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font:400 .84rem/1 var(--font-display); color:var(--ink); z-index:3; text-shadow:0 1px 0 rgba(255,255,255,.8); } .mk-meter__pops{position:absolute; inset:0; pointer-events:none} .mk-pop{ position:absolute; bottom:70%; transform:translate(-50%,0); white-space:nowrap; font-size:1.5rem; color:var(--gold); animation:mk-pop 1.5s var(--ease-out) forwards; } .mk-pop.is-down{color:var(--violet)} .mk-pop.is-critical{color:var(--gold)} .mk-pop.is-good{color:var(--green)} .mk-pop.is-bad{color:var(--violet)} .mk-pop.is-landmine{color:var(--red)} @keyframes mk-pop{0%{opacity:0;transform:translate(-50%,16px) scale(.6)}22%{opacity:1;transform:translate(-50%,-4px) scale(1.18)} 40%{transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-38px) scale(1)}} .mk-meter__track.is-flash{box-shadow:var(--shadow-glow)} .mk-meter__track.is-flash-down{box-shadow:0 0 0 4px var(--violet),0 0 26px rgba(91,91,214,.6)} .mk-meter__track.is-full .mk-meter__fill{animation:mk-full .5s var(--ease-pop) 2} @keyframes mk-full{0%,100%{filter:none}50%{filter:brightness(1.45)}} .mk-meter__goal{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; border:3px dashed rgba(255,255,255,.5); display:grid; place-items:center; color:rgba(255,255,255,.6); text-align:center; } .mk-meter__goalt{font:400 .63rem/1 var(--font-display); letter-spacing:-.04em} .mk-meter__goal.is-lit{ border:3px solid var(--red); background:var(--red); color:var(--white); box-shadow:var(--shadow-glow); animation:mk-beat .5s var(--ease-pop) 3; } .is-near .mk-meter__goal{border-color:var(--gold); color:var(--gold)} /* ===== 中央: 相手 ===== */ .mk-main{ grid-area:main; position:relative; min-height:0; z-index:1; margin:0 12px; border:var(--line); border-radius:var(--r); background:#0E0B1A; overflow:hidden; box-shadow:var(--shadow-sm); } .mk-face{position:absolute; inset:0; z-index:1} .mk-fx{position:absolute; inset:0; z-index:9; pointer-events:none} .mk-main::after{ /* 電飾の縁 */ content:""; position:absolute; inset:0; z-index:8; pointer-events:none; border-radius:calc(var(--r) - 3px); box-shadow:inset 0 0 0 3px rgba(255,201,60,.22); } .mk-name{ position:absolute; left:8px; bottom:8px; z-index:5; max-width:70%; background:var(--ink); border:2px solid var(--gold); border-left:7px solid var(--gold); border-radius:var(--r-sm); padding:3px 9px 4px; box-shadow:var(--shadow-sm); } .mk-name__n{display:block; font-size:1rem; line-height:1.2; color:var(--white); -webkit-text-stroke-width:3px} .mk-name__k{display:block; font:700 .62rem/1.3 var(--font-body); color:var(--gold)} .mk-wm{ position:absolute; right:8px; bottom:7px; z-index:5; font:700 .56rem/1 var(--font-body); color:rgba(255,255,255,.45); letter-spacing:.06em; } /* 一時停止 */ .mk-paused{position:absolute; inset:0; z-index:12; display:none; place-content:center; text-align:center; gap:6px; background:rgba(21,16,43,.82); padding:18px} .is-paused .mk-paused{display:grid} .is-paused .mk-face{filter:brightness(.4) saturate(.6)} .mk-paused__t{font-size:1.8rem; color:var(--gold)} .mk-paused__s{font:700 .8rem/1.5 var(--font-body); color:rgba(255,255,255,.85)} /* 判定中… の帯 */ .mk-band{ position:absolute; left:-4%; right:-4%; top:34%; z-index:11; transform:rotate(-2deg) scaleY(0); transform-origin:center; transition:transform .24s var(--ease-pop); background:repeating-linear-gradient(135deg,var(--red) 0 16px,var(--red-deep) 16px 32px); border-top:var(--line-thick); border-bottom:var(--line-thick); padding:7px 0; text-align:center; } .mk-band.is-on{transform:rotate(-2deg) scaleY(1)} .mk-band__t{font-size:1.7rem; color:var(--white); -webkit-text-stroke-width:4px} /* カンペ（ADのスケッチブック） */ .mk-kanpe{ position:absolute; right:8px; bottom:10px; z-index:13; width:min(64%,238px); transform:translate(130%,6px) rotate(9deg); opacity:0; transition:transform .42s var(--ease-pop),opacity .2s linear; } .mk-kanpe.is-on{transform:translate(0,0) rotate(-3deg); opacity:1} .mk-kanpe__paper{ background:#fff; border:var(--line); border-radius:6px; box-shadow:var(--shadow); padding:13px 12px 12px; min-height:88px; } .mk-kanpe__k{ display:inline-block; font:700 .6rem/1.4 var(--font-body); color:var(--white); background:var(--ink); border-radius:var(--r-pill); padding:1px 8px; margin-bottom:5px; } .mk-kanpe__t{margin:0; font:400 1.18rem/1.3 var(--font-hand); color:var(--ink)} .mk-kanpe__rings{position:absolute; left:14px; right:14px; top:-7px; display:flex; justify-content:space-between; z-index:2} .mk-kanpe__rings i{width:9px; height:15px; border:3px solid #9aa0b4; border-radius:var(--r-pill); background:#e9ecf3} /* ===== 心の声・ステッカー（スマホは舞台に重ね、スタジオは右の柱） ===== */ .mk-side{grid-area:main; position:relative; z-index:6; pointer-events:none; margin:0 12px; min-width:0} .mk-inner{ position:absolute; left:10px; top:10px; width:min(76%,282px); z-index:7; padding:20px 30px 21px; opacity:0; transform:translateY(-8px) scale(.9); transition:opacity .2s linear,transform .34s var(--ease-pop); } .mk-inner.is-on{opacity:1; transform:none} .mk-inner__cloud{position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(3px 3px 0 rgba(27,23,38,.35))} .mk-inner__tag{ position:relative; display:inline-block; z-index:2; margin-bottom:2px; font:700 .58rem/1.5 var(--font-body); color:var(--white); background:var(--violet); border:2px solid var(--ink); border-radius:var(--r-pill); padding:0 8px; } .mk-inner__t{ position:relative; z-index:2; margin:0; color:var(--ink); font:400 .96rem/1.3 var(--font-hand); word-break:break-word; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } .mk-inner__d1,.mk-inner__d2{position:absolute; background:var(--paper); border:3px solid var(--ink); border-radius:50%; z-index:1} .mk-inner__d1{width:17px; height:17px; left:26px; bottom:-14px} .mk-inner__d2{width:10px; height:10px; left:14px; bottom:-27px} .mk-stickers{position:absolute; inset:0; display:grid; justify-items:center; align-content:end; padding-bottom:22%; z-index:8; pointer-events:none} .mk-sticker{position:relative; display:grid; place-items:center; animation:mk-stick .44s var(--ease-pop) both} .mk-sticker.is-out{animation:mk-stickout .4s var(--ease-out) forwards} @keyframes mk-stick{0%{opacity:0;transform:rotate(var(--tilt,-3deg)) scale(.3)} 60%{opacity:1;transform:rotate(var(--tilt,-3deg)) scale(1.16)}100%{opacity:1;transform:rotate(var(--tilt,-3deg)) scale(1)}} @keyframes mk-stickout{to{opacity:0;transform:rotate(var(--tilt,-3deg)) scale(.86) translateY(-14px)}} .mk-sticker__card{ position:relative; z-index:2; text-align:center; padding:10px 20px 11px; min-width:148px; border:var(--line-thick); border-radius:var(--r); box-shadow:var(--shadow); } .mk-sticker__t{display:block; font-size:1.55rem; line-height:1.1; -webkit-text-stroke-width:4px} .mk-sticker__l{display:block; margin-top:3px; font:700 .76rem/1.3 var(--font-body)} .mk-sticker__n{display:block; font:400 1.12rem/1.1 var(--font-display); margin-top:1px} .mk-sticker__rays{position:absolute; width:290px; height:290px; z-index:1; animation:mk-spin 9s linear infinite} @keyframes mk-spin{to{transform:rotate(360deg)}} .mk-sticker.is-critical .mk-sticker__card{background:var(--gold); color:var(--ink)} .mk-sticker.is-critical .mk-sticker__t{color:var(--white)} .mk-sticker.is-critical .mk-sticker__rays{color:rgba(255,201,60,.5)} .mk-sticker.is-good .mk-sticker__card{background:var(--green); color:var(--white)} .mk-sticker.is-good .mk-sticker__t{color:var(--white)} .mk-sticker.is-bad .mk-sticker__card{background:var(--violet); color:var(--white)} .mk-sticker.is-landmine .mk-sticker__card{background:var(--kind-landmine); color:var(--gold); border-color:var(--red)} .mk-sticker.is-landmine .mk-sticker__t{color:var(--red); -webkit-text-stroke-color:var(--ink)} .mk-sticker__blast{ position:absolute; width:300px; height:300px; z-index:1; background:var(--red); opacity:.5; clip-path:polygon(50% 0,60% 26%,79% 8%,74% 33%,98% 27%,83% 47%,100% 58%,78% 64%,88% 86%,65% 79%,62% 100%,48% 82%,32% 98%,30% 75%,7% 80%,18% 60%,0 50%,20% 39%,8% 18%,32% 25%,33% 3%) } .is-landmine .mk-sticker__card{animation:mk-jolt .3s linear 2} @keyframes mk-jolt{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}75%{transform:translate(4px,-2px)}} /* ===== 字幕 ===== */ .mk-caps{grid-area:caps; position:relative; z-index:2; padding:8px 12px 2px; display:grid; gap:5px} .mk-caps.is-off{visibility:hidden} .mk-cap{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:start} .mk-cap__w{align-self:start} .mk-cap__w{ flex:0 0 auto; font:700 .62rem/1.6 var(--font-body); padding:1px 7px; border-radius:var(--r-pill); border:2px solid var(--ink); white-space:nowrap; margin-top:2px; } .mk-cap--ai .mk-cap__w{background:var(--gold); color:var(--ink)} .mk-cap--you .mk-cap__w{background:var(--white); color:var(--ink)} .mk-cap__t{ margin:0; min-width:0; overflow:hidden; font:800 1.02rem/1.35 var(--font-body); max-height:calc(4.05em + 4px); /* 1.35em × 3行。古い行は行の高さの整数倍だけ上へ隠す（stage.js） */ -webkit-text-stroke:3.4px var(--ink); paint-order:stroke fill; } .mk-cap__b{display:block} .mk-cap--ai .mk-cap__t{color:var(--gold)} .mk-cap--you .mk-cap__t{color:var(--white)} /* ===== 操作 ===== */ .mk-ctrls{ grid-area:ctrls; position:relative; z-index:14; display:flex; align-items:center; gap:8px; padding:8px 12px calc(10px + env(safe-area-inset-bottom)); } .mk-btn{ flex:0 0 auto; min-height:48px; min-width:64px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 13px; background:var(--paper); color:var(--ink); border:var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); font:400 .94rem/1 var(--font-display); transition:transform .1s var(--ease-out),box-shadow .1s var(--ease-out); } .mk-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)} .mk-btn[disabled]{opacity:.45; cursor:default} .mk-btn--kanpe{background:var(--gold)} .mk-btn--end{background:var(--red); color:var(--white); margin-left:auto} .mk-btn.is-on{background:var(--orange)} .mk-btn__n{ min-width:19px; height:19px; padding:0 4px; border-radius:var(--r-pill); background:var(--ink); color:var(--gold); font:700 .66rem/19px var(--font-body); text-align:center; } .mk-mic{ flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; background:none; border:0; padding:4px 2px; min-height:48px; justify-content:center; } .mk-mic__k{font:700 .56rem/1 var(--font-body); color:rgba(255,255,255,.6)} .mk-mic__bars{display:flex; gap:3px; align-items:flex-end; height:17px} .mk-mic__bars i{width:5px; background:rgba(255,255,255,.22); border-radius:2px} .mk-mic__bars i:nth-child(1){height:7px}.mk-mic__bars i:nth-child(2){height:11px} .mk-mic__bars i:nth-child(3){height:14px}.mk-mic__bars i:nth-child(4){height:17px} .mk-mic__bars i.is-lit{background:var(--green)} .mk-mic.is-on .mk-mic__k{color:var(--green)} .mk-net{display:inline-flex; align-items:center; gap:4px; font:700 .6rem/1 var(--font-body); color:rgba(255,255,255,.62)} .mk-net i{width:8px; height:8px; border-radius:50%; background:var(--green)} .mk-net.is-slow i{background:var(--orange)} .mk-net.is-reconnecting i{background:var(--red)} /* ===== お知らせ・バナー・1タップ ===== */ .mk-bannerhost,.mk-noticehost{position:absolute; left:8px; right:8px; top:8px; z-index:16} .mk-noticehost{top:auto; bottom:8px} .mk-banner{ background:var(--paper); color:var(--ink); border:var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); padding:8px 11px; font:700 .8rem/1.4 var(--font-body); } .mk-banner.is-bad{background:var(--red); color:var(--white)} .mk-notice{background:var(--paper); color:var(--ink); border:var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:9px 11px} .mk-notice.is-bad{background:#FFE3DE} .mk-notice__h{display:flex; align-items:flex-start; gap:8px} .mk-notice__t{flex:1; font:700 .86rem/1.4 var(--font-body)} .mk-notice__x{flex:0 0 auto; width:26px; height:26px; border:2px solid var(--ink); border-radius:50%; background:none; cursor:pointer; font-size:.9rem; line-height:1} .mk-notice__p{margin:4px 0 0; font:500 .76rem/1.45 var(--font-body)} .mk-notice__l{margin:5px 0 0; padding-left:18px; font:500 .74rem/1.5 var(--font-body)} .mk-notice__row{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px} .mk-btn--mini{min-height:38px; padding:0 11px; font:700 .76rem/1 var(--font-body); background:var(--white); color:var(--ink); border:2px solid var(--ink); border-radius:var(--r-sm); cursor:pointer} .mk-btn--mini.btn--primary{background:var(--red); color:var(--white)} .mk-tap{position:absolute; inset:0; z-index:40; display:grid; place-content:center; gap:12px; padding:22px; background:rgba(21,16,43,.93); text-align:center} .mk-tap__b{ cursor:pointer; padding:20px 26px; background:var(--gold); color:var(--ink); border:var(--line-thick); border-radius:var(--r); box-shadow:var(--shadow); font:400 1.1rem/1.3 var(--font-display); } .mk-tap__n{margin:0; font:700 .8rem/1.5 var(--font-body); color:var(--white)} /* ===== 確認ダイアログ ===== */ .mk-modal{position:absolute; inset:0; z-index:44; display:grid; place-items:center; padding:18px} .mk-modal__scrim{position:absolute; inset:0; background:rgba(21,16,43,.76)} .mk-modal__box{ position:relative; z-index:2; width:min(100%,340px); max-height:100%; overflow:auto; background:var(--paper); color:var(--ink); border:var(--line-thick); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; } .mk-modal__h{margin:0 0 6px; font:400 1.16rem/1.3 var(--font-display)} .mk-modal__box p{margin:0 0 8px; font:500 .84rem/1.55 var(--font-body)} .mk-modal__steps{margin:0 0 8px; padding-left:20px; font:500 .82rem/1.6 var(--font-body)} .mk-modal__note{font-size:.76rem !important; color:#5b5566} .mk-modal__row{display:flex; flex-wrap:wrap; gap:9px; margin-top:10px} .mk-modal__row .btn{ flex:1 1 auto; min-height:48px; cursor:pointer; padding:0 14px; background:var(--white); color:var(--ink); border:var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); font:400 .95rem/1 var(--font-display); } .mk-modal__row .btn--primary{background:var(--red); color:var(--white)} /* ===== 入場（VS カード → ROUND 1 → ゴング） ===== */ .mk-intro{position:absolute; inset:0; z-index:30; display:none; place-content:center; padding:16px; background:radial-gradient(90% 70% at 50% 40%,var(--stage-3),var(--stage) 78%)} .mk-intro.is-on{display:grid} .mk-vs{display:grid; gap:9px; justify-items:center; width:100%} .mk-vs__card{ width:100%; max-width:330px; background:var(--paper); color:var(--ink); border:var(--line-thick); border-radius:var(--r); box-shadow:var(--shadow); padding:10px 13px; animation:mk-slidein .5s var(--ease-pop) both; } .mk-vs__card--you{transform:rotate(-1.6deg)} .mk-vs__card--foe{transform:rotate(1.6deg); background:var(--ink); color:var(--white); animation-delay:.16s} .mk-vs__k{display:block; font:700 .64rem/1.5 var(--font-body); color:var(--red)} .mk-vs__card--foe .mk-vs__k{color:var(--gold)} .mk-vs__n{display:block; font-size:1.5rem; line-height:1.2; color:var(--ink); -webkit-text-stroke-width:0} .mk-vs__card--foe .mk-vs__n{color:var(--gold); -webkit-text-stroke:4px var(--ink)} .mk-vs__r{display:block; font:700 .68rem/1.35 var(--font-body); opacity:.8; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical} @keyframes mk-slidein{from{opacity:0; transform:translateX(-34px) rotate(-6deg)}} .mk-vs__mark{position:relative; display:grid; place-items:center; color:rgba(230,62,43,.55)} .mk-vs__mark b{position:relative; z-index:2; font:400 2.1rem/1 var(--font-display); color:var(--red); -webkit-text-stroke:5px var(--ink); paint-order:stroke fill} .mk-vs__rays{position:absolute; width:150px; height:150px; animation:mk-spin 12s linear infinite} .mk-vs__wait{display:flex; align-items:center; gap:5px; margin-top:4px; font:700 .72rem/1 var(--font-body); color:rgba(255,255,255,.72)} .mk-vs__wait i{width:7px; height:7px; border-radius:50%; background:var(--gold); animation:mk-blink 1.05s ease-in-out infinite} .mk-vs__wait i:nth-child(2){animation-delay:.17s} .mk-vs__wait i:nth-child(3){animation-delay:.34s} @keyframes mk-blink{0%,100%{opacity:.25}50%{opacity:1}} .mk-round{position:absolute; inset:0; display:none; place-items:center; color:rgba(255,201,60,.45)} .mk-intro.is-round .mk-vs{display:none} .mk-intro.is-round .mk-round{display:grid; animation:mk-roundin .55s var(--ease-pop) both} .mk-round b{position:relative; z-index:2; font-size:2.7rem; color:var(--gold)} .mk-round__rays{position:absolute; width:min(150vw,560px); height:min(150vw,560px); animation:mk-spin 7s linear infinite} @keyframes mk-roundin{0%{opacity:0; transform:scale(2.3)}70%{opacity:1; transform:scale(.94)}100%{transform:scale(1)}} /* ===== 決着の層（verdict.js が中身を入れる） ===== */ .mk-verdict{position:absolute; inset:0; z-index:50; display:none} .mk-verdict.is-on{display:block} /* ===== 動きを止める ===== */ .is-calm .mk-sticker__rays,.is-calm .mk-vs__rays,.is-calm .mk-round__rays, .is-calm .mk-clock__v,.is-calm .mk-meter__goal.is-lit,.is-calm .mk-meter__fill, .is-calm .mk-sticker,.is-calm .mk-pop,.is-calm .is-landmine .mk-sticker__card{animation:none !important} .is-calm .mk-kanpe,.is-calm .mk-inner,.is-calm .mk-band{transition-duration:.01s !important} @media (prefers-reduced-motion:reduce){ .mk-sticker__rays,.mk-vs__rays,.mk-round__rays,.mk-clock__v,.mk-meter__goal.is-lit{animation:none !important} } /* ===== 背の低い画面（横向きスマホなど） ===== */ @media (max-height:700px){ .mk-head__mission{display:none} .mk-clock__v{font-size:1.9rem} .mk-cap__t{max-height:calc(2.7em + 4px); font-size:.94rem} .mk-meter__track{height:22px} .mk-meter__goal{width:40px; height:40px} } /* ===== PC（1280×800 など）: 間延びさせない ===== */ @media (min-width:860px){ html:not([data-studio="1"]) .screen.mk-stage{ grid-template-columns:minmax(0,1fr) minmax(260px,21rem); grid-template-areas:"head head" "meter meter" "main side" "caps caps" "ctrls ctrls"; } html:not([data-studio="1"]) .mk-side{ /* grid-area を side へ移さないと、土台の「main に重ねる」指定が残って顔の上に乗る */ grid-area:side; position:relative; pointer-events:none; margin:0 12px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; min-width:0; } html:not([data-studio="1"]) .mk-inner{position:relative; left:auto; top:auto; width:100%} html:not([data-studio="1"]) .mk-stickers{position:relative; inset:auto; min-height:180px; place-items:center; align-content:center; padding-top:0; padding-bottom:0} .mk-head__title{font-size:1.8rem} .mk-clock__v{font-size:3rem} .mk-cap__t{font-size:1.24rem} } /* ===== スタジオ表示（1920×1080・遠くから読める） ===== */ html[data-studio="1"],html[data-studio="1"] body{background:var(--stage)} html[data-studio="1"] .screen.mk-stage{ grid-template-columns:minmax(0,1fr) 30rem; grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-areas:"head head" "meter meter" "main side" "caps ctrls"; } html[data-studio="1"] .mk-head{padding:10px 30px 2px} html[data-studio="1"] .mk-head__title{font-size:3.4rem; -webkit-text-stroke-width:9px} html[data-studio="1"] .mk-head__mission{font-size:1.25rem; -webkit-line-clamp:1} html[data-studio="1"] .mk-head__badge,html[data-studio="1"] .mk-head__lv{font-size:1.05rem; padding:3px 14px; border-width:3px} html[data-studio="1"] .mk-clock__k{font-size:1rem} html[data-studio="1"] .mk-clock__v{font-size:5.6rem; -webkit-text-stroke-width:10px} html[data-studio="1"] .mk-meter{padding:0 30px 10px} html[data-studio="1"] .mk-meter__k{font-size:1.1rem; padding:1px 14px; border-width:3px; margin-bottom:4px} html[data-studio="1"] .mk-meter__track{height:54px; border-width:5px} html[data-studio="1"] .mk-meter__num{font-size:1.8rem; right:20px} html[data-studio="1"] .mk-meter__goal{width:86px; height:86px; border-width:5px} html[data-studio="1"] .mk-meter__goalt{font-size:1.02rem} html[data-studio="1"] .mk-pop{font-size:3rem} html[data-studio="1"] .mk-main{margin:0 0 0 30px; border-width:5px; border-radius:var(--r-lg)} /* テレビのモニターでは顔が主役。face.js は横長の枠だと服まで見せようと引くので、 枠（背景・名札・電飾）はそのままに、顔の層だけ目の高さを軸に寄る。 */ html[data-studio="1"] .mk-face{transform:scale(1.40); transform-origin:50% 34%} html[data-studio="1"] .mk-name{left:18px; bottom:18px; padding:6px 18px 8px; border-width:3px; border-left-width:14px} html[data-studio="1"] .mk-name__n{font-size:2.3rem; -webkit-text-stroke-width:6px} html[data-studio="1"] .mk-name__k{font-size:1.1rem} html[data-studio="1"] .mk-wm{right:18px; bottom:16px; font-size:.95rem} html[data-studio="1"] .mk-side{ position:relative; grid-area:side; margin:0 30px 0 22px; padding:0; pointer-events:none; display:flex; flex-direction:column; gap:20px; min-height:0; } html[data-studio="1"] .mk-inner{position:relative; left:auto; top:auto; width:100%; padding:26px 26px 24px} html[data-studio="1"] .mk-inner__tag{font-size:1.02rem; padding:1px 14px; border-width:3px} html[data-studio="1"] .mk-inner__t{font-size:1.86rem; line-height:1.36} html[data-studio="1"] .mk-inner__d1{width:28px; height:28px; left:44px; bottom:-22px} html[data-studio="1"] .mk-inner__d2{width:16px; height:16px; left:24px; bottom:-44px} html[data-studio="1"] .mk-stickers{position:relative; inset:auto; flex:1; place-items:center; align-content:center; padding:0} html[data-studio="1"] .mk-sticker__card{padding:18px 34px 20px; min-width:270px; border-width:6px} html[data-studio="1"] .mk-sticker__t{font-size:2.9rem; -webkit-text-stroke-width:7px} html[data-studio="1"] .mk-sticker__l{font-size:1.32rem; margin-top:6px} html[data-studio="1"] .mk-sticker__n{font-size:2rem} html[data-studio="1"] .mk-sticker__rays{width:520px; height:520px} html[data-studio="1"] .mk-band__t{font-size:3.6rem; -webkit-text-stroke-width:8px} html[data-studio="1"] .mk-kanpe{width:420px; right:22px; bottom:22px} html[data-studio="1"] .mk-kanpe__t{font-size:2.1rem} html[data-studio="1"] .mk-kanpe__k{font-size:1rem; padding:2px 14px} html[data-studio="1"] .mk-kanpe__rings i{width:15px; height:24px} html[data-studio="1"] .mk-caps{padding:10px 30px 14px; gap:7px} html[data-studio="1"] .mk-cap__w{font-size:1.14rem; padding:3px 15px; border-width:3px; margin-top:6px} html[data-studio="1"] .mk-cap__t{font-size:2.5rem; max-height:calc(2.7em + 6px); -webkit-text-stroke-width:7px} html[data-studio="1"] .mk-vs__card{max-width:720px; padding:20px 28px; border-width:6px} html[data-studio="1"] .mk-vs__n{font-size:3.6rem} html[data-studio="1"] .mk-vs__k{font-size:1.2rem} html[data-studio="1"] .mk-vs__r{font-size:1.24rem} html[data-studio="1"] .mk-vs__mark b{font-size:4.4rem} html[data-studio="1"] .mk-vs__rays{width:340px; height:340px} html[data-studio="1"] .mk-round b{font-size:8rem; -webkit-text-stroke-width:14px} /* 操作部品は隅で半透明・3秒で消える */ html[data-studio="1"] .mk-ctrls{ position:relative; grid-area:ctrls; z-index:20; width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:9px; padding:14px 30px 20px 20px; opacity:.42; transition:opacity .4s var(--ease-out); } html[data-studio="1"] .mk-ctrls:hover{opacity:1} html[data-studio="1"].is-idle .mk-ctrls,html[data-studio="1"] .mk-stage.is-idle .mk-ctrls{opacity:0; pointer-events:none} html[data-studio="1"] .mk-btn--end{margin-left:0} html[data-studio="1"] .mk-paused__t{font-size:4rem} html[data-studio="1"] .mk-paused__s{font-size:1.5rem} /* ===== 決着（screens/verdict.js） ===== */ .mk-vd{ position:absolute; inset:0; overflow:hidden; cursor:pointer; display:grid; grid-template-rows:minmax(0,1fr) auto auto auto; justify-items:center; align-items:center; gap:5px; padding:16px 14px 10px; } .mk-vd__dark{position:absolute; inset:0; background:#07050E; opacity:0; transition:opacity .26s linear} .mk-vd.is-dark .mk-vd__dark{opacity:.93} .mk-vd__spot{ position:absolute; inset:0; opacity:0; transform:scale(.6); transform-origin:50% 44%; transition:opacity .34s var(--ease-out),transform .5s var(--ease-out); background: radial-gradient(closest-side at 50% 44%, rgba(255,238,196,.30) 0%, rgba(255,238,196,.10) 46%, rgba(255,238,196,0) 72%), conic-gradient(from 200deg at 50% -18%, rgba(255,238,196,0) 0deg, rgba(255,238,196,.13) 28deg, rgba(255,238,196,0) 56deg); } .mk-vd.is-spot .mk-vd__spot{opacity:1; transform:scale(1)} .mk-vd__roll{position:absolute; left:0; right:0; bottom:14%; display:none; justify-content:center; gap:9px; z-index:3} .mk-vd.is-roll .mk-vd__roll{display:flex} .mk-vd.is-slam .mk-vd__roll{display:none} .mk-vd__roll i{width:11px; height:11px; border-radius:50%; background:var(--gold); animation:mk-vdroll .42s linear infinite} .mk-vd__roll i:nth-child(2){animation-delay:.08s} .mk-vd__roll i:nth-child(3){animation-delay:.16s} .mk-vd__roll i:nth-child(4){animation-delay:.24s} .mk-vd__roll i:nth-child(5){animation-delay:.32s} @keyframes mk-vdroll{0%,100%{opacity:.22; transform:scale(.8)}45%{opacity:1; transform:scale(1.35)}} .mk-vd__come{ position:absolute; top:7%; z-index:6; opacity:0; transform:scale(2.4) rotate(-14deg); background:var(--gold); color:var(--ink); border:var(--line-thick); border-radius:var(--r); box-shadow:var(--shadow); padding:7px 26px 9px; transition:opacity .12s linear,transform .3s var(--ease-pop); } .mk-vd.is-come .mk-vd__come{opacity:1; transform:scale(1) rotate(-7deg)} .mk-vd__come b{font:400 2rem/1.1 var(--font-display); -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; color:var(--red)} .mk-vd__stamp{ grid-row:1; position:relative; z-index:4; display:grid; place-items:center; max-width:100%; max-height:100%; opacity:0; transform:scale(3) rotate(-26deg); transition:opacity .09s linear,transform .17s cubic-bezier(.3,1.7,.5,1); } .mk-vd.is-slam .mk-vd__stamp{opacity:1; transform:scale(1) rotate(-11deg)} .mk-vd__rays{position:absolute; width:min(150vw,600px); height:min(150vw,600px); z-index:1; opacity:0; color:rgba(255,201,60,.55)} .mk-vd.is-won.is-slam .mk-vd__rays{opacity:1; animation:mk-spin 8s linear infinite} .mk-vd__mark{ position:relative; z-index:2; display:grid; place-items:center; text-align:center; width:min(62vw,224px); aspect-ratio:1/1; max-height:100%; padding:10px; background:rgba(255,247,232,.94); } .mk-vd__stamp--circle .mk-vd__mark{border:12px solid var(--red); border-radius:50%} .mk-vd__stamp--square .mk-vd__mark{border:12px solid #5A6472; border-radius:18px} .mk-vd__mark b{font:400 2.4rem/1.06 var(--font-display); color:var(--red); letter-spacing:-.03em; white-space:nowrap} .mk-vd.is-lost .mk-vd__mark b,.mk-vd.is-gaveup .mk-vd__mark b{color:#5A6472; font-size:2.1rem} .mk-vd__who,.mk-vd__sub{ position:relative; z-index:5; text-align:center; margin:0; max-width:100%; opacity:0; transition:opacity .3s linear; padding:0 10px; } .mk-vd__who{grid-row:2; font:400 1.18rem/1.3 var(--font-display); color:var(--gold); -webkit-text-stroke:4px var(--ink); paint-order:stroke fill} .mk-vd__sub{grid-row:3; font:700 .88rem/1.4 var(--font-body); color:rgba(255,255,255,.82)} .mk-vd.is-sub .mk-vd__who,.mk-vd.is-sub .mk-vd__sub{opacity:1} .mk-vd__skip{ grid-row:4; position:relative; z-index:6; cursor:pointer; background:none; border:0; font:700 .68rem/1 var(--font-body); color:rgba(255,255,255,.48); letter-spacing:.1em; padding:4px; } .is-calm .mk-vd__roll i,.is-calm .mk-vd__rays{animation:none !important} html[data-studio="1"] .mk-vd__mark{width:440px} html[data-studio="1"] .mk-vd__mark b{font-size:5.2rem} html[data-studio="1"] .mk-vd.is-lost .mk-vd__mark b,html[data-studio="1"] .mk-vd.is-gaveup .mk-vd__mark b{font-size:4.3rem} html[data-studio="1"] .mk-vd__stamp--circle .mk-vd__mark{border-width:24px} html[data-studio="1"] .mk-vd__stamp--square .mk-vd__mark{border-width:24px; border-radius:34px} html[data-studio="1"] .mk-vd__rays{width:1200px; height:1200px} html[data-studio="1"] .mk-vd__who{font-size:2.6rem; -webkit-text-stroke-width:7px} html[data-studio="1"] .mk-vd__sub{font-size:1.5rem} html[data-studio="1"] .mk-vd__come b{font-size:4.2rem} html[data-studio="1"] .mk-vd__roll i{width:20px; height:20px}