main:has(.samose-game) { padding-block: 12px 24px; min-height: 0; }
.samose-game { width: min(100%, 480px); margin-inline: auto; }
.samose-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.samose-heading h1 { font-size: 25px; line-height: 1.1; margin: 0; }
.samose-heading a, .samose-heading button { color: var(--text); font: inherit; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; background: transparent; border: 0; cursor: pointer; padding: 0 4px; }
.samose-stage { position: relative; width: min(100%, calc((100svh - 168px) * 480 / 680)); aspect-ratio: 480 / 680; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fae4c5; touch-action: pan-y; }
#samose-canvas { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; }
#samose-canvas canvas { max-width: 100%; max-height: 100%; display: block; touch-action: none; }
.samose-hud { position: absolute; inset: 12px 14px auto; display: flex; justify-content: space-between; pointer-events: none; color: #503618; }
.samose-hud > span { display: grid; min-width: 66px; padding: 5px 12px; background: #fff5df; border-radius: 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.samose-hud > span:last-child { text-align: right; }
.samose-hud b { font-size: 26px; font-weight: 600; letter-spacing: 0; line-height: 1.12; font-variant-numeric: tabular-nums; }
.samose-hud[hidden], .samose-overlay[hidden] { display: none; }
.samose-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(70, 43, 18, .27); overflow-y: auto; touch-action: pan-y; }
.samose-panel { width: min(100%, 330px); max-height: 100%; overflow-y: auto; padding: 24px; border-radius: 14px; background: var(--surface); color: var(--text); text-align: center; }
.samose-panel h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.15; text-wrap: balance; }
.samose-panel p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.samose-intro-hero { display: block; width: 112px; height: 112px; margin: 0 auto 16px; object-fit: contain; }
.samose-legend { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 20px; font-size: 13px; }
.samose-legend span { display: inline-flex; align-items: center; gap: 6px; }
.samose-legend img { object-fit: contain; }
.samose-primary { display: flex; justify-content: center; align-items: center; min-height: 48px; width: 100%; padding: 10px 16px; border: 0; border-radius: 9px; background: var(--accent); color: var(--button-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.samose-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--text); }
.samose-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.samose-controls button { min-height: 46px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.samose-controls button:disabled { opacity: .45; cursor: default; }
.samose-controls button:not(:disabled):hover, .samose-heading button:hover { background: var(--surface-2, var(--line)); }
.samose-game :is(a,button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.samose-status { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.samose-status:empty { display: none; }
.samose-result-image { width: 100%; max-height: 158px; object-fit: contain; display: block; margin: 12px auto; border-radius: 9px; }
.samose-result { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 20px; color: var(--muted); font-size: 13px; }
.samose-result b { display: block; margin-top: 2px; color: var(--text); font-size: 38px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.samose-panel progress { width: 100%; accent-color: var(--accent); }
.samose-game:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 12px; background: var(--bg); }
.samose-game:fullscreen .samose-stage { width: min(100%, 480px, calc((100svh - 140px) * 480 / 680)); }
@media (max-width: 400px) { .samose-panel { padding: 18px; } .samose-overlay { padding: 14px; } .samose-panel h2 { font-size: 23px; } }
@media (max-height: 560px) and (orientation: landscape) { .samose-heading { margin-bottom: 4px; } .samose-stage { width: min(100%, calc((100svh - 132px) * 480 / 680)); } .samose-panel { padding: 14px; } .samose-intro-hero, .samose-result-image { display: none; } .samose-legend { margin-bottom: 10px; } .samose-panel p { margin-bottom: 10px; } .samose-result { margin-block: 8px; } }