:root {
  --blue: #174a82;
  --blue-dark: #11375f;
  --red: #b33a30;
  --red-dark: #87271f;
  --paper: #f1e6c9;
  --paper-light: #f8efd9;
  --ink: #193b61;
  --line: rgba(47, 102, 151, .32);
  --shadow: rgba(36, 29, 20, .24);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #c7bda6; }
body {
  min-height: 100vh; margin: 0; color: var(--ink);
  font-family: "PingFang HK", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: #b8ad96;
  background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.16), transparent 28%), linear-gradient(120deg, #b3aa97, #d0c6ae 50%, #aba08d);
}
button, input, textarea { font: inherit; }
button { color: inherit; }
.desk-grain { position: fixed; inset: 0; pointer-events: none; opacity: .2; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.app-shell { position: relative; width: min(100%, 460px); min-height: 100svh; margin: 0 auto; overflow: hidden; background: var(--paper); box-shadow: 0 0 55px var(--shadow); }
.screen { display: none; position: relative; min-height: 100svh; padding: max(22px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); overflow: hidden; }
.screen.is-active { display: flex; flex-direction: column; animation: pageIn .32s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.cover-screen { color: #f6e8c8; background-color: var(--blue); background-image: radial-gradient(circle at 22% 18%, rgba(255,255,255,.08), transparent 30%), repeating-linear-gradient(97deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px); border: 9px solid var(--blue-dark); outline: 1px solid rgba(238,221,181,.38); outline-offset: -15px; }
.cover-screen::after { content: ""; position: absolute; inset: 21px; pointer-events: none; border: 1px solid rgba(246,232,200,.28); }
.cover-screen > * { position: relative; z-index: 2; }
.book-corner { position: absolute; z-index: 3; right: -28px; bottom: -28px; width: 85px; height: 85px; transform: rotate(45deg); border-left: 2px solid rgba(255,255,255,.22); background: #123b68; box-shadow: -8px 0 20px rgba(0,0,0,.18); }
.cover-header, .cover-footer { display: flex; justify-content: space-between; align-items: center; font-family: ui-monospace, "SFMono-Regular", monospace; letter-spacing: .06em; }
.cover-header { font-size: 10px; text-transform: uppercase; }
.tiny-button { border: 0; border-bottom: 1px solid rgba(255,255,255,.55); padding: 2px 0; color: inherit; background: transparent; font-size: 10px; cursor: pointer; }
.cover-title { margin-top: 9.5svh; text-align: center; }
.cover-title p { margin: 0 0 -2px; font-family: "Kaiti TC", "STKaiti", serif; font-size: 15px; letter-spacing: .2em; }
.cover-title h1 { display: flex; justify-content: center; gap: .08em; margin: 4px 0 0; font-family: "Kaiti TC", "STKaiti", serif; font-size: clamp(48px, 15vw, 66px); font-weight: 900; line-height: 1; letter-spacing: -.03em; text-shadow: 3px 4px 0 rgba(11,45,78,.48); }
.cover-title h1 span { display: block; }
.cover-title h1 .title-top { color: #f6e8c8; transform: rotate(-2deg); }
.cover-title h1 .title-bottom { color: #e7b847; transform: rotate(2deg); }
.title-rule { width: 78%; margin: 13px auto 10px; border-top: 3px double #e8d6ad; }
.cover-title small { font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .26em; }
.cover-doodle { position: relative; width: 160px; height: 130px; margin: 3.8svh auto 1.6svh; transform: rotate(-2deg); }
.doodle-head { position: absolute; left: 53px; top: 12px; width: 60px; height: 58px; border: 3px solid #f1dfb9; border-radius: 49% 46% 44% 51%; background: var(--blue); }
.doodle-head i { position: absolute; top: -12px; left: 12px; width: 35px; height: 20px; border: 3px solid #f1dfb9; border-width: 3px 0 0 3px; border-radius: 60% 0 0; transform: rotate(15deg); }
.doodle-head b { position: relative; display: inline-block; margin: 16px 2px 0 12px; font-size: 15px; line-height: 1; }
.doodle-head b + b { margin-left: 2px; }
.doodle-head span { position: absolute; left: 22px; bottom: 8px; width: 20px; border-top: 3px solid #f1dfb9; transform: rotate(-8deg); }
.doodle-body { position: absolute; left: 61px; top: 68px; width: 47px; height: 48px; border: 3px solid #f1dfb9; border-radius: 16px 16px 2px 2px; }
.cover-doodle p { position: absolute; right: -8px; top: -1px; margin: 0; font-family: "Kaiti TC", serif; font-size: 13px; transform: rotate(8deg); }
.steam { position: absolute; border: 2px solid #e7b847; border-color: #e7b847 transparent transparent; border-radius: 50%; }
.steam-one { left: 34px; width: 21px; height: 28px; transform: rotate(-35deg); }.steam-two { right: 22px; top: 18px; width: 18px; height: 23px; transform: rotate(42deg); }
.owner-label { width: 82%; margin: 0 auto 2.4svh; border: 1px solid rgba(246,232,200,.68); padding: 7px; text-align: center; }
.owner-label span { display: block; font-size: 9px; letter-spacing: .22em; }
.owner-label button { min-width: 72%; border: 0; border-bottom: 1px solid rgba(246,232,200,.6); padding: 5px 8px 2px; color: #f6e8c8; background: transparent; font-family: "Kaiti TC", serif; font-size: 20px; cursor: pointer; }
.home-actions { display: grid; gap: 10px; margin-top: auto; }
.home-actions button { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 70px; border: 1px solid rgba(246,232,200,.7); padding: 10px 13px; text-align: left; cursor: pointer; transition: transform .18s, background .18s; }
.home-actions button:active { transform: scale(.98); }
.primary-action { color: var(--blue-dark); background: #f1dfb9; box-shadow: 5px 5px 0 #0e345d; }
.secondary-action { color: #f6e8c8; background: rgba(5,33,62,.2); }
.button-number { font-family: ui-monospace, monospace; font-size: 11px; opacity: .72; }.home-actions strong { display: block; font-family: "Kaiti TC", serif; font-size: 22px; line-height: 1.2; }.home-actions small { display: block; margin-top: 3px; font-size: 10px; opacity: .76; }.home-actions b { font-size: 20px; }
.cover-footer { margin-top: 20px; font-size: 8px; opacity: .65; }

.paper-screen { background-color: var(--paper-light); background-image: repeating-linear-gradient(to bottom, transparent 0 41px, var(--line) 42px, transparent 43px); }
.paper-screen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 51px; border-left: 1px solid rgba(190,58,48,.29); }
.paper-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='x'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23x)' opacity='.13'/%3E%3C/svg%3E"); }
.paper-screen > * { position: relative; z-index: 1; }
.paper-header { display: grid; grid-template-columns: 40px 1fr 34px; align-items: center; gap: 9px; min-height: 68px; border-bottom: 2px solid var(--ink); }
.paper-header small { font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .18em; }.paper-header h2 { margin: 2px 0 0; font-family: "Kaiti TC", serif; font-size: 25px; line-height: 1.1; }.back-button { width: 34px; height: 34px; border: 1px solid var(--ink); border-radius: 50%; background: rgba(255,255,255,.2); font-size: 19px; cursor: pointer; }.page-no { display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid var(--red); border-radius: 50%; color: var(--red); font: 700 11px ui-monospace, monospace; transform: rotate(7deg); }
.notebook-form { display: flex; flex-direction: column; flex: 1; gap: 19px; padding: 24px 2px 0 39px; }
.notebook-form label { position: relative; display: block; }.notebook-form label > span { display: block; margin-bottom: 5px; color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .12em; }.notebook-form input, .notebook-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(25,59,97,.48); border-radius: 0; padding: 7px 2px; outline: 0; color: var(--ink); background: rgba(255,255,255,.11); font-family: "Kaiti TC", "STKaiti", serif; font-size: 18px; }.notebook-form input:focus, .notebook-form textarea:focus { border-bottom-color: var(--red); background: rgba(255,255,255,.35); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.notebook-form textarea { height: 118px; resize: none; line-height: 29px; background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(25,59,97,.26) 28px, transparent 29px); }.event-field small { position: absolute; right: 0; bottom: -17px; font-size: 9px; }.ink-button { width: 100%; border: 0; padding: 14px 17px; color: #f7edda; background: var(--blue); box-shadow: 4px 4px 0 rgba(19,48,77,.22); font-weight: 800; letter-spacing: .08em; cursor: pointer; }.ink-button span { float: right; }.notebook-form .ink-button { margin-top: auto; }.margin-note { margin: 15px 0 0 39px; color: rgba(25,59,97,.7); font-family: "Kaiti TC", serif; font-size: 10px; transform: rotate(-1deg); }

.rating-screen { padding-bottom: 22px; }.case-summary { margin: 17px 0 7px 39px; border: 1px solid rgba(25,59,97,.36); padding: 10px 13px; background: rgba(255,255,255,.2); }.case-summary span { color: var(--red); font-size: 9px; letter-spacing: .15em; }.case-summary strong { display: block; margin: 3px 0; font-family: "Kaiti TC", serif; font-size: 21px; }.case-summary p { overflow: hidden; margin: 0; opacity: .72; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }.stamp-instruction { margin: 13px 0 9px 39px; font-family: "Kaiti TC", serif; font-size: 14px; }.rating-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-left: 39px; }.rating-options button { border: 1px solid rgba(25,59,97,.4); padding: 7px 1px; color: var(--ink); background: rgba(255,255,255,.2); cursor: pointer; }.rating-options button b { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 3px; border: 2px solid currentColor; border-radius: 50%; font: 700 17px ui-monospace, monospace; }.rating-options button span { font-size: 8px; }.rating-options button.is-selected { border-color: var(--red); color: var(--red); background: rgba(179,58,48,.08); transform: rotate(-2deg); }.stamp-zone { position: relative; display: grid; place-items: center; flex: 1; min-height: 220px; margin-left: 39px; }.stamp-target { display: grid; place-items: center; width: 145px; height: 145px; border: 2px dashed rgba(179,58,48,.32); border-radius: 50%; color: rgba(179,58,48,.43); font-size: 10px; letter-spacing: .1em; }.stamp-target.is-stamped { border: 5px double var(--red); color: var(--red); transform: rotate(-8deg); animation: stampHit .38s cubic-bezier(.2,1.5,.4,1) both; }.stamp-target.is-stamped span { max-width: 95px; text-align: center; font-family: "Kaiti TC", serif; font-size: 22px; font-weight: 900; line-height: 1.05; }.stamp-handle { position: absolute; right: 7px; bottom: 8px; width: 72px; height: 76px; border: 0; color: #f5e7c9; background: transparent; cursor: pointer; }.stamp-handle:disabled { opacity: .3; }.stamp-handle i { display: block; width: 43px; height: 42px; margin: 0 auto -7px; border-radius: 48% 48% 10% 10%; background: linear-gradient(90deg,#70412b,#a06940,#633822); box-shadow: inset 5px 0 rgba(255,255,255,.12); }.stamp-handle span { display: block; border: 5px solid #7c251f; padding: 4px; background: var(--red); font-size: 10px; }.stamp-handle.is-hitting { animation: handleHit .35s ease; }.ink-splash { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(179,58,48,.12), transparent 62%); transform: translate(-50%,-50%); }.ink-splash.show { animation: splash .5s ease; }.next-button { margin-left: 39px; width: calc(100% - 39px); }.next-button:disabled, .red-button:disabled { opacity: .35; cursor: not-allowed; }
@keyframes stampHit { 0% { opacity: 0; transform: scale(1.65) rotate(-16deg); } 65% { opacity: 1; transform: scale(.9) rotate(-8deg); } 100% { transform: scale(1) rotate(-8deg); } }
@keyframes handleHit { 50% { transform: translate(-95px,-90px) scale(.82); } }
@keyframes splash { 0% { opacity: .8; transform: translate(-50%,-50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4); } }

.release-copy { margin: 14px 0 5px 39px; font-family: "Kaiti TC", serif; font-size: 14px; }.villain-stage { position: relative; height: 240px; margin-left: 39px; border: 1px dashed rgba(25,59,97,.4); background: rgba(255,255,255,.16); overflow: hidden; }.paper-person { position: absolute; left: 50%; top: 45%; width: 150px; height: 205px; border: 0; color: var(--ink); background: transparent; transform: translate(-50%,-50%); cursor: crosshair; transition: transform .12s; }.paper-person.is-hit { animation: personHit .25s ease; }.person-head { position: absolute; left: 44px; top: 15px; width: 65px; height: 61px; border: 3px solid var(--ink); border-radius: 47% 51% 45% 52%; background: var(--paper-light); z-index: 3; }.person-head i { position: absolute; top: -8px; left: 8px; width: 44px; height: 20px; border: 3px solid var(--ink); border-width: 3px 0 0 2px; border-radius: 50%; transform: rotate(7deg); }.person-head b { position: relative; display: inline-block; margin: 20px 1px 0 13px; font-size: 15px; }.person-head b + b { margin-left: 2px; }.person-head em { position: absolute; left: 22px; bottom: 8px; width: 21px; height: 7px; border-top: 3px solid var(--ink); transform: rotate(-7deg); }.person-body { position: absolute; left: 52px; top: 75px; width: 49px; height: 76px; border: 3px solid var(--ink); background: var(--paper-light); z-index: 2; }.person-arm, .person-leg { position: absolute; height: 3px; background: var(--ink); transform-origin: left; }.person-arm { top: 89px; width: 52px; }.person-arm.left { left: 56px; transform: rotate(150deg); }.person-arm.right { left: 96px; transform: rotate(30deg); }.person-leg { top: 147px; width: 61px; }.person-leg.left { left: 67px; transform: rotate(108deg); }.person-leg.right { left: 87px; transform: rotate(72deg); }.paper-person strong { position: absolute; left: 27px; bottom: 2px; min-width: 96px; border: 1px solid var(--red); padding: 2px 7px; color: var(--red); background: var(--paper-light); font-family: "Kaiti TC", serif; font-size: 12px; transform: rotate(-3deg); }.paper-person.has-crosses::after { content: "╳  ╳  ╳"; position: absolute; left: 24px; top: 45px; z-index: 4; color: var(--red); font-size: 36px; font-weight: 900; transform: rotate(-12deg); }.paper-person.has-charm::before { content: "小\A人\A退\A散"; white-space: pre; position: absolute; right: 10px; top: 48px; z-index: 6; border: 2px solid var(--red); padding: 7px 5px; color: var(--red); background: #edcf67; font-family: "Kaiti TC", serif; font-weight: 900; line-height: 1.05; transform: rotate(13deg); box-shadow: 2px 2px rgba(0,0,0,.14); }.rage-cloud { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--red); border-radius: 50%; color: var(--red); font-family: "Kaiti TC", serif; font-weight: 900; opacity: .7; }.c1 { left: 18px; top: 30px; transform: rotate(-9deg); }.c2 { right: 21px; top: 69px; transform: rotate(12deg); }.c3 { left: 29px; bottom: 19px; }.hit-count { position: absolute; right: 8px; bottom: 7px; text-align: center; }.hit-count b { display: block; color: var(--red); font: 700 20px ui-monospace, monospace; }.hit-count span { font-size: 8px; }.release-tools { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 9px 0 10px 39px; }.release-tools button { border: 1px solid rgba(25,59,97,.42); padding: 7px 2px; color: var(--ink); background: rgba(255,255,255,.26); font-family: "Kaiti TC", serif; font-size: 17px; cursor: pointer; }.release-tools button span { display: block; font-family: sans-serif; font-size: 8px; }.release-tools button.is-active { border-color: var(--red); color: var(--red); background: rgba(179,58,48,.07); }.resolution-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 0 10px 39px; border: 0; padding: 0; }.resolution-options legend { width: 100%; margin-bottom: 5px; color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .12em; }.resolution-options input { position: absolute; opacity: 0; }.resolution-options label span { display: block; border: 1px solid rgba(25,59,97,.34); padding: 7px 4px; text-align: center; background: rgba(255,255,255,.18); font-size: 10px; font-weight: 700; cursor: pointer; }.resolution-options label small { display: block; margin-top: 2px; font-size: 7px; font-weight: 400; opacity: .68; }.resolution-options input:checked + span { border: 2px solid var(--red); color: var(--red); transform: rotate(-1deg); }.red-button { margin-left: 39px; width: calc(100% - 39px); background: var(--red); }
@keyframes personHit { 20% { transform: translate(-54%,-50%) rotate(-4deg); } 60% { transform: translate(-46%,-50%) rotate(4deg); } 100% { transform: translate(-50%,-50%); } }

.archive-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 18px 0 12px 39px; border: 1px solid rgba(25,59,97,.4); background: rgba(255,255,255,.2); }.archive-stats div { padding: 10px 4px; text-align: center; }.archive-stats div + div { border-left: 1px solid rgba(25,59,97,.28); }.archive-stats strong { display: block; font: 700 21px ui-monospace, monospace; }.archive-stats span { font-size: 8px; }.archive-filter { display: flex; gap: 5px; margin: 0 0 12px 39px; }.archive-filter button { flex: 1; border: 1px solid rgba(25,59,97,.35); padding: 6px 2px; background: rgba(255,255,255,.23); font-size: 9px; cursor: pointer; }.archive-filter button.is-active { color: #fff7e4; background: var(--blue); }.entry-list { display: grid; gap: 10px; margin-left: 39px; overflow: auto; padding-bottom: 20px; }.entry-card { position: relative; border: 1px solid rgba(25,59,97,.4); padding: 11px 12px; background: rgba(248,239,217,.88); box-shadow: 3px 3px rgba(25,59,97,.09); }.entry-card header { display: flex; align-items: center; gap: 8px; padding-right: 55px; }.entry-card time { font: 9px ui-monospace, monospace; opacity: .65; }.entry-card h3 { margin: 6px 0 4px; font-family: "Kaiti TC", serif; font-size: 19px; }.entry-card p { display: -webkit-box; overflow: hidden; margin: 0; font-size: 10px; line-height: 1.5; opacity: .76; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.entry-card .rating-seal { position: absolute; right: 11px; top: 11px; display: grid; place-items: center; width: 44px; height: 44px; border: 3px double var(--red); border-radius: 50%; color: var(--red); font: 800 19px ui-monospace, monospace; transform: rotate(8deg); }.status-chip { border: 1px solid currentColor; padding: 2px 5px; color: var(--red); font-size: 8px; }.entry-meta { display: flex; justify-content: space-between; margin-top: 8px; border-top: 1px dashed rgba(25,59,97,.32); padding-top: 6px; font-size: 8px; }.delete-entry { border: 0; padding: 0; color: rgba(135,39,31,.66); background: transparent; font-size: 8px; cursor: pointer; }.empty-archive { display: none; flex: 1; align-items: center; justify-content: center; flex-direction: column; margin-left: 39px; text-align: center; }.empty-archive.is-visible { display: flex; }.mini-person { display: grid; place-items: center; width: 70px; height: 70px; border: 2px solid var(--ink); border-radius: 50%; font-family: monospace; }.empty-archive h3 { margin: 12px 0 2px; font-family: "Kaiti TC", serif; }.empty-archive p { margin: 0 0 13px; font-size: 10px; }.empty-archive button { border: 1px solid var(--ink); padding: 8px 14px; background: transparent; cursor: pointer; }

.success-screen { align-items: center; justify-content: center; text-align: center; color: #f8ebce; background: var(--blue); }.success-screen::before { content: ""; position: absolute; inset: 18px; border: 3px double rgba(248,235,206,.55); }.success-rays { position: absolute; width: 470px; height: 470px; opacity: .13; background: repeating-conic-gradient(from 0deg, #f8ebce 0 7deg, transparent 7deg 18deg); animation: slowSpin 20s linear infinite; }.success-stamp { z-index: 1; display: grid; place-items: center; width: 145px; height: 145px; border: 9px double #e7b847; border-radius: 50%; color: #e7b847; font-family: "Kaiti TC", serif; font-size: 49px; font-weight: 900; line-height: .92; transform: rotate(-8deg); animation: stampHit .55s .12s both; }.success-screen > p, .success-screen h2, .success-actions { position: relative; z-index: 1; }.success-screen > p:first-of-type { margin: 28px 0 6px; font: 9px ui-monospace, monospace; letter-spacing: .2em; }.success-screen h2 { margin: 0; font-family: "Kaiti TC", serif; font-size: 38px; }.success-screen h2 + p { margin: 5px 0 26px; font-size: 12px; opacity: .76; }.success-actions { width: 78%; }.success-actions .ink-button { color: var(--blue-dark); background: #f2dfb8; }.text-button { margin-top: 16px; border: 0; border-bottom: 1px solid currentColor; padding: 2px; color: #f8ebce; background: transparent; font-size: 11px; cursor: pointer; }
@keyframes slowSpin { to { transform: rotate(360deg); } }

.name-dialog { width: min(calc(100% - 34px), 400px); border: 0; padding: 0; color: var(--ink); background: var(--paper-light); box-shadow: 0 18px 60px rgba(0,0,0,.4); }.name-dialog::backdrop { background: rgba(9,25,42,.7); backdrop-filter: blur(3px); }.name-dialog form { position: relative; border: 6px double var(--blue); padding: 28px 24px 22px; }.name-dialog small { font: 8px ui-monospace, monospace; letter-spacing: .17em; }.name-dialog h2 { margin: 4px 0 20px; font-family: "Kaiti TC", serif; }.name-dialog label span { display: block; margin-bottom: 4px; color: var(--red); font-size: 10px; }.name-dialog input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); padding: 9px 2px; outline: 0; color: var(--ink); background: transparent; font-family: "Kaiti TC", serif; font-size: 20px; }.name-dialog .ink-button { margin-top: 22px; }.dialog-close { position: absolute; right: 10px; top: 8px; border: 0; background: transparent; font-size: 24px; cursor: pointer; }.toast { position: fixed; z-index: 20; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); max-width: calc(100% - 40px); padding: 10px 16px; color: #fff6e3; background: rgba(17,55,95,.94); box-shadow: 0 5px 20px rgba(0,0,0,.25); font-size: 11px; opacity: 0; transform: translate(-50%,20px); transition: .25s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (min-width: 600px) { body { padding: 24px 0; }.app-shell, .screen { min-height: min(880px, calc(100vh - 48px)); }.app-shell { border-radius: 3px; }.cover-title { margin-top: 72px; } }
@media (max-height: 720px) { .cover-title { margin-top: 4svh; }.cover-doodle { height: 105px; margin-top: 1svh; transform: scale(.82); }.owner-label { margin-bottom: 1svh; }.notebook-form { gap: 11px; padding-top: 15px; }.notebook-form textarea { height: 78px; }.villain-stage { height: 190px; }.paper-person { transform: translate(-50%,-50%) scale(.8); }.paper-person.is-hit { animation: none; }.release-copy { margin-top: 7px; }.case-summary { margin-top: 9px; }.stamp-zone { min-height: 160px; }.stamp-target { width: 115px; height: 115px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }