/* Text in the picture (layout-scene), see js/scene.js. Without the script the
   message lies on the lower part of the picture, like on an overlay card. */
.cv-scene-handles { display: none; }

.layout-scene .cv-card { width: min(100%, var(--card-width, 560px)); margin: 0 auto; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 2px rgb(23 34 28 / .06), 0 24px 50px rgb(23 34 28 / .22); }
.layout-scene .cv-front { position: relative; aspect-ratio: var(--frame, 3 / 2); overflow: hidden; }
.layout-scene .cv-picture { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.layout-scene .cv-message-front { position: absolute; left: 10%; top: 58%; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; width: 80%; padding: 22px 26px; overflow: hidden; text-align: center; transform-origin: 0 0; }
/* Centred, but a message too long for the plane runs on at the bottom, where it is measured. */
.layout-scene .cv-message-front { justify-content: center; justify-content: safe center; }
.layout-scene.font-hand .cv-message { font-size: 30px; }
/* A message that still does not fit fades out at the bottom; paper and board stay whole. */
.layout-scene.has-overflow .cv-message-front::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(to bottom, transparent, var(--plane-ground, transparent) 85%); pointer-events: none; }
.scene-inkt.layout-scene.has-overflow .cv-message-front, .scene-wit.layout-scene.has-overflow .cv-message-front { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }

/* What the plane looks like (SCENE_STYLES in app/cards.php). The paper and
   the board carry a fine grain and a light from the top left; their shadow
   lies on the same plane, so it falls onto the surface they lie on. */
.layout-scene { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --light: linear-gradient(135deg, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 45%, rgb(0 0 0 / .07)); --lying: 0 1px 1px rgb(0 0 0 / .35), 0 3px 6px rgb(0 0 0 / .2), 0 16px 30px -6px rgb(0 0 0 / .45); }
.scene-kaartje.layout-scene .cv-message-front { --plane-ground: #FBF8F1; border-radius: 3px; background: var(--light), var(--grain), #FBF8F1; color: var(--navy); outline: 1px solid rgb(176 146 92 / .6); outline-offset: -10px; box-shadow: var(--lying); }
.scene-kraft.layout-scene .cv-message-front { --plane-ground: #BC9063; border-radius: 2px; background: var(--light), var(--grain), repeating-linear-gradient(97deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 7px), linear-gradient(165deg, #D4AE83, #B88B5D); color: #2E2015; box-shadow: inset 0 0 22px rgb(90 55 20 / .35), var(--lying); }
.scene-bord.layout-scene .cv-message-front { --plane-ground: #2C332E; border: 11px solid #8A5A32; border-image: linear-gradient(135deg, #B07A47, #7A4C27 40%, #9C6A3C 70%, #6B4022) 1; background: radial-gradient(ellipse at 30% 25%, rgb(255 255 255 / .09), transparent 60%), var(--grain), #2C332E; color: #F3F1EA; text-shadow: 0 0 1px rgb(243 241 234 / .7); box-shadow: inset 0 0 18px rgb(0 0 0 / .45), var(--lying); }
.scene-bord.layout-scene .cv-message .name-slot { background: rgb(243 241 234 / .18); }
.scene-inkt.layout-scene .cv-message-front { color: #1A1714; mix-blend-mode: multiply; opacity: .88; }
.scene-wit.layout-scene .cv-message-front { color: #FFF; text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 0 14px rgb(0 0 0 / .3); }
.layout-scene .cv-message .name-slot { color: inherit; }

/* The editor: the plane can be dragged; handles on the corners and below it.
   Faded handles can still be grabbed, so a finger can pull a corner at once. */
.is-scene-editing.layout-scene .cv-message-front { cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; }
.layout-scene .cv-scene-handles { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.is-scene-active .cv-scene-handles { opacity: 1; transition-duration: .15s; }
.cv-scene-handles svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cv-scene-handles polygon { fill: none; stroke: #FFF; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1.5px rgb(0 0 0 / .7)); }
.cv-scene-corner, .cv-scene-move { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; pointer-events: auto; touch-action: none; cursor: grab; }
.cv-scene-corner::before { content: ""; position: absolute; inset: 12px; border: 3px solid var(--green); border-radius: 50%; background: #FFF; box-shadow: 0 1px 4px rgb(0 0 0 / .45); }
.cv-scene-move svg { position: absolute; inset: 8px; width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--green); fill: none; stroke: #FFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 1px 4px rgb(0 0 0 / .45); }
.cv-scene-corner:focus-visible, .cv-scene-move:focus-visible { outline: 3px solid var(--lime); outline-offset: -4px; }
.is-scene-dragging .cv-scene-corner, .is-scene-dragging .cv-scene-move, .is-scene-dragging .cv-message-front { cursor: grabbing; }

/* The "Vorm" panel and the hint under the card. */
.scene-tools { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--surface); }
.scene-howto { margin: 0 0 14px; padding-left: 1.3em; }
.scene-howto li + li { margin-top: 6px; }
.scene-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
.scene-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--muted); }
.scene-hint[hidden] { display: none; }
@media (pointer: coarse) { .scene-keys { display: none; } }
.scene-hint .icon { flex: none; width: 22px; height: 22px; color: var(--green); }
.layout-scene:not(.is-scene-editing) .cv-front { cursor: zoom-in; }