/* Minigames (js/minigames.js): a manga panel over the event screen */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

.mg-wrap { position: absolute; inset: 0; z-index: 88; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; opacity: 0; transition: opacity .3s; --mc: #e8508a; }
.mg-wrap.show { opacity: 1; } .mg-wrap.out { opacity: 0; transition: opacity .3s; }
.mg-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #3a1a5a 0, #1a0a2a 60%, #07030c 100%); }
.mg-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(#ffffff1c 1px, transparent 1.6px) 0 0 / 7px 7px; }
.mg-speed { position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 4deg, color-mix(in srgb, var(--mc) 22%, transparent) 4deg 5deg); animation: mgSpin 30s linear infinite; opacity: .7; }
@keyframes mgSpin { to { transform: rotate(360deg); } }
.mg-kana { position: absolute; top: 10%; font-family: var(--f-jp); font-weight: 900; font-size: clamp(30px, 5vw, 70px); line-height: 1; color: #b89ae8; -webkit-text-stroke: 2px #07030c; opacity: .5; animation: trThrob 1.1s ease-in-out infinite alternate; pointer-events: none; }
.mg-kana.l { left: 2%; transform: rotate(-8deg); } .mg-kana.r { right: 2%; transform: rotate(8deg); animation-delay: .5s; }

.mg-panel { position: relative; width: min(860px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink), 0 0 0 3px var(--mc) inset; padding: 8px 10px 10px; animation: mgPanelIn .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes mgPanelIn { from { transform: translateY(40px) rotate(-2deg) scale(.9); opacity: 0; } }
.mg-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mg-tag { font-family: Anton, Impact, sans-serif; letter-spacing: .18em; font-size: 12px; background: var(--ink); color: var(--gold); padding: 2px 8px; transform: skewX(-12deg); flex-shrink: 0; }
.mg-title { font-family: var(--f-title); font-size: clamp(16px, 2.6vw, 24px); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.mg-diff { color: var(--mc); -webkit-text-stroke: 1px var(--ink); font-size: 18px; letter-spacing: 1px; flex-shrink: 0; }

.mg-stage { position: relative; width: min(100%, calc((100vh - 200px) * 2)); aspect-ratio: 2 / 1; margin: 0 auto; border: 4px solid var(--ink); background: #1a1020; overflow: hidden; }
.mg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.mg-golden .mg-canvas { cursor: none; }

/* intro: a title slam over the idling game */
.mg-intro { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(100deg, #1a1020ee 0 40%, #1a1020b0 100%); transition: opacity .25s, transform .25s; }
.mg-wrap.playing .mg-intro { opacity: 0; pointer-events: none; transform: scale(1.06); }
.mg-slam { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mg-slam small { font-family: Anton, Impact, sans-serif; letter-spacing: .35em; color: var(--ink); background: var(--gold); padding: 3px 12px; font-size: clamp(12px, 1.8vw, 18px); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--mc); animation: mgSlam .5s .05s cubic-bezier(.2, 1.8, .4, 1) both; }
.mg-slam b { font-family: var(--f-sfx); font-size: clamp(30px, 5.6vw, 58px); line-height: .95; color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--mc), 7px 7px 0 var(--ink); letter-spacing: .02em; transform: rotate(-3deg); animation: mgSlam .55s .22s cubic-bezier(.2, 1.8, .4, 1) both; }
.mg-slam i { font-style: normal; font-family: var(--f-jp); font-weight: 900; font-size: clamp(20px, 3.4vw, 36px); color: #b89ae8; -webkit-text-stroke: 1.5px var(--ink); animation: mgSlam .5s .42s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes mgSlam { 0% { opacity: 0; transform: scale(2.6) rotate(-10deg); } 60% { opacity: 1; transform: scale(.92) rotate(-3deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
.mg-card { background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--mc); padding: 10px 12px; font-size: 13px; line-height: 1.35; color: var(--ink); max-height: 100%; overflow: auto; animation: mgPanelIn .4s .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.mg-vs { display: flex; align-items: center; gap: 8px; }
.mg-vs span { font-family: var(--f-sfx); font-size: 26px; color: var(--mc); -webkit-text-stroke: 1.5px var(--ink); }
.mg-port { width: 46px; height: 55px; border: 3px solid var(--ink); overflow: hidden; background: #fff; flex-shrink: 0; }
.mg-port svg { width: 100%; height: 100%; display: block; }
.mg-blurb { margin: 6px 0 4px; font-style: italic; }
.mg-how { margin: 0 0 8px; padding-left: 18px; }
.mg-how li { margin: 2px 0; }
.mg-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-wrap kbd { font-family: var(--f-ui); font-size: 11px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; padding: 0 4px; margin-left: 2px; box-shadow: 1px 1px 0 var(--ink); }

/* hud under the stage */
.mg-hud { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 22px; }
.mg-info { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-info i { color: #6a4a7a; }
.mg-heart { color: var(--red); font-size: 18px; -webkit-text-stroke: 1px var(--ink); margin-right: 2px; } .mg-heart.off { color: #bbb; }
.mg-timer { width: 160px; height: 12px; border: 3px solid var(--ink); background: #fff; flex-shrink: 0; }
.mg-timer i { display: block; height: 100%; width: 100%; background: var(--mc); transition: width .08s linear; }
.mg-timer i.low { background: var(--red); }
.mg-bar { display: flex; gap: 10px; justify-content: center; min-height: 0; }
.mg-bar:empty { display: none; }
.mg-act { min-width: 120px; }
.mg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #5a4a60; }
.mg-wrap .mg-fate { padding: 5px 12px; font-size: 13px; color: var(--ink); background: #fff; border-color: var(--ink); }

/* result splash */
.mg-splash { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.mg-splash.show { opacity: 1; pointer-events: auto; background: radial-gradient(circle, transparent 0 30%, #1a1020aa 70%); }
.mg-splash.show::before { content: ''; position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 5deg, #ffffff30 5deg 7deg); animation: mgSpin 12s linear infinite; }
.mg-splash.bad.show::before { background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 5deg, #c8323c30 5deg 7deg); }
.mg-stamp { position: relative; text-align: center; background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 10px 26px 12px; transform: rotate(-4deg); animation: mgStamp .5s cubic-bezier(.2, 1.8, .4, 1) both; max-width: 86%; }
@keyframes mgStamp { from { transform: scale(3) rotate(-14deg); opacity: 0; } }
.mg-stamp small { display: block; font-family: Anton, Impact, sans-serif; letter-spacing: .3em; font-size: 12px; }
.mg-stamp b { display: block; font-family: var(--f-sfx); font-size: clamp(40px, 7vw, 72px); line-height: 1; letter-spacing: .03em; -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
.mg-stamp.ok b { color: var(--gold); } .mg-stamp.bad b { color: var(--pink); }
.mg-stamp.ok small { color: #2a7a5a; } .mg-stamp.bad small { color: var(--red); }
.mg-stamp i { display: block; font-style: normal; font-family: var(--f-jp); font-weight: 900; font-size: 26px; color: #b89ae8; -webkit-text-stroke: 1px var(--ink); }
.mg-stamp p { margin: 6px 0 8px; font-size: 14px; max-width: 460px; }

/* the choice badge on the event panel */
.choice-mg { font-family: Anton, var(--f-ui); letter-spacing: .06em; font-weight: 400; background: var(--c) !important; box-shadow: 2px 2px 0 var(--ink); transform: skewX(-8deg); }

/* narrow screens */
@media (max-width: 700px) {
  .mg-intro { grid-template-columns: 1fr; padding: 8px; gap: 6px; align-content: center; }
  .mg-slam b { font-size: 28px; }
  .mg-card { font-size: 12px; padding: 6px 8px; }
  .mg-how li:nth-child(3) { display: none; }
  .mg-timer { width: 90px; }
  .mg-keys { display: none; }
}

/* reduced motion: no spinning, no slams */
.mg-calm .mg-speed, .mg-calm .mg-splash.show::before { animation: none; }
.mg-calm .mg-kana { animation: none; }
.mg-calm .mg-panel, .mg-calm .mg-slam small, .mg-calm .mg-slam b, .mg-calm .mg-slam i, .mg-calm .mg-card, .mg-calm .mg-stamp { animation: none; }
body.reduced .mg-speed { animation: none; }