@font-face { font-family: 'Galmuri11'; src: url('fonts/Galmuri11.woff2') format('woff2'); }
/* type size of the windows over the game: 1.8vw is the game's 28px at 1560 wide, so it shrinks with the game on a phone.
   With a mouse it is the game's 22px, as ui/dialog.ts does (owner 2026-11-03: text took too much of a PC screen). */
:root { --t: clamp(15px, 1.8vw, 28px); --t-small: clamp(13px, 1.5vw, 22px); }
@media (pointer: fine) and (not (any-pointer: coarse)) { :root { --t: clamp(14px, 1.41vw, 24px); --t-small: clamp(12px, 1.2vw, 18px); } }
/* 글자 크게 in the notebook (src/game/ui/textsize.ts): the same step up as the talk windows, 36 for 30 */
html.big { --t: clamp(18px, 2.16vw, 34px); } /* --t-small stays */
@media (pointer: fine) and (not (any-pointer: coarse)) { html.big { --t: clamp(17px, 1.7vw, 29px); } }
html, body { margin: 0; padding: 0; background: #0e0c16; height: 100%; }
#app, #game-container { width: 100%; height: 100%; }
/* Landscape only (owner 2026-10-31): a phone held upright gets the page laid on its side, the block at the end */
/* the save code paste box (src/game/ui/pastebox.ts); 28px is the phone floor, as in tools/font_floor.mjs */
.paste { position: fixed; inset: 0; z-index: 10; background: #0e0c16e8; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; padding: 24px; box-sizing: border-box; font: 28px 'Galmuri11', sans-serif; color: #f0ecdc; }
.paste textarea { width: min(900px, 90vw); height: 30vh; font: inherit; background: #2e2a26; color: #f0ecdc;
    border: 2px solid #c8b68c; border-radius: 6px; padding: 12px; box-sizing: border-box; }
.paste div:last-child { display: flex; gap: 16px; }
.paste button { font: inherit; padding: 12px 32px; border: 0; cursor: pointer; background: #45403a; color: #f0ecdc; }
.paste button.main { background: #c8b68c; color: #2a241e; }
/* the notebook (src/game/ui/notebook.ts). 1.8vw is the game's 28px at 1560 wide, so it shrinks with the game on a phone */
.note { position: fixed; inset: 3vh 6vw; z-index: 10; display: flex; flex-direction: column; background: #24201ef5;
    border: 3px solid #6b5a40; border-radius: 10px; font: var(--t)/1.5 'Galmuri11', sans-serif; color: #f0ecdc; }
.note .head { display: flex; gap: 0.5em; padding: 0.6em; border-bottom: 2px solid #45403a; }
.note button { font: inherit; padding: 0.35em 1.1em; border: 0; border-radius: 6px; cursor: pointer; background: #45403a; color: #a8a090; }
.note button.on { background: #c8b68c; color: #2a241e; }
.note button.close { margin-left: auto; color: #f0ecdc; }
.note button.sound { margin-left: auto; background: none; border: 2px solid #45403a; color: #a8a090; }
.note button.sound + button.close { margin-left: 0; }
.note button.sound.on { background: #c8b68c; border-color: #c8b68c; color: #2a241e; }
/* the sound page: a name, then its slider or switch */
.note .set { display: flex; align-items: center; gap: 1em; margin: 0.7em 0; }
.note .body.sets { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2em; align-content: start; }
.note .set span { width: 5em; flex: none; color: #a8a090; }
.note .set input[type=range] { flex: 1; max-width: 24em; height: 1.6em; accent-color: #c8b68c; cursor: pointer; }
.note .set button { min-width: 5em; color: #f0ecdc; }
.note .body { overflow-y: auto; padding: 0.4em 1em 1em; -webkit-overflow-scrolling: touch; }
.note p { margin: 0.35em 0; }
.note .todo { margin: 0.35em 0; padding: 0.45em 0.7em; background: #2e2a26; border-left: 4px solid #c8b68c; border-radius: 4px; }
.note .todo .go { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.35em; }
.note .todo .go button { background: #c8b68c; color: #2a241e; padding: 0.25em 0.9em; }
.note .dim, .note h4 { color: #a8a090; }
.note h4 { font: inherit; margin: 0.9em 0 0.1em; }
.note h4.guide { color: #cdb47e; }
.note a.link { color: #e8cf8c; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.note .ask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0e0c16b0; border-radius: 10px; }
.note .ask > div { background: #2e2a26; border: 2px solid #c8b68c; border-radius: 8px; padding: 0.8em 1.4em; text-align: center; }
.note .ask .go { justify-content: center; gap: 0.8em; display: flex; }
.note .ask button { background: #c8b68c; color: #2a241e; }
.note .ask button.no { background: #45403a; color: #f0ecdc; }
/* the voyage log as a picture (src/game/ui/logcard.ts) */
.card { position: fixed; inset: 0; z-index: 10; background: #0e0c16f0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 16px; box-sizing: border-box; font: var(--t) 'Galmuri11', sans-serif; color: #f0ecdc; }
.card img { max-height: calc(100% - 7em); max-width: 100%; border-radius: 8px; }
.card .said { margin: 0; min-height: 1.2em; color: #a8a090; }
.card div { display: flex; gap: 0.8em; }
.card button { font: inherit; padding: 0.4em 1.4em; border: 0; border-radius: 6px; cursor: pointer; background: #45403a; color: #f0ecdc; }
.card button.main { background: #c8b68c; color: #2a241e; }
/* testers' reports (src/game/ui/report.ts): the corner button on every screen, and the box it opens over the game */
/* the corner (src/game/ui/corner.ts) sets its own place, height and letter size from the game's size */
.corner { position: fixed; z-index: 9; display: flex; }
.corner button { font: inherit; font-family: 'Galmuri11', sans-serif; height: 100%; padding: 0 0.7em; box-sizing: border-box;
    border: 2px solid #6b5a40; border-radius: 6px; background: #24201ecc; color: #a8a090; cursor: pointer; line-height: 1; }
.corner .sound { padding: 0 0.45em; }
/* news from the owner's sheet (src/game/ui/news.ts): over the top middle of the game, a tap puts it away */
.news { position: fixed; left: 50%; top: 7.5vh; /* under the numbers' line (ui/topbar.ts, 48 of 720) */ transform: translateX(-50%); z-index: 9; max-width: 70vw; padding: 0.4em 1em;
    font: var(--t)/1.4 'Galmuri11', sans-serif; color: #2a241e; background: #e8dcbcf2; border: 3px solid #6b5a40;
    border-radius: 8px; cursor: pointer; box-shadow: 0 4px 16px #0008; }
.news p { margin: 0.15em 0; }
.news p::before { content: '소식  '; color: #8a5a2a; }
.report { position: fixed; inset: 0; z-index: 11; background: #0e0c16e0; display: flex; align-items: center; justify-content: center;
    font: var(--t)/1.4 'Galmuri11', sans-serif; color: #f0ecdc; }
.report > div { display: flex; gap: 1em; align-items: stretch; max-width: 94vw; max-height: 90vh; padding: 0.8em; box-sizing: border-box;
    background: #24201ef5; border: 3px solid #6b5a40; border-radius: 10px; }
.report img { width: 38vw; align-self: center; border-radius: 6px; border: 2px solid #45403a; }
.report .side { display: flex; flex-direction: column; gap: 0.5em; width: 44vw; }
.report textarea, .report input { font: inherit; background: #2e2a26; color: #f0ecdc; border: 2px solid #c8b68c; border-radius: 6px;
    padding: 0.4em; box-sizing: border-box; width: 100%; }
.report textarea { flex: 1; min-height: 5em; resize: none; }
.report input { border-color: #45403a; }
.report .said { margin: 0; color: #a8a090; word-break: keep-all; }
.report .logsw { display: flex; align-items: center; gap: 0.3em; color: #a8a090; cursor: pointer; }
.report .logsw input { width: 1.2em; height: 1.2em; flex: none; margin: 0; accent-color: #c8b68c; }
.report .row { display: flex; gap: 0.8em; justify-content: flex-end; }
.report button { font: inherit; padding: 0.35em 1.4em; border: 0; border-radius: 6px; cursor: pointer; background: #45403a; color: #f0ecdc; }
.report button.main { background: #c8b68c; color: #2a241e; }
/* A phone held upright gets the whole page laid on its side (owner 2026-11-04: with auto-rotate off a turned phone never
   turns the page), to be turned sideways and read the right way up. The body turns a quarter clockwise about its top left
   and moves down by its height; src/game/ui/turned.ts turns the touches back for the game. Inside the turned body the
   screen's width is the page's height, so the windows' vw and vh swap. Last in the file, so it wins over the rules above.
   Only 3 high to 2 wide or taller (UPRIGHT in turned.ts says why): a squarer screen upright stays as it is. */
@media (orientation: portrait) and (pointer: coarse) and (max-aspect-ratio: 2/3) {
    html { overflow: hidden; }
    body { position: fixed; top: 0; left: 0; width: 100vh; width: 100dvh; height: 100vw; overflow: hidden;
        transform-origin: 0 0; transform: rotate(90deg) translateY(-100%); }
    :root { --t: clamp(15px, 1.8vh, 28px); --t-small: clamp(13px, 1.5vh, 22px); }
    html.big { --t: clamp(18px, 2.16vh, 34px); }
    .paste textarea { width: min(900px, 90vh); height: 30vw; }
    .note { inset: 3vw 6vh; }
    .news { top: 7.5vw; max-width: 70vh; }
    .report > div { max-width: 94vh; max-height: 90vw; }
    .report img { width: 38vh; }
    .report .side { width: 44vh; }
}