:root { --kp-scale: 1; }
html, body { margin: 0; min-height: 100%; background: #2f1b31; }
#kp-stage { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #2f1b31; overflow: hidden; overscroll-behavior: none; }
#kp-stage[hidden] { display: none; }
.kp-screen { position: relative; width: min(100vw, calc(100vh * .45)); max-width: 100vw; aspect-ratio: 1080 / 2400; overflow: hidden; background: #64caff; font-family: "Source Sans 3", Arial, sans-serif; touch-action: none; }
.kp-art { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: fill; z-index: 10; pointer-events: none; }
.kp-photo-mask { position: absolute; z-index: 5; overflow: hidden; pointer-events: none; touch-action: none; }
.kp-photo-mask.ellipse { border-radius: 50%; }
.kp-photo-mask canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.kp-layer { position: absolute; z-index: 20; box-sizing: border-box; display: flex; align-items: center; white-space: pre-wrap; overflow: hidden; font-family: "Source Sans 3", Arial, sans-serif; font-weight: 700; }
.kp-single-line { white-space: nowrap; }
.kp-layer:has(textarea.kp-control) { overflow: visible; }
.kp-layer.center { justify-content: center; text-align: center; }
.kp-layer.left { justify-content: flex-start; text-align: left; }
.kp-control { border: 0; background: transparent; outline: none; font: inherit; color: inherit; width: 100%; height: 100%; padding: 0; }
textarea.kp-control { box-sizing: border-box; resize: none; overflow: auto; padding-right: 20%; padding-bottom: 1.25em; scrollbar-width: none; -ms-overflow-style: none; }
textarea.kp-control::-webkit-scrollbar { display: none; width: 0; height: 0; }
.kp-message-counter { position: absolute; right: 3%; bottom: 7%; z-index: 2; font-size: .48em; line-height: 1; color: #71371f; white-space: nowrap; pointer-events: none; }
.kp-message-counter-max { color: #c9273f; }
select.kp-control { appearance: none; cursor: pointer; }
button.kp-layer, button.kp-layer:hover, button.kp-layer:active { min-width: 0; margin: 0; border: 0; border-radius: 0; padding-top: 0; padding-bottom: 0; background: transparent; background-image: none; box-shadow: none; text-shadow: none; cursor: pointer; appearance: none; transform: none; }
.kp-slider-host { position: absolute; z-index: 250; height: 2.9166667%; display: flex; align-items: center; padding: 0 1.2962963%; box-sizing: border-box; }
.kp-slider { width: 100%; accent-color: #ed4b86; cursor: pointer; margin: 0; padding: 0; box-shadow: none; }
.kp-slider::-webkit-slider-thumb { width: var(--thumb-size); height: var(--thumb-size); }
.kp-slider::-moz-range-thumb { width: var(--thumb-size); height: var(--thumb-size); }
.kp-file { display: none; }
.kp-dragging { cursor: grabbing; }
.kp-notice-shade { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; padding: 8%; box-sizing: border-box; background: rgba(47,27,49,.55); }
.kp-notice { width: 86%; box-sizing: border-box; padding: 5.5% 6%; border: 3px solid #fff5de; border-radius: 5%; background: #fff4dd; color: #71371f; text-align: center; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); }
.kp-notice p { margin: 0 0 5%; font-size: clamp(12px,3vw,26px); line-height: 1.3; font-weight: 700; }
.kp-notice button { min-width: 35%; padding: 3% 6%; border: 0; border-radius: 999px; background: #ef5682; color: white; font: 700 clamp(15px,3.8vw,34px)/1 "Source Sans 3",Arial,sans-serif; cursor: pointer; }
#setup-screen, #start-card, #end-card { visibility: hidden !important; pointer-events: none !important; }
#game-shell.game-hidden { display: none !important; }
body.kp-playing #kp-stage { display: none; }
@media (max-aspect-ratio: 9/20) { .kp-screen { width: 100vw; height: auto; } }