.mini-page { background: radial-gradient(ellipse at 50% 0, #35533c88, transparent 65%), var(--bg); }
.mini-main { width: min(100%, 1000px); margin: auto; min-height: calc(100svh - 75px); padding: calc(var(--header) + 24px) 18px 50px; }
.mini-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; }
.mini-heading { text-align: center; margin: 22px 0 30px; }
.mini-heading h1 { font: 400 clamp(38px, 6vw, 62px)/1.1 Georgia, serif; margin: 10px 0; }
.mini-eyebrow { font-size: 11px; letter-spacing: 3px; color: var(--gold); font-weight: 700; }
.mini-heading p:last-child { color: var(--muted); }
.mini-panel { position: relative; border: 1px solid #dfbd6166; border-radius: 26px; padding: clamp(18px, 4vw, 36px); background: linear-gradient(145deg, #203b2b, #0c2017); box-shadow: 0 20px 65px #0005; }
.mini-panel button { touch-action: manipulation; }
.mini-intro, .mini-result { text-align: center; padding: 20px 0; }
.mini-symbol { font-size: 60px; margin-bottom: 12px; }
.mini-intro h2, .mini-result h2, .mini-pause h2 { font: 400 clamp(28px, 4vw, 42px)/1.2 Georgia, serif; margin-bottom: 16px; }
.mini-intro p { max-width: 560px; margin: 10px auto; color: var(--muted); }
.mini-intro .btn { margin-top: 18px; }
.mini-record { margin-top: 18px!important; font-size: 13px; color: var(--gold)!important; }
.mini-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mini-exit { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--muted); }
.mini-pause-button { min-height: 44px; padding: 8px 16px; background: #10271b; border: 1px solid #dfbd6166; border-radius: 24px; }
.mini-hud { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.mini-hud > span { flex: 1; min-width: 65px; border: 1px solid #dfbd6133; border-radius: 12px; padding: 7px 10px; text-align: center; background: #0b191388; }
.mini-hud small { display: block; color: var(--muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.mini-hud strong { color: var(--gold); font-size: 20px; font-variant-numeric: tabular-nums; }
.mini-stage { position: relative; display: flex; justify-content: center; min-height: 0; overflow: hidden; }
.mini-canvas { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; touch-action: none; border-radius: 15px; }
.mini-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mini-controls .btn { min-height: 48px; }
.mini-controls label { font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.mini-controls input { width: clamp(110px, 25vw, 230px); min-height: 44px; accent-color: var(--gold); }
.mini-feedback { min-height: 25px; margin-top: 10px; text-align: center; color: var(--gold); font-size: 14px; }
.mini-result-score { font: 700 clamp(50px, 10vw, 84px)/1.1 Georgia, serif; color: var(--gold); display: block; margin: 12px 0; }
.mini-result p { color: var(--muted); }
.mini-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.mini-pause { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px; text-align: center; background: #0b1913fa; border-radius: inherit; }
.mini-pause p { color: var(--muted); margin-bottom: 22px; max-width: 440px; }
html.mini-locked, body.mini-locked { overflow: hidden; overscroll-behavior: none; }
.mini-panel.is-active { position: fixed; inset: 0; z-index: 100; height: 100dvh; min-height: 0; border: 0; border-radius: 0; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow: hidden; }
.mini-play { display: flex; flex-direction: column; max-width: 900px; height: 100%; margin: auto; }
.mini-play .mini-stage { flex: 1; }
.mini-panel.is-active .mini-canvas { height: 100%; }
.mini-page[data-game="fino"] .mini-stage { flex: 0 1 auto; margin-top: auto; }
.mini-page[data-game="fino"] .mini-canvas { height: auto; max-height: calc(100dvh - 220px); }
.mini-page[data-game="fino"] .mini-feedback { margin-bottom: auto; }
.memory-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.5vw, 12px); width: min(100%, 560px); height: 100%; max-height: 620px; min-width: 0; min-height: 0; }
.memory-card { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 12px; background: transparent; perspective: 600px; padding: 0; touch-action: manipulation; }
.memory-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s; }
.memory-card.revealed .memory-card-inner { transform: rotateY(180deg); }
.memory-face { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #dfbd6177; border-radius: 12px; backface-visibility: hidden; }
.memory-back { flex-direction: column; background: radial-gradient(circle, #33533b, #112b1d); color: var(--gold); font: 700 clamp(16px, 4vw, 30px) Georgia, serif; }
.memory-back small { font: 8px Arial, sans-serif; letter-spacing: 2px; margin-top: 5px; }
.memory-front { transform: rotateY(180deg); background: #10271b; }
.memory-front img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.memory-card.matched .memory-front { border: 3px solid var(--gold); box-shadow: inset 0 0 18px #dfbd6133; }
.timing-board { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timing-display { font: 400 clamp(55px, 15vw, 105px)/1.2 Georgia, serif; font-variant-numeric: tabular-nums; color: var(--gold); min-width: 5ch; margin: 15px 0; }
.timing-button { width: min(100%, 330px); min-height: 84px; font-size: 20px; touch-action: manipulation; transition: none; }
.timing-button:hover:not(:disabled), .timing-button:active:not(:disabled) { transform: none; box-shadow: none; }
.timing-history { list-style: none; width: min(100%, 510px); margin: 12px auto 0; font-size: 12px; }
.timing-history li { padding: 7px; border-bottom: 1px solid var(--line); }
.mini-result .timing-history { color: var(--muted); }
.pac-choices { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.pac-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100px; min-height: 102px; padding: 9px; border: 2px solid #dfbd6166; border-radius: 16px; background: #10271b; color: #f3e8bd; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.pac-choice[aria-pressed="true"] { border-color: var(--gold); background: #31543a; box-shadow: 0 0 0 3px #dfbd6144; }
.pac-choice canvas { display: block; width: 66px; height: 66px; }
.pac-choice:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mini-page[data-game="pac"] .mini-stage { min-height: 0; }
.mini-page[data-game="pac"] .mini-canvas { width: auto; max-width: 100%; height: 100%; max-height: 100%; }
.pac-pad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 46px); gap: 3px; }
.pac-pad button { min-width: 52px; min-height: 46px; border: 1px solid var(--gold); border-radius: 10px; background: #294c34; color: var(--gold); font-size: 21px; cursor: pointer; }
.pac-pad button:active { background: #557b4e; }
.pac-pad [data-direction="up"] { grid-column: 2; grid-row: 1; }
.pac-pad [data-direction="left"] { grid-column: 1; grid-row: 2; }
.pac-pad [data-direction="down"] { grid-column: 2; grid-row: 2; }
.pac-pad [data-direction="right"] { grid-column: 3; grid-row: 2; }
@media (max-height: 540px) { .mini-toolbar { margin-bottom: 2px; } .mini-hud { margin-bottom: 5px; } .mini-hud > span { padding: 3px 8px; } .mini-controls { margin-top: 4px; } .mini-feedback { margin-top: 2px; font-size: 12px; } .timing-display { margin: 0; font-size: 50px; } .timing-button { min-height: 48px; } .timing-history li { padding: 2px; } }
@media (prefers-reduced-motion: reduce) { .memory-card-inner { transition: none; } }