/* ── Paper overlay — a modal that is a worn sheet of paper, not a UI panel.
   (2026-09-28, first used by the message in a bottle; built to be reused.)

   Markup (ui/paper_sheet.js builds it):
     .paper-overlay                 full-screen dim + warm vignette
       .paper-sheet                 the shadow (drop-shadow follows the dented edge)
         .paper                     the sheet: dented edge (clip-path set per open
                                    by paper_sheet.js), aged colour, fibres,
                                    a stain, darker worn edges (no creases)
   Text on it is handwritten ('Caveat', OFL, self-hosted — client/fonts/)
   in ink colours; controls are ink too (.paper-ink-btn, .paper-close),
   never pills or UI chrome.
   ── */

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url('/client/fonts/Caveat-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url('/client/fonts/Caveat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url('/client/fonts/Caveat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.paper-overlay {
	--ink: #2f2616;            /* brown-black writing ink */
	--ink-faded: #7a6546;      /* pencil / faded ink */
	--ink-red: #8c3b2a;        /* corrections, warnings */
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	background: radial-gradient(ellipse at center, rgba(40, 28, 12, 0.18) 0%, rgba(20, 12, 4, 0.5) 100%);
}

.paper-overlay.hidden {
	display: none;
}

.paper-sheet {
	--tilt: 0deg;
	width: min(420px, 100%);
	max-height: min(640px, calc(100dvh - 32px));
	display: flex;
	filter: drop-shadow(0 3px 2px rgba(40, 25, 5, 0.35)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.4));
	transform: rotate(var(--tilt));
	/* No opening animation — the sheet is simply there (owner, 2026-09-28). */
}

.paper {
	--stain2-x: 18%;
	--stain2-y: 82%;
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 30px 24px;
	color: var(--ink);
	font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
	background:
		/* paper fibres */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
		/* a soft water stain (no tea ring — it read as a circle around the ✕, owner 2026-09-28) */
		radial-gradient(ellipse 120px 80px at var(--stain2-x) var(--stain2-y), rgba(160, 115, 50, 0.14), transparent 70%),
		/* worn, darker edges */
		radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(140, 95, 40, 0.28) 100%),
		/* the paper itself */
		linear-gradient(170deg, #f4e9cc 0%, #efe0bb 55%, #e6d2a4 100%);
	box-sizing: border-box;
	overflow: hidden;
}

.paper-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.paper-title {
	min-height: 30px;          /* keeps its space even when left empty */
	font: 700 30px/1 'Caveat', cursive;
	color: var(--ink);
	transform: rotate(-1.5deg);
	transform-origin: left center;
}

/* A pencil-scratched ✕ in the corner. */
.paper-close {
	flex: none;
	margin: -8px -12px 0 0;
	padding: 0 6px;
	background: none;
	border: none;
	font: 400 30px/1 'Caveat', cursive;
	color: var(--ink-faded);
	cursor: pointer;
}

.paper-close:hover {
	color: var(--ink);
}

.paper-close:disabled {
	opacity: 0.4;
	cursor: default;
}

/* An ink button: handwritten words with a hand-drawn underline. */
.paper-ink-btn {
	padding: 2px 4px 8px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 40 2, 80 7, 120 4 S 180 3, 198 5' fill='none' stroke='%232f2616' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 8px no-repeat;
	border: none;
	font: 700 25px/1 'Caveat', cursive;
	color: var(--ink);
	cursor: pointer;
	transition: transform 0.12s;
}

.paper-ink-btn:hover:not(:disabled) {
	transform: rotate(-2deg) scale(1.04);
}

.paper-ink-btn:disabled {
	color: var(--ink-faded);
	opacity: 0.8;
	cursor: default;
}

/* Writing space: faint pencil rules on the same sheet, no box. */
.paper-write {
	width: 100%;
	box-sizing: border-box;
	resize: none;
	padding: 0 2px;
	border: none;
	outline: none;
	background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(110, 85, 50, 0.3) 27px 28px);
	background-attachment: local;
	font: 400 23px/28px 'Caveat', cursive;
	color: var(--ink);
	caret-color: var(--ink);
}

.paper-write::placeholder {
	color: var(--ink-faded);
	opacity: 0.75;
}

.paper-write:disabled {
	opacity: 0.6;
}

.paper-small {
	font: 400 18px/1.1 'Caveat', cursive;
	color: var(--ink-faded);
}

.paper-warn {
	font: 600 19px/1.15 'Caveat', cursive;
	color: var(--ink-red);
}

.paper-scroll {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(110, 80, 40, 0.35) transparent;
}