#root .mp-shell {
    width: 100%; height: 100dvh; min-height: 0;
    display: flex; align-items: safe center; justify-content: center;
    overflow: hidden; padding: 16px; background: #f3f4f6;
}
#root .mp-game-panel {
    position: relative; background: #fff; border: 2px solid #171717;
    box-shadow: 6px 6px 0 #171717; flex-shrink: 0;
}
#root .mp-shell-title {
    flex-direction: column; justify-content: flex-start;
    gap: 150px; overflow-y: auto; overflow-x: hidden; padding: 24px 0 32px;
}
#root .mp-shell-title > .mp-game-panel {
    width: var(--mp-frame-width, 448px); max-width: 100%; height: var(--mp-frame-height, 792px); min-height: 0;
    aspect-ratio: auto; overflow: hidden;
}
.mp-title, .mp-dialog { font-family: 'DotGothic16', system-ui, sans-serif; color: #171717; }
.mp-title { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: #fff; text-align: center; }
.mp-title-toolbar { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; flex: none; }
.mp-toolbar-link, .mp-title-tools { font-size: 11px; }
.mp-title-tools { display: flex; align-items: center; gap: 12px; }
.mp-help-button { border: 1px solid #171717; padding: 6px 8px; white-space: nowrap; background: #fff; }
.mp-title-content { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; display: flex; flex-direction: column; align-items: center; }
.mp-title-logo { width: 100%; height: 170px; min-height: 140px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 16px; }
.mp-title-logo img { max-width: 280px; width: 100%; max-height: 150px; object-fit: contain; }
.mp-title-logo h1 { font-size: 26px; }
.mp-title-options { width: 100%; max-width: 320px; margin: auto 0; }
.mp-title-options .mp-start { display: block; width: 100%; min-height: 54px; padding: 12px 16px; margin-top: 24px; background: #171717; color: #fff; border: 2px solid #171717; box-shadow: 3px 3px 0 #9ca3af; font-size: 20px; }
.mp-start:hover { background: #374151; }
.mp-title-footer { flex: none; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid #e5e7eb; font-size: 11px; }
.mp-title-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 9px; }
.mp-title-footer nav a, .mp-title-footer nav button { text-decoration: underline; text-underline-offset: 3px; }
.mp-credit { color: #6b7280; font-size: 10px; }
.mp-title button:focus-visible, .mp-title a:focus-visible, .mp-dialog button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.mp-dialog { padding: 0; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); border: 2px solid #171717; background: white; box-shadow: 6px 6px 0 #171717; }
.mp-dialog::backdrop { background: #11182799; }
.mp-dialog[open] { display: flex; flex-direction: column; }
.mp-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 2px solid #171717; flex: none; }
.mp-dialog-header h2 { margin: 0; font-size: 16px; }
.mp-dialog-header button { width: 36px; height: 36px; font: 24px/1 system-ui; border: 1px solid #171717; background: white; }
.mp-dialog-body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; line-height: 1.8; }
.mp-dialog-body > iframe { width: 100%; height: min(600px, 70dvh); border: 0; }
.mp-info-content { padding: 24px; font-size: 14px; text-align: left; }
.mp-info-content h3 { font-weight: bold; margin: 20px 0 6px; }
.mp-info-content h3:first-child { margin-top: 0; }
.mp-info-content a { text-decoration: underline; }
@media (max-width: 639px) {
    #root .mp-shell { padding: 0; }
    #root .mp-game-panel { border: 0; box-shadow: none; }
    #root .mp-shell-title { padding: 0 0 32px; }
    #root .mp-shell-title > .mp-game-panel { height: max(720px, 100dvh); }
    .mp-title-toolbar { padding-top: max(12px, env(safe-area-inset-top)); }
}
@media (min-width: 1100px) {
    #root .mp-shell-title { flex-direction: row; justify-content: center; align-items: safe center; padding: 24px; }
}

/* PC frames follow the original Unyon Maker dimensions (448 × ~792px). */
@media (min-width: 640px) {
    #root .mp-shell { overflow-y: auto; }
    #root .mp-shell > .mp-game-panel {
        width: var(--mp-frame-width, 448px); max-width: 100%; height: var(--mp-frame-height, 792px); min-height: 0;
        aspect-ratio: auto;
    }
}