/* 來畫畫吧！ — chunky, bright and outlined like 來釣魚吧！, 對決吧！ and the
   games homepage: cream cards with thick ink outlines and hard shadows, a
   paint box of colours (each canvas has its own), the title font for what
   matters most. The rooms around the canvases are full of things; the
   chrome over them stays small and clear. */
/* the zh-TW round font is 來釣魚吧！'s, next door (/fish/ behind the homepage, the root on a bare Node server) */
@font-face { font-family: 'LetsFish Round'; src: url('../../fish/fonts/letsfish-round.woff2') format('woff2'), url('../../fonts/letsfish-round.woff2') format('woff2'); font-display: swap; }

:root {
  --ink: #22163a; --ink2: #4b3b68; --ink3: #8a7ca3; --cream: #fff7e6; --cream2: #ffeccb; --paper: #fffdf7;
  --sun: #ffd23f; --coral: #ff5d8f; --sea: #3fa7ff; --mint: #5bd96a; --grape: #8c5cff; --orange: #ff9f43; --aqua: #4fd8e8; --lime: #b9e769; --pink: #ff9ccf; --red: #ff4d5e;
  --night: #2a1d4a;
  --title: 'Lilita One', 'LetsFish Round', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font: 'LetsFish Round', 'Fredoka', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --pop: 0 4px 0 var(--ink);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--night); color: var(--ink); font-family: var(--font); overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: none; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; }
input, button, select { font: inherit; color: inherit; }
input:not([type=range], [type=checkbox], [type=radio], [type=color], [type=file]) { user-select: text; -webkit-user-select: text; }
/* (sliders and boxes are no text: a long press on one selects nothing, whatever the shared guard allows inputs) */
html.mobile-gestures input:is([type=range], [type=checkbox], [type=radio], [type=color], [type=file]) { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s; background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(20, 12, 36, .5) 100%); }
body.in-studio .vignette { opacity: .45; }
body.in-hall .vignette { opacity: .45; }

/* each canvas has a colour of its own (the menu's tiles, the rooms) */
[data-m="sand"] { --c: var(--sun); } [data-m="chalk"] { --c: var(--mint); } [data-m="marker"] { --c: var(--sea); }
[data-m="oil"] { --c: var(--orange); } [data-m="watercolor"] { --c: var(--aqua); } [data-m="ink"] { --c: var(--grape); }
[data-m="acrylic"] { --c: var(--red); } [data-m="sketch"] { --c: var(--lime); } [data-m="pastel"] { --c: var(--pink); } [data-m="beads"] { --c: var(--coral); }

/* ------------------------------------------------------------ bits */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font: 700 15px var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: var(--pop); transition: transform .06s, box-shadow .06s, background .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, input:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn.primary { background: var(--coral); color: #fff; font: 400 18px var(--title); letter-spacing: .5px; text-shadow: 0 2px 0 var(--ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { background: var(--red); color: #fff; text-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: rgba(255, 255, 255, .85); }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: 14px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.btn.small:hover { box-shadow: 0 4px 0 var(--ink); }
.btn.small:active { box-shadow: 0 1px 0 var(--ink); }
.btn.tiny { min-height: 26px; padding: 0 9px; font-size: 13px; border-width: 2px; border-radius: 9px; box-shadow: 0 2px 0 var(--ink); }
.btn.icon { padding: 4px 9px; }
.btn.wide { width: 100%; }
.btn.big { width: 100%; min-height: 54px; font-size: 22px; border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
.btn.big:hover { box-shadow: 0 6px 0 var(--ink); }
.btn.big:active { box-shadow: 0 1px 0 var(--ink); transform: translateY(4px); }
.btn.on { background: var(--sun); }
.grow { flex: 1; }
.panel { background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink), 0 14px 34px rgba(20, 12, 36, .3); }
.card { background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 0 rgba(34, 22, 58, .25); }
.field { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink2); font-size: 15px; }
.field input, .join-row input, #chat-in, .copy-field { flex: 1; min-width: 0; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-size: 16px; color: var(--ink); outline: none; }
.field input:focus, .join-row input:focus, #chat-in:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 93, 143, .25); }
.field input::placeholder, .join-row input::placeholder, #chat-in::placeholder { color: var(--ink3); }
.copy-field { width: 100%; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.check input { width: 19px; height: 19px; accent-color: var(--coral); }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; padding: 0; box-shadow: 0 2px 0 var(--ink); transition: transform .12s; }
.swatch:hover { transform: scale(1.1); }
.swatch.on { outline: 3px solid var(--coral); outline-offset: 2px; transform: scale(1.1); }
.badge { display: inline-block; padding: 1px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--mint); color: var(--ink); font: 700 12px var(--font); font-style: normal; letter-spacing: 0; white-space: nowrap; }

/* ------------------------------------------------------------ the menu, over the hallway */
/* Like the 檀木金石 lobby: first the ways to draw (big buttons), then the few
   choices of the one picked, each on its own step. */
.screen { position: fixed; inset: 0; z-index: 2; }
.menu { pointer-events: none; }
.menu > * { pointer-events: auto; }
.menu > .home { position: absolute; left: calc(14px + var(--safe-l)); top: calc(12px + var(--safe-t)); z-index: 3; display: inline-flex; align-items: center; padding: 5px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 700 14px var(--font); text-decoration: none; box-shadow: 0 3px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.menu > .home:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.menu > .home:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.menu-panel { position: absolute; right: calc(18px + var(--safe-r)); top: 50%; translate: 0 -50%; max-height: calc(100% - 44px - var(--safe-t) - var(--safe-b)); width: 420px; display: flex; flex-direction: column; overflow: hidden; border-width: 4px; border-radius: 26px; box-shadow: 0 8px 0 var(--ink), 0 24px 60px rgba(20, 12, 36, .45); transition: transform .45s cubic-bezier(.2, .8, .2, 1); animation: rise .6s cubic-bezier(.2, 1.2, .3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.menu-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(34, 22, 58, .3) transparent; }
.menu-fold { display: none; }
.step-screen { display: flex; flex-direction: column; gap: 14px; animation: step-in .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } }

.logo { text-align: center; padding: 10px 0 2px; }
.logo h1 { margin: 0; font: 400 58px/1.05 var(--title); letter-spacing: 2px; transform: rotate(-3deg); animation: bob 3s ease-in-out infinite; }
.logo h1 span { display: inline-block; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.logo h1 span:nth-child(1) { color: var(--coral); }
.logo h1 span:nth-child(2) { color: var(--sun); animation: dab 2.6s ease-in-out infinite; }
.logo h1 span:nth-child(3) { color: var(--sea); animation: dab 2.6s ease-in-out .35s infinite; }
.logo h1 span:nth-child(4) { color: var(--mint); }
.logo h1 span:nth-child(5) { color: var(--grape); animation: wiggle 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(-2deg) translateY(-4px); } }
@keyframes dab { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px) rotate(-6deg); } 90% { transform: translateY(0) rotate(4deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(12deg); } }
.logo .sub { margin: 14px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ink2); text-wrap: balance; }

/* the ways to draw */
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon title go" "icon note go"; align-items: center; column-gap: 14px; row-gap: 2px; width: 100%; min-height: 78px; padding: 10px 14px 10px 10px; text-align: left; border: 3px solid var(--ink); border-radius: 20px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 5px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s; }
.choice:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); background: #fffaf0; }
.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.choice:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
.choice .icon { grid-area: icon; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; border: 3px solid var(--ink); background: var(--c, var(--sun)); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), inset 0 3px 0 rgba(255, 255, 255, .45); transform: rotate(-4deg); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.choice:hover .icon { transform: rotate(4deg) scale(1.06); }
.c-solo { --c: var(--sun); } .c-online { --c: var(--sea); } .c-hall { --c: var(--mint); } .c-mine { --c: var(--grape); }
.choice b { grid-area: title; display: flex; align-items: center; gap: 8px; font: 400 23px/1.2 var(--title); letter-spacing: 1px; }
.choice small { grid-area: note; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--ink2); }
.choice::after { content: '›'; grid-area: go; font: 400 34px/1 var(--title); color: var(--ink); opacity: .35; transition: opacity .15s, transform .15s; }
.choice:hover::after { opacity: 1; transform: translateX(3px); }
.name-field { margin-top: 2px; padding: 10px 12px; border: 3px dashed rgba(34, 22, 58, .25); border-radius: 16px; }
.name-field span { flex: none; }

/* a step's head: back on the left, its name in the middle */
.step { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.step .back { justify-self: start; }
.step h2 { margin: 0; font: 400 27px var(--title); letter-spacing: 1.5px; color: var(--sun); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }

/* the canvas to draw on */
.canvas-pick { display: flex; flex-direction: column; gap: 10px; }
.canvas-pick h3, .rooms-head > span { margin: 0; font: 400 18px var(--title); letter-spacing: .5px; color: var(--ink); }
.media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.medium { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s; }
.medium:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.medium:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.medium .em { display: grid; place-items: center; width: 64px; height: 60px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.medium-art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.bar .title .em:has(.medium-art) { width: 26px; height: 26px; }
.medium b { font: 700 14.5px var(--font); }
.medium small { display: none; }
.medium.on { background: var(--c, var(--sun)); transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.medium.on .em { transform: rotate(-5deg) scale(1.06); }
.blurb { margin: 0; min-height: 3em; padding: 8px 12px; border-radius: 12px; background: var(--cream); font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--ink2); }
.paper-row { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: var(--ink2); }

/* 快速配對: you, a few hopping dots, and whoever comes */
.c-quick { --c: var(--coral); }
.quick-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 16px; text-align: center; background: var(--cream); }
.quick-pair { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.quick-pair .me, .quick-pair .them { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; border: 3px solid var(--ink); font-size: 27px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), inset 0 3px 0 rgba(255, 255, 255, .45); }
.quick-pair .me { background: var(--sun); transform: rotate(-4deg); }
.quick-pair .them { background: #fff; border-style: dashed; transform: rotate(4deg); animation: quick-bob 1.6s ease-in-out infinite; }
.quick-pair .dots { display: flex; gap: 6px; }
.quick-pair .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); animation: quick-hop 1.2s ease-in-out infinite; }
.quick-pair .dots i:nth-child(2) { animation-delay: .15s; }
.quick-pair .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes quick-hop { 30% { transform: translateY(-7px); } 60% { transform: none; } }
@keyframes quick-bob { 50% { transform: rotate(-3deg) scale(1.06); } }
#quick-title { font: 400 22px var(--title); letter-spacing: 1px; color: var(--ink); }
#quick-note { min-height: 1.5em; font-size: 13.5px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.quick-hint { margin: 0 4px; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { .quick-pair .them, .quick-pair .dots i { animation: none; } }

/* online: the rooms drawing now, a code, a new room */
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; }
.join-row input::placeholder { letter-spacing: .05em; text-transform: none; }
.rooms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rooms-head small { font: 600 12px var(--font); letter-spacing: 0; color: var(--ink3); }
.rooms { display: flex; flex-direction: column; gap: 7px; max-height: min(340px, 42vh); overflow-y: auto; padding: 2px 2px 5px; }
.rooms .empty { margin: 6px 0; color: var(--ink2); font-size: 14px; font-weight: 600; }
.room-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); cursor: pointer; box-shadow: 0 3px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s; }
.room-item:hover { background: #fff3c4; transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.room-item:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.room-item .em { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; border: 2px solid var(--ink); background: var(--c, var(--sun)); font-size: 20px; }
.room-item .info { flex: 1; min-width: 0; }
.room-item .info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.room-item .info small { color: var(--ink2); font-weight: 600; }
.room-item .info b .player-avatar { --player-avatar-size: 1.4em; --player-avatar-gap: .35em; box-shadow: 0 0 0 1.5px var(--ink); }
.room-item .n { padding: 1px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--mint); font-weight: 700; font-size: 13px; }

/* ------------------------------------------------------------ the hallway */
.hall-ui { pointer-events: none; }
.hall-ui > * { pointer-events: auto; }
.hall-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l)); background: linear-gradient(rgba(20, 12, 36, .5), transparent); }
.hall-name { flex: 1; text-align: center; font: 400 26px var(--title); letter-spacing: 1.5px; color: var(--sun); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.hall-name b { font-weight: 400; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.hall-caption { position: fixed; z-index: 3; left: calc(26px + var(--safe-l)); bottom: calc(28px + var(--safe-b)); max-width: min(420px, calc(100vw - 500px)); min-width: 220px; padding: 12px 18px 12px 16px; border: 3px solid var(--ink); border-left: 10px solid var(--coral); border-radius: 16px; background: var(--cream); box-shadow: 0 5px 0 var(--ink); pointer-events: none; transform: rotate(-1deg); }
.hall-caption.in { animation: cap .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cap { from { opacity: 0; transform: translateY(10px) rotate(-3deg) scale(.95); } }
.hall-caption b { display: block; font: 400 22px/1.25 var(--title); letter-spacing: .5px; color: var(--ink); }
.hall-caption span { display: block; margin-top: 3px; font: 700 14.5px var(--font); color: var(--coral); }
.hall-caption small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
body[data-hall="walk"] .hall-caption, body[data-hall="tour"] .hall-caption { left: 50%; translate: -50% 0; max-width: min(460px, calc(100vw - 32px)); border-left-width: 3px; border-top: 8px solid var(--coral); text-align: center; transform: none; }
.hall-hint { position: fixed; z-index: 3; left: 50%; top: calc(70px + var(--safe-t)); translate: -50% 0; padding: 5px 16px; border-radius: 999px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); font-size: 13.5px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .6s; pointer-events: none; }
.hall-hint.on { opacity: 1; }
.plaque { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); translate: -50% 0; width: min(520px, calc(100% - 24px)); padding: 14px 18px 14px; text-align: center; container-type: inline-size; }
.plaque h3 { margin: 0 26px 4px; font: 400 25px/1.25 var(--title); letter-spacing: .5px; color: var(--ink); }
.plaque .artists { margin: 0 0 3px; font: 700 15.5px var(--font); color: var(--coral); }
.plaque .meta { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink2); line-height: 1.6; }
.plaque.empty h3 { color: var(--ink2); }
.plaque .close { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.plaque-actions, .plaque-nav, .plaque-tools { display: flex; gap: 6px; align-items: center; }
.plaque-actions, .plaque-tools { flex-wrap: wrap; }
.plaque-tools { margin-left: auto; justify-content: flex-end; }
.plaque.empty .plaque-tools { display: none; }
/* a phone held upright: ◀ ❤️ ▶ across the top, the plaque's buttons sharing the row under it */
@container (max-width: 440px) {
  .plaque-actions { flex-direction: column; align-items: stretch; }
  .plaque-nav { justify-content: space-between; }
  .plaque-nav #plaque-next { order: 1; }
  .plaque-tools { margin-left: 0; }
  .plaque-tools .btn { flex: 1 1 0; min-width: max-content; }
}
/* ❤️ 喜歡: the button for an account, the count alone for a guest */
.plaque .like { gap: 5px; padding-left: 11px; padding-right: 13px; }
.plaque .like b { font: 700 14px var(--font); }
.plaque .like.on { background: #ffe3ec; }
.plaque .like.pop .heart { animation: like-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes like-pop { 40% { transform: scale(1.45); } }
.plaque .like-count { padding: 0 4px; font: 700 14px var(--font); color: var(--coral); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .plaque .like.pop .heart { animation: none; } }
.joystick { position: absolute; left: calc(26px + var(--safe-l)); bottom: calc(26px + var(--safe-b)); width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, .35); border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(34, 22, 58, .5); touch-action: none; }
.joystick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
/* (on a phone the plaque takes the bottom of the screen: ✕ brings the stick back) */
@media (max-width: 900px) { body[data-hall="focus"] .joystick { display: none; } }

/* the hallway's top right: 走廊 / 牆面, and the canvas filter */
.view-switch { display: inline-flex; border: 3px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--ink); overflow: hidden; }
.view-switch .btn { min-height: 28px; padding: 3px 11px; gap: 5px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.view-switch .btn + .btn { border-left: 2.5px solid var(--ink); }
.view-switch .btn:hover, .view-switch .btn:active { transform: none; box-shadow: none; }
.view-switch .btn:hover { background: var(--cream2); }
.view-switch .btn.on { background: var(--sun); }
.view-switch svg, .filter-btn svg { width: 18px; height: 18px; flex: none; }
#view-grid svg rect { fill: currentColor; }
.filter-btn { padding-left: 7px; padding-right: 9px; gap: 5px; }
.filter-btn .fi { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.filter-btn .fi .medium-art { width: 28px; height: 28px; margin: -2px; }
.filter-btn.on { background: var(--c, var(--sun)); }
.filter-btn .caret { font-style: normal; font-size: 11px; opacity: .65; }
.filter-menu { position: absolute; z-index: 4; top: calc(60px + var(--safe-t)); right: calc(14px + var(--safe-r)); width: min(460px, calc(100vw - 24px)); padding: 12px; animation: drop .2s cubic-bezier(.2, 1.4, .4, 1); }
.fm-title { margin: 2px 4px 10px; font: 400 19px var(--title); letter-spacing: .5px; color: var(--ink); }
.fm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fm-list button { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 44px; padding: 3px 9px 3px 4px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 700 14.5px var(--font); text-align: left; cursor: pointer; box-shadow: 0 2px 0 var(--ink); transition: background .12s; }
.fm-list button:first-child { grid-column: 1 / -1; }
.fm-list button:hover { background: var(--cream2); }
.fm-list button[aria-checked="true"] { background: var(--c, var(--sun)); }
.fm-list button.none { opacity: .5; }
.fm-list button:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.fm-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.fm-icon svg { width: 20px; height: 20px; }
.fm-list b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-list i { flex: none; padding: 1px 8px; border-radius: 999px; background: rgba(34, 22, 58, .1); color: var(--ink2); font: 700 12.5px var(--font); font-style: normal; }
body[data-view="grid"] :is(.hall-caption, .hall-hint, #joystick, #plaque, #hall-tour),
body[data-view="fly"] :is(.hall-hint, #joystick) { display: none !important; }

/* ------------------------------------------------------------ 牆面: the paintings edge to edge (js/gallery/grid.js) */
.hall-grid { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: #4a161b; background-image: var(--damask, none); background-size: 256px 256px; }
/* the wall's light: warm from above, dark at the edges, a lamp following the mouse */
.hall-grid::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(18, 8, 6, .62), transparent 150px), radial-gradient(ellipse 85% 75% at 50% 40%, rgba(255, 190, 120, .1), transparent 55%, rgba(14, 6, 4, .62) 100%); }
.grid-lamp { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 480px at var(--lx, 50%) var(--ly, 28%), rgba(255, 200, 130, .2), transparent 70%); mix-blend-mode: screen; }
.grid-scroll { position: absolute; inset: 0; z-index: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; outline: none; scrollbar-width: thin; scrollbar-color: rgba(201, 164, 92, .7) transparent; transform-origin: 50% 40%; }
.grid-wall { position: relative; margin: 0 calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l)); }
@media (min-width: 600px) { .grid-wall { margin: 0 calc(28px + var(--safe-r)) 0 calc(28px + var(--safe-l)); } }
.hall-grid.arriving { animation: wall-in .45s ease-out; }
.hall-grid.arriving .grid-scroll { animation: wall-zoom .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes wall-in { from { opacity: 0; } }
@keyframes wall-zoom { from { transform: scale(1.07); } }
.hall-grid.out { opacity: 0; transition: opacity .3s ease-in; pointer-events: none; }
/* (into the hallway: the wall falls away round the painting flying to its place) */
.hall-grid.leaving { opacity: 0; transition: opacity .5s ease .1s; pointer-events: none; }
.hall-grid.leaving .grid-scroll { transform: scale(1.14); transition: transform .75s cubic-bezier(.4, 0, .2, 1); }

/* a painting: its frame (as it hangs in the hallway: frames.js), the spotlight's pool on the wall behind it */
.gt { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gt::before { content: ''; position: absolute; left: -24%; right: -24%; top: -30%; bottom: -14%; pointer-events: none; background: radial-gradient(ellipse 52% 58% at 50% 34%, rgba(255, 206, 140, .24), rgba(255, 190, 120, .07) 58%, transparent 76%); transition: opacity .4s; opacity: .75; }
.gt.hot { z-index: 5; }
.gt.hot::before { opacity: 1; }
.gt:focus-visible { outline: none; z-index: 5; }
.gt:focus-visible .gt-in { outline: 3px solid var(--sun); outline-offset: 5px; }
.gt-in { position: absolute; inset: 0; display: block; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; box-shadow: 0 12px 22px rgba(8, 3, 1, .6), 0 2px 5px rgba(8, 3, 1, .5); }
.gt.hot .gt-in { transition: transform .12s ease-out, box-shadow .3s; box-shadow: 0 24px 42px rgba(8, 3, 1, .66), 0 4px 8px rgba(8, 3, 1, .5); }
.gt-frame { position: absolute; inset: 0; display: block; background: #1d1d1f; }
.gt-pic { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #2e241e; }
.gt-pic img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; pointer-events: none; -webkit-user-drag: none; }
.gt-pic img.on { opacity: 1; }
/* the light raking across it, from wherever the mouse is */
.gt-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 242, 214, .62), rgba(255, 228, 190, .14) 34%, transparent 62%); mix-blend-mode: soft-light; }
.gt.hot .gt-glare { opacity: 1; }
.gt-cap { position: absolute; left: 50%; top: calc(100% + 6px); z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: max(100%, 220px); padding: 5px 12px 6px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--cream); box-shadow: 0 3px 0 var(--ink); text-align: center; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -6px) scale(.95); transition: opacity .18s, transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.gt-cap b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 400 15.5px/1.2 var(--title); letter-spacing: .3px; color: var(--ink); }
.gt-cap small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 700 11.5px var(--font); color: var(--coral); }
.gt.hot .gt-cap, .gt:focus-visible .gt-cap { opacity: 1; transform: translate(-50%, 0); }
/* coming on screen the first time: rising into place */
.gt.waiting, .grid-band.waiting { visibility: hidden; }
.gt.rise .gt-in { animation: rise .95s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) backwards; }
.grid-band.rise { animation: band-in .7s ease-out var(--d, 0ms) backwards; }
@keyframes rise { from { opacity: 0; transform: perspective(700px) translateY(90px) rotateX(-46deg) scale(.84); } }
@keyframes band-in { from { opacity: 0; transform: translateY(30px); } }
/* the frames */
.gt[data-frame="gold"] .gt-frame { background: linear-gradient(135deg, #f3d58a, #b8862f 28%, #f6dc95 50%, #9c6c22 74%, #e2b866); box-shadow: inset 0 0 0 2px #5e3e12, inset 0 0 0 4px #f8e2a4, inset 0 0 0 6px #8a5e1e; }
.gt[data-frame="gold"] .gt-pic { box-shadow: 0 0 0 2px #5a3a10, 0 0 0 4px #f1d48c; }
.gt[data-frame="oak"] .gt-frame { background: repeating-linear-gradient(90deg, rgba(110, 72, 34, .2) 0 2px, transparent 2px 7px), linear-gradient(160deg, #d2a46b, #a8773f); box-shadow: inset 0 0 0 2px #6e4a24; }
.gt[data-frame="walnut"] .gt-frame { background: repeating-linear-gradient(90deg, rgba(20, 10, 4, .25) 0 2px, transparent 2px 8px), linear-gradient(160deg, #6f4529, #3f2516); box-shadow: inset 0 0 0 2px #24140a, inset 0 2px 0 3px rgba(255, 220, 180, .12); }
.gt[data-frame="walnut"] .gt-pic { box-shadow: 0 0 0 2px #c9a45c; }
.gt[data-frame="black"] .gt-frame { background: linear-gradient(145deg, #3c3c41, #121214 55%, #26262a); }
.gt[data-frame="alu"] .gt-frame { background: linear-gradient(135deg, #eef1f4, #9ea4ab 42%, #f3f5f7 56%, #8d939a); }
.gt[data-frame="mat"] .gt-frame { background: #f6f3ea; box-shadow: inset 0 0 0 3px #2b2b2e, inset 0 0 0 5px #e8e3d6; }
.gt[data-frame="mat"] .gt-pic { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 3px #fbfaf6, 0 0 0 4px rgba(0, 0, 0, .12); }
.gt[data-frame="float"] .gt-frame { background: #141416; box-shadow: inset 0 0 0 2px #3a3a3e; }
.gt[data-frame="float"] .gt-pic { box-shadow: 0 4px 9px rgba(0, 0, 0, .7); }
.gt[data-frame="tray"] .gt-frame { background: linear-gradient(170deg, #93693f, #5e3f25); box-shadow: inset 0 0 0 2px #3a2414, inset 0 2px 0 3px rgba(255, 225, 180, .2); }
.gt[data-frame="tray"] .gt-pic::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 9px 14px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .4); background: linear-gradient(115deg, rgba(255, 255, 255, .2), transparent 36%, transparent 70%, rgba(255, 255, 255, .07)); }
.gt[data-frame="scroll"] .gt-frame { background: linear-gradient(#3a2416 0 5%, #cfc8b3 5% 92%, #3a2416 92%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.gt[data-frame="scroll"] .gt-frame::after { content: ''; position: absolute; left: -7px; right: -7px; bottom: 1.5%; height: 5.5%; border-radius: 3px; background: linear-gradient(90deg, #e8dcc0 0 9px, transparent 9px calc(100% - 9px), #e8dcc0 calc(100% - 9px)); }
.gt[data-frame="scroll"] .gt-pic { box-shadow: 0 0 0 2px #5c6b74; }
/* a band across the wall: round again from the newest, or the end */
.grid-band { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.grid-band.round::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, transparent, #c9a45c 14%, #f0d696 50%, #c9a45c 86%, transparent); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.grid-band.round span { position: relative; max-width: calc(100% - 24px); padding: 7px 18px; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); font: 700 14.5px var(--font); text-align: center; box-shadow: 0 4px 0 var(--ink); }
.gb-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 4 / 3; padding: 8%; background: radial-gradient(ellipse at 50% 40%, #6d1f2a, #3d0f16); box-shadow: inset 0 0 0 7px #c9a45c, inset 0 0 0 9px #7a5420, 0 12px 22px rgba(8, 3, 1, .6); text-align: center; }
.gb-frame b { font: 400 20px var(--title); letter-spacing: 1px; color: #efe6d2; }
.gb-frame small { font: 700 12.5px var(--font); color: #e9cd8a; }
.grid-status { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.grid-status.empty { left: 50%; right: auto; translate: -50% 0; width: min(420px, 100%); padding: 18px 20px; border: 3px solid var(--ink); border-radius: 20px; background: var(--cream); box-shadow: 0 6px 0 var(--ink); }
.grid-status.empty b { font: 400 22px var(--title); letter-spacing: .5px; color: var(--ink); }
.grid-status.empty span { font: 700 14px var(--font); color: var(--ink2); }
.dots { display: flex; gap: 9px; padding: 20px; }
.dots b { width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--sun); animation: dot 1s ease-in-out infinite; }
.dots b:nth-child(2) { background: var(--coral); animation-delay: .15s; }
.dots b:nth-child(3) { background: var(--sea); animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-10px); } }
/* a painting flying between the wall and the hallway */
.grid-fly { position: fixed; z-index: 10; margin: 0; object-fit: cover; transform-origin: 0 0; pointer-events: none; box-shadow: 0 26px 50px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: reduce) {
  .hall-grid.arriving, .hall-grid.arriving .grid-scroll, .gt.rise .gt-in, .grid-band.rise { animation: none; }
  .gt-in, .gt.hot .gt-in { transform: none; transition: box-shadow .3s; }
}

/* ------------------------------------------------------------ the studio */
/* Kept small so the canvas fills the window: two bars in the top corners,
   the tools down the left and the colours down the right (on a narrow
   screen, a tray along the bottom holds both). The tools and colours are
   pictures (js/studio/art.js) lying in a tray of the medium's own kind. */
#studio { pointer-events: none; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); --swatch-size: 34px; }
#studio > *, #studio .bar { pointer-events: auto; }
#studio .bars, #studio .dock, #studio .cursors, #studio .brush-ring, #studio .hint, #studio .phase-note, #studio .chat-bubbles { pointer-events: none; }
#studio .dock > * { pointer-events: auto; }
.bars { position: absolute; left: calc(6px + var(--safe-l)); right: calc(6px + var(--safe-r)); top: calc(6px + var(--safe-t)); z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.bar { display: flex; align-items: center; gap: 5px; padding: 4px; border-radius: 999px; background: var(--cream); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
#bar-left { min-width: 0; flex: 0 1 auto; padding-right: 5px; }
#bar-right { flex: none; }
.btn.round { width: 34px; height: 34px; min-height: 0; padding: 0; border-width: 2.5px; border-radius: 50%; flex: none; box-shadow: 0 2px 0 var(--ink); }
.btn.round:hover { box-shadow: 0 3px 0 var(--ink); }
.btn.round:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#more svg circle { fill: currentColor; stroke: none; }
#more.new-canvas-hint { position: relative; background: var(--sun); }
#more.new-canvas-hint::after { content: ''; position: absolute; inset: -4px; border: 3px solid var(--coral); border-radius: 50%; pointer-events: none; opacity: .65; animation: new-canvas-pulse 1.8s ease-out infinite; }
@keyframes new-canvas-pulse { 0% { transform: scale(1); opacity: .8; } 75%, 100% { transform: scale(1.4); opacity: 0; } }
#camera.on { background: var(--sun); }
#camera { min-height: 34px; padding: 4px 7px; font-size: 13px; border-width: 2px; }
#toggle-tools-menu { display: none; }
#studio.tools-hidden #bar-left, #studio.tools-hidden #bar-right > :not(#toggle-tools) { display: none; }
#studio.tools-hidden .bars { justify-content: flex-end; }
.bar .title { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 0 2px 0 3px; }
.bar .title .em { font-size: 17px; flex: none; }
.bar .title b { max-width: 160px; font: 700 15px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 28px; padding: 0 8px 0 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--sun); color: var(--ink); cursor: pointer; font: inherit; box-shadow: 0 2px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.code-chip b { font: 400 15px var(--title); letter-spacing: .15em; }
.code-chip svg { width: 14px; height: 14px; }
.code-chip:hover { filter: brightness(1.05); }
.code-chip:active { transform: translateY(2px); box-shadow: none; }
#finish { min-height: 34px; padding: 3px 12px; border-width: 2.5px; background: var(--mint); color: var(--ink); font: 400 16px var(--title); text-shadow: none; box-shadow: 0 2px 0 var(--ink); }
#finish:active { transform: translateY(2px); box-shadow: none; }
.people { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.people:hover, .people.on { background: var(--sun); }
/* the chat, left of 🤖: shut until opened, pulsing while there's something unread */
#chat-btn { position: relative; }
#chat-btn.on, #chat-btn.unread { background: var(--sun); }
#chat-btn.unread::after { content: ''; position: absolute; inset: -4px; border: 3px solid var(--coral); border-radius: 50%; pointer-events: none; opacity: .65; animation: new-canvas-pulse 1.8s ease-out infinite; }
#chat-btn .badge { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--coral); color: #fff; font: 700 11.5px/16px var(--font); text-align: center; }
#ai-btn:disabled, #ideas:disabled { opacity: .45; cursor: default; }
.dots { display: flex; }
.dots i { width: 25px; height: 25px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font: 700 11.5px var(--font); font-style: normal; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.dots i:first-child { margin-left: 0; }
.dots i.more { background: var(--cream2); color: var(--ink); text-shadow: none; font-size: 10.5px; }

/* what drops down from the right-hand bar: the menu, the people and the chat */
.pop { position: absolute; z-index: 6; top: calc(56px + var(--safe-t)); right: calc(8px + var(--safe-r)); animation: drop .2s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.menu-pop { display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 200px; max-height: calc(100% - 64px - var(--safe-t) - var(--safe-b)); overflow-y: auto; }
.menu-pop button { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 700 14.5px var(--font); text-align: left; cursor: pointer; white-space: nowrap; }
.menu-pop button:hover { background: var(--sun); }
.menu-pop button i { width: 22px; font-style: normal; text-align: center; }
.menu-pop button.on { background: var(--cream2); }
.chat { display: flex; flex-direction: column; width: min(320px, calc(100vw - 16px)); max-height: min(440px, calc(100% - 80px - var(--dock-h, 0px))); padding: 0; overflow: hidden; }
.people-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 10px 9px; border-bottom: 3px solid var(--ink); background: var(--cream2); }
.person { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
/* the account's avatar left of the name (common/player-avatar.js), ringed in the person's ink where the dot was */
.person .player-avatar { --player-avatar-size: 22px; --player-avatar-gap: 0; border: 2.5px solid var(--person-ink, var(--ink)); box-shadow: 0 0 0 1.5px var(--ink); font-size: 12px; }
.person.host::after { content: '👑'; font-size: 11px; }
.person.signed::before { content: '✍️'; font-size: 11px; order: 3; }
.person.kick { cursor: pointer; }
.person.kick:hover { background: #ffe0e6; }
.chat-log { flex: 1; min-height: 110px; overflow-y: auto; padding: 8px 12px 6px; font-size: 14px; line-height: 1.5; background: #fff; }
/* (chat can be selected with a mouse; on a touch screen a long press selects nothing) */
html:not(.mobile-gestures) .chat-log { user-select: text; -webkit-user-select: text; }
/* the shared corner icons ask only for no double-tap delay: no pinch on them either */
html.mobile-gestures .game-settings :is(button, a) { touch-action: pan-x pan-y; }
.chat-log .sys { color: var(--ink3); font-size: 12.5px; font-weight: 600; }
.chat-log b { margin-right: 5px; }
.chat-log .player-avatar, .chat-bubble .player-avatar { --player-avatar-size: 1.5em; --player-avatar-gap: .35em; box-shadow: 0 0 0 1.5px var(--ink); }
#chat-form { display: flex; gap: 6px; padding: 8px; border-top: 3px solid var(--ink); }
#chat-in { padding: 5px 12px; font-size: 14px; }
.chat-bubbles { position: absolute; right: calc(10px + var(--rail-r, 0px) + var(--safe-r)); top: calc(56px + var(--safe-t)); z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(300px, 70vw); }
.chat-bubble { padding: 5px 12px; border-radius: 16px 4px 16px 16px; background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 14px; line-height: 1.45; color: var(--ink); animation: pop .3s cubic-bezier(.2, 1.5, .4, 1); transition: opacity .6s; }
.chat-bubble b { margin-right: 5px; }
.chat-bubble.out { opacity: 0; }

/* the dock: the tools and the colours */
.dock { display: contents; }
.toolbox, .colors { position: absolute; z-index: 3; top: var(--tools-top, calc(56px + var(--safe-t))); padding: 4px; border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.toolbox { left: calc(6px + var(--safe-l)); width: 86px; max-height: calc(100% - var(--tools-top, 56px) - 10px - var(--safe-b)); display: flex; flex-direction: column; gap: 6px; }
.colors { right: calc(6px + var(--safe-r)); max-height: calc(100% - var(--tools-top, 56px) - 10px - var(--safe-b)); }
.dock.off .toolbox, .dock.off .colors { opacity: .45; pointer-events: none; filter: saturate(.5); }
.tray { border-radius: 12px; background: var(--tray); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(34, 22, 58, .55); }
body { --tray: linear-gradient(90deg, #d8c9ad, #efe4cc); }
body[data-medium="sand"] { --tray: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 60%), linear-gradient(90deg, #d9c193, #ecdcb6); }
body[data-medium="chalk"] { --tray: linear-gradient(90deg, #8b9397, #b2babd 70%, #9aa2a6); }
body[data-medium="marker"] { --tray: linear-gradient(90deg, #c9cdd0, #eef0f1); }
body[data-medium="oil"] { --tray: repeating-linear-gradient(97deg, transparent 0 9px, rgba(90, 50, 20, .1) 9px 10px), linear-gradient(90deg, #b88550, #d6a872); }
body[data-medium="acrylic"] { --tray: linear-gradient(90deg, #dedbd3, #f6f4ef); }
body[data-medium="watercolor"] { --tray: linear-gradient(90deg, #e2ded4, #f7f5f0); }
body[data-medium="ink"] { --tray: repeating-linear-gradient(90deg, #d6c28c 0 7px, #c4ad74 7px 8px); }
body[data-medium="sketch"] { --tray: repeating-linear-gradient(92deg, transparent 0 13px, rgba(110, 70, 30, .08) 13px 14px), linear-gradient(90deg, #cba97c, #e3c89f); }
body[data-medium="beads"] { --tray: linear-gradient(90deg, #e9eef3, #fbfcfd); }
body[data-medium="pastel"] { --tray: linear-gradient(90deg, #cfc7b8, #e8e2d6); }

/* the tools lie in the tray pointing at the canvas; the one in your hand slides out */
.tool-list { display: flex; flex-direction: column; flex-shrink: 0; gap: 1px; padding: 4px 0; clip-path: inset(0 -20px 0 0 round 12px); }
.tool { position: relative; display: block; width: 100%; height: 34px; flex: none; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tool svg { position: absolute; left: -38px; top: 0; width: 113px; height: 34px; filter: drop-shadow(0 1.5px 1.2px rgba(0, 0, 0, .45)); transition: translate .22s cubic-bezier(.3, 1.4, .5, 1); }
.tool:hover svg { translate: 5px 0; }
.tool.on svg { translate: 10px 0; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.tool.on::before { content: ''; position: absolute; inset: 2px 0; border-radius: 8px; background: rgba(255, 210, 63, .45); box-shadow: inset 0 0 0 2px rgba(34, 22, 58, .6); }
.tool:focus-visible { outline: 3px solid var(--sea); outline-offset: -3px; border-radius: 8px; }

/* Short horizontal sliders keep every tool reachable on landscape phones. */
.sliders { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: none; padding: 2px 0 4px; }
.slider { position: relative; width: 100%; height: 28px; flex: none; cursor: pointer; touch-action: none; outline: none; --f: .5; }
.slider .track { position: absolute; inset: 7px 3px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--ink); }
.slider.size .track { inset: 3px; border-radius: 0; box-shadow: none; clip-path: polygon(0 50%, 100% 0, 100% 100%); background: linear-gradient(90deg, rgba(75, 59, 104, .3), var(--ink2)); }
.slider .knob { position: absolute; left: calc(var(--f) * (100% - 24px) + 12px); top: 50%; width: 24px; height: 24px; translate: -50% -50%; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); display: grid; place-items: center; }
.slider.size .knob b { width: calc(4px + var(--f) * 12px); height: calc(4px + var(--f) * 12px); border-radius: 50%; background: var(--paint, var(--ink)); box-shadow: 0 0 0 1.5px rgba(34, 22, 58, .35); }
.slider.amount .knob { background: transparent; border-color: #fff; box-shadow: 0 0 0 2px var(--ink), 0 2px 0 1px var(--ink); }
.slider output { position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%; z-index: 2; padding: 2px 10px; border-radius: 999px; background: var(--ink); border: 2px solid #fff; color: var(--sun); font: 700 13px var(--font); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.slider.active output { opacity: 1; }
.slider:focus-visible .knob { outline: 3px solid var(--sea); outline-offset: 2px; }

/* the colours, as their medium sells them */
.palette { display: grid; grid-template-rows: repeat(var(--rows, 8), var(--swatch-size)); grid-auto-flow: column; grid-auto-columns: var(--swatch-size); gap: 2px; padding: 5px; }
.swatch-btn { position: relative; width: var(--swatch-size); height: var(--swatch-size); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); }
.swatch-btn svg { width: 100%; height: 100%; filter: drop-shadow(0 1.5px 1.2px rgba(0, 0, 0, .4)); pointer-events: none; }
.swatch-btn:hover { transform: scale(1.1); }
.swatch-btn.on { transform: scale(1.16); z-index: 1; }
.swatch-btn.on::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink), 0 2px 0 2px var(--ink); }
.swatch-btn::after { content: attr(data-name); position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%; padding: 2px 10px; border-radius: 999px; background: var(--ink); border: 2px solid #fff; color: #fff; font: 700 13px var(--font); white-space: nowrap; opacity: 0; pointer-events: none; }
.swatch-btn.on.named::after { animation: named 2.2s ease-out forwards; }
@keyframes named { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
.swatch-btn.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.swatch-btn:focus-visible { outline: 3px solid var(--sea); outline-offset: 1px; }

/* everyone else: a ring where their brush is, their name where a stroke ends */
.cursors { position: absolute; inset: 0; overflow: hidden; z-index: 2; }
.cursor { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity .3s; }
.cursor .ring { position: absolute; border-radius: 50%; border: 2.5px solid currentColor; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); transform: translate(-50%, -50%); }
.stroke-tag { position: absolute; left: 0; top: 0; will-change: transform, opacity; transition: opacity .5s; }
.stroke-tag span { position: absolute; left: 4px; bottom: 4px; padding: 1px 9px 2px; border-radius: 10px 10px 10px 2px; background: currentColor; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 700 13px var(--font); white-space: nowrap; animation: tag .3s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 0 100%; }
.stroke-tag span b { color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.stroke-tag::before { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--ink); }
@keyframes tag { from { opacity: 0; transform: scale(.5); } }
.brush-ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); z-index: 3; will-change: transform; }

.hint { position: absolute; left: 50%; bottom: calc(14px + var(--dock-h, 0px) + var(--safe-b) + var(--trace-h, 0px)); translate: -50% 0; padding: 5px 16px; border-radius: 999px; background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); font-size: 13.5px; font-weight: 600; z-index: 2; white-space: nowrap; max-width: calc(100vw - 24px); text-align: center; transition: opacity .6s; }
.hint:empty { display: none; }
.progress { position: absolute; left: 50%; top: 45%; translate: -50% -50%; padding: 16px 22px; border-radius: 18px; background: var(--cream); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); text-align: center; z-index: 5; color: var(--ink2); font-weight: 700; }
.progress .bar { width: 220px; height: 14px; margin-bottom: 10px; padding: 0; border-radius: 999px; overflow: hidden; background: #fff; border: 2.5px solid var(--ink); box-shadow: none; }
.progress .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--coral) 0 8px, #ff7aa3 8px 16px); transition: width .2s; }
.phase-note { position: absolute; left: 50%; top: calc(58px + var(--safe-t)); translate: -50% 0; z-index: 3; padding: 5px 18px; border-radius: 999px; background: var(--sun); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }

/* signing: a pad of paper, then placing the signature on the painting */
.sign { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(560px, calc(100% - 20px)); padding: 16px 18px 14px; z-index: 6; display: flex; flex-direction: column; gap: 10px; }
.sign h3 { margin: 0; font: 400 24px var(--title); letter-spacing: 1px; color: var(--ink); }
.sign .sub { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink2); line-height: 1.5; }
.pad-wrap { position: relative; height: 190px; border-radius: 14px; overflow: hidden; background: #fbf6ea; border: 3px solid var(--ink); box-shadow: inset 0 2px 10px rgba(90, 60, 30, .15); touch-action: none; }
#sign-pad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.pad-line { position: absolute; left: 8%; right: 8%; bottom: 28%; border-bottom: 2px dashed rgba(34, 22, 58, .25); pointer-events: none; }
.pad-hint { position: absolute; left: 50%; top: 42%; translate: -50% -50%; font: 700 22px var(--font); letter-spacing: .3em; color: rgba(34, 22, 58, .2); pointer-events: none; }
.sign-colors .swatch { width: 26px; height: 26px; }
.sign-buttons { display: flex; gap: 8px; align-items: center; }
.sign-host { display: flex; gap: 6px; justify-content: flex-end; }
.sign-who { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.sign-who span { padding: 1px 9px; border-radius: 999px; border: 2px solid rgba(34, 22, 58, .3); background: #fff; }
.sign-who span.done { color: var(--ink); border-color: var(--ink); background: var(--mint); }
.place { position: absolute; left: 50%; bottom: calc(14px + var(--dock-h, 0px) + var(--safe-b)); translate: -50% 0; z-index: 6; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 10px 16px; width: max-content; max-width: calc(100% - 16px); }
.place-tip { font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.place-size { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.place-size input { width: 130px; accent-color: var(--coral); }
.place-buttons { display: flex; gap: 8px; }

/* the review: the painting, its name, and whether it goes to the gallery */
.review-pic { display: block; width: 100%; max-height: 42vh; object-fit: contain; border-radius: 4px; background: #fff; border: 8px solid #fff; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px var(--ink); margin: 6px 0 18px; }
.crop-window { position: relative; width: min(100%, 56vh); margin: 12px auto; border: 6px solid white; border-radius: 4px; box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink); background: #d8c39d; }
#crop-view { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
#crop-view:active { cursor: grabbing; }
#crop-view:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; }
.crop-guides { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 33%, #fff5 33%, #fff5 calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, #fff5 66%, #fff5 calc(66% + 1px), transparent calc(66% + 1px)), linear-gradient(to bottom, transparent 33%, #fff5 33%, #fff5 calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, #fff5 66%, #fff5 calc(66% + 1px), transparent calc(66% + 1px)); }
.crop-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 18px 0; }
.crop-controls input { flex: 1 1 70px; min-width: 50px; width: 70px; accent-color: var(--ink); }
.crop-controls output { width: 3.5em; font-size: 13px; text-align: center; }
.crop-controls .btn { min-height: 36px; padding: 4px 9px; }
.review-artists { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--coral); }

/* ------------------------------------------------------------ modal, loading, toasts */
.modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(34, 22, 58, .5); padding: 16px; }
.modal-box { width: min(500px, 100%); max-height: 90vh; overflow-y: auto; padding: 18px 20px; animation: pop .3s cubic-bezier(.2, 1.4, .4, 1); }
.modal-box h2 { margin: 0 0 12px; font: 400 26px var(--title); letter-spacing: 1px; color: var(--ink); }
.modal-box p { color: var(--ink2); line-height: 1.6; font-size: 14.5px; font-weight: 600; }
.modal-box label { color: var(--ink2); }
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.modal .media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loading { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 42%, #4a3580 0%, var(--night) 62%, #170f2b 100%); color: #fff; font-size: 16px; font-weight: 700; text-shadow: 0 2px 0 var(--ink); }
.spin { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--ink); background: conic-gradient(var(--coral) 0 25%, var(--sun) 0 50%, var(--mint) 0 75%, var(--sea) 0); box-shadow: 0 5px 0 var(--ink); animation: spin 1.1s linear infinite; }
.spin::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--night); border: 3px solid var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.toasts { position: fixed; left: 50%; top: calc(74px + var(--safe-t)); translate: -50% 0; z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 7px 16px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: 0 4px 0 var(--ink); color: var(--ink); font-size: 14.5px; font-weight: 700; pointer-events: auto; animation: pop .3s cubic-bezier(.2, 1.5, .4, 1); display: flex; align-items: center; gap: 10px; }
.toast.bad { background: var(--coral); color: #fff; text-shadow: 0 1px 0 var(--ink); }
.toast .btn { pointer-events: auto; text-shadow: none; }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.94); } }

/* ------------------------------------------------------------ small screens */
@media (max-width: 760px) {
  /* the menu is a sheet at the bottom; the hallway shows above it */
  .menu-panel { left: calc(6px + var(--safe-l)); right: calc(6px + var(--safe-r)); top: auto; bottom: 0; translate: none; width: auto; max-height: 76vh; max-height: 76dvh; border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -6px 0 rgba(34, 22, 58, .35), 0 -20px 50px rgba(20, 12, 36, .45); }
  .menu-panel.folded { transform: translateY(calc(100% - 150px - var(--safe-b))); }
  .menu-fold { display: block; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 96px; height: 24px; border: 0; background: transparent; cursor: pointer; z-index: 1; }
  .menu-fold i { display: block; width: 46px; height: 6px; margin: 7px auto 0; border-radius: 3px; background: rgba(34, 22, 58, .3); }
  .menu-scroll { padding: 20px 14px calc(18px + var(--safe-b)); }
  .step-screen { gap: 12px; }
  .logo { padding: 0; }
  .logo h1 { font-size: 44px; }
  .logo .sub { display: none; }
  .choice { min-height: 66px; padding: 7px 12px 7px 8px; border-radius: 18px; }
  .choice .icon { width: 46px; height: 46px; font-size: 24px; border-radius: 14px; }
  .choice b { font-size: 20px; }
  .choice small { font-size: 12.5px; }
  .hall-caption { left: calc(12px + var(--safe-l)); right: auto; top: calc(58px + var(--safe-t)); bottom: auto; min-width: 0; max-width: calc(100vw - 24px); padding: 8px 14px; }
  .hall-caption b { font-size: 18px; }
  body[data-hall="walk"] .hall-caption, body[data-hall="tour"] .hall-caption { top: auto; bottom: calc(150px + var(--safe-b)); }
  .hall-name { font-size: 20px; letter-spacing: .5px; }
  /* the hallway's top bar: room for the view switch and the filter */
  .hall-top { gap: 6px; }
  .hall-top .hall-name { visibility: hidden; min-width: 0; }
  .hall-top .top-actions { gap: 6px; }
  .view-switch b { display: none; }
  .view-switch .btn { padding: 3px 9px; }
  .filter-menu { left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); width: auto; }
  .pad-wrap { height: 160px; }
  .hint { white-space: normal; width: max-content; }
}
@media (max-width: 560px) {
  .hall-top .btn.small { padding-left: 9px; padding-right: 9px; }
  #hall-back .lbl, .filter-btn b { display: none; }
}
@media (max-width: 420px) {
  #hall-tour .lbl { display: none; }
}

/* ------------------------------------------------------------ the studio on a narrow screen: a tray along the bottom */
body[data-layout="tray"] .dock { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 5px calc(6px + var(--safe-r)) calc(5px + var(--safe-b)) calc(6px + var(--safe-l)); background: var(--cream); border-top: 3px solid var(--ink); border-radius: 16px 16px 0 0; box-shadow: 0 -3px 0 rgba(34, 22, 58, .25); }
body[data-layout="tray"] .toolbox, body[data-layout="tray"] .colors { position: static; width: auto; max-height: none; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
body[data-layout="tray"] .toolbox { flex-direction: row; align-items: stretch; justify-content: center; gap: 8px; }
body[data-layout="tray"] .tool-list { flex-direction: row; flex: 0 1 auto; min-width: 0; height: 48px; padding: 0 6px; gap: 2px; clip-path: inset(-18px 0 0 0 round 12px); }
body[data-layout="tray"] .tool { width: 36px; height: 100%; flex: 0 1 36px; min-width: 30px; }
body[data-layout="tray"] .tool svg { left: 50%; top: 48px; margin: -17px 0 0 -56.5px; rotate: -90deg; }
body[data-layout="tray"] .tool:hover svg { translate: 0 -4px; }
body[data-layout="tray"] .tool.on svg { translate: 0 -8px; }
body[data-layout="tray"] .tool.on::before { inset: 0 1px; }
body[data-layout="tray"] .sliders { flex: 1 1 112px; min-width: 80px; max-width: 200px; gap: 4px; padding: 0 4px 0 0; }
body[data-layout="tray"] .slider { width: auto; height: 24px; }
body[data-layout="tray"] .slider .track { inset: 7px 3px; }
body[data-layout="tray"] .slider.size .track { inset: 1px 3px; clip-path: polygon(0 50%, 100% 0, 100% 100%); background: linear-gradient(90deg, rgba(75, 59, 104, .3), var(--ink2)); }
body[data-layout="tray"] .slider .knob { left: calc(var(--f) * (100% - 24px) + 12px); top: 50%; width: 24px; height: 24px; }
body[data-layout="tray"] .slider output { left: calc(var(--f) * (100% - 24px) + 12px); top: auto; bottom: calc(100% + 8px); translate: -50% 0; }
body[data-layout="tray"] .palette { grid-template-rows: var(--swatch-size); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--ink3) transparent; padding: 6px; touch-action: pan-x; overscroll-behavior-x: contain; }
body[data-layout="tray"] .swatch-btn::after { display: none; }
@media (max-width: 700px) {
  #studio .bar { gap: 4px; padding: 3px; }
  #studio .bar .title b { display: none; }
  #studio #finish { width: 34px; padding: 3px; }
  #studio #finish span, #studio .dots, #studio .code-chip svg, #toggle-tools { display: none; }
  #studio .people { display: none; } /* (the chat lists who's in the room) */
  #studio .code-chip { padding: 0 5px; }
  #studio #camera { font-size: 12px; gap: 4px; padding: 4px 6px; }
  #toggle-tools-menu, #studio.tools-hidden #toggle-tools { display: flex; }
}
@media (max-width: 380px) {
  #studio .bar .title, #studio .code-chip { display: none; }
}
@media (pointer: coarse) {
  #studio { --swatch-size: 40px; }
  .tool { height: 40px; }
  .tool svg { top: 3px; }
  body[data-layout="tray"] .tool { width: 40px; flex-basis: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool svg, .swatch-btn { transition: none; }
  #more.new-canvas-hint::after, #chat-btn.unread::after { animation: none; }
}

/* 描圖底圖: a picture to trace, its panel over the dock (compact once locked) */
.trace { position: absolute; left: 50%; bottom: calc(14px + var(--dock-h, 0px) + var(--safe-b)); translate: -50% 0; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px; width: max-content; max-width: calc(100% - 16px); }
.trace-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.trace-tip { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.trace-sliders { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.trace-slider { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.trace-slider input { width: 128px; accent-color: var(--coral); }
.trace-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.trace.locked { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding: 6px 10px; }
.trace.locked .trace-tip, .trace.locked .trace-size, .trace.locked .trace-adjust, .trace.locked #trace-remove { display: none; }
.trace.locked .trace-head b { font-size: 13px; }
.trace.locked .trace-slider input { width: 96px; }
/* locked: folded into the top bar's picture icon, dropped down under it */
.trace.dropped { bottom: auto; z-index: 8; }
#trace-icon.dim svg { opacity: .45; }
/* placed for AI 作畫: moved and sized, then 🤖 開始畫 (or 取消) */
.trace:not(.ai) .trace-for-ai, .trace.ai #trace-lock, .trace.ai #trace-show, .trace.ai #trace-remove, .trace.ai #trace-ai { display: none; }
/* while it can move: a handle on each corner to size it */
#studio .trace-frame { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
#studio .trace-frame i { position: absolute; width: 18px; height: 18px; margin: -9px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 0 2px 0 var(--ink); pointer-events: auto; touch-action: none; }
#studio .trace-frame i::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
#studio .trace-frame i:hover, #studio .trace-frame i.on { background: var(--sun); }
.trace-frame [data-corner="0"] { left: 0; top: 0; cursor: nwse-resize; }
.trace-frame [data-corner="1"] { left: 100%; top: 0; cursor: nesw-resize; }
.trace-frame [data-corner="2"] { left: 100%; top: 100%; cursor: nwse-resize; }
.trace-frame [data-corner="3"] { left: 0; top: 100%; cursor: nesw-resize; }

/* AI 作畫: how far it has got, and a stop, under the bar */
.ai-status { position: absolute; left: 50%; top: calc(64px + var(--safe-t)); translate: -50% 0; z-index: 7; display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; font-size: 14px; font-weight: 700; color: var(--ink); max-width: calc(100% - 16px); }
/* and its dialog's choice of style (a sample of each) and of detail */
.modal-box:has(.ai-pick) { width: min(560px, 100%); }
.modal-box .ai-label { margin: 14px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.modal-box .ai-note { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.ai-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ai-style { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 2.5px solid var(--ink); border-radius: 13px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); cursor: pointer; font: 700 14px var(--font); transition: transform .15s, box-shadow .15s; }
.ai-style img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cream2); border-bottom: 2px solid var(--ink); }
.ai-style span { padding: 6px 4px 7px; text-align: center; }
.ai-style:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.ai-style.on { background: var(--sun); box-shadow: 0 0 0 3px var(--coral), 0 3px 0 var(--ink); }
.ai-style:focus-visible, .ai-detail button:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.ai-detail { display: flex; gap: 0; border: 2.5px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
.ai-detail button { flex: 1; min-height: 40px; padding: 6px 8px; border: 0; border-left: 2px solid var(--ink); background: #fff; color: var(--ink); font: 700 14px var(--font); cursor: pointer; }
.ai-detail button:first-child { border-left: 0; }
.ai-detail button.on { background: var(--sun); }
@media (prefers-reduced-motion: reduce) { .ai-style { transition: none; } }
/* (a phone held sideways: the samples cut lower, so the buttons stay near) */
@media (max-height: 460px) {
  .ai-style img { aspect-ratio: auto; height: 62px; }
  .modal-box .ai-label { margin-top: 8px; }
}

/* 拼豆圖紙: the pattern's options and its preview */
.pattern-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-weight: 700; color: var(--ink2); }
.pattern-opts label { display: flex; align-items: center; gap: 8px; }
.pattern-opts select { padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); font-weight: 700; }
.pattern-opts .check input { width: 18px; height: 18px; accent-color: var(--coral); }
.pattern-preview { max-height: min(52vh, 520px); overflow: auto; border: 2px solid var(--ink); border-radius: 12px; background: #fff; -webkit-overflow-scrolling: touch; }
.pattern-preview img { display: block; max-width: none; min-width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.modal-box:has(.pattern) { width: min(880px, 100%); }
/* a phone held sideways: the trace panel on as few rows as it can */
@media (max-height: 460px) {
  .trace { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 5px 10px; }
  .trace-head .trace-tip { display: none; }
  .trace-head b { font-size: 13px; }
  .trace-slider { font-size: 12px; gap: 6px; }
  .trace-slider input, .trace.locked .trace-slider input { width: 84px; }
  .trace-buttons { gap: 6px; }
}

/* 我的畫作: the menu's panel widens for a grid of the paintings */
@media (min-width: 761px) { .menu-panel:has(.step-screen[data-screen="mine"]:not([hidden])) { width: min(680px, calc(100% - 36px - var(--safe-l) - var(--safe-r))); } }
.mine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mine-item { display: flex; flex-direction: column; gap: 3px; padding: 8px; text-align: left; border: 3px solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .08s, box-shadow .08s; min-width: 0; }
.mine-item:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.mine-item:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.mine-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--cream2); }
.mine-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.mine-item b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.mine-item small { font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-status { align-self: flex-start; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 2px solid var(--ink); background: var(--cream); }
.mine-status.s-shown { background: var(--mint); } .mine-status.s-pending { background: var(--sun); } .mine-status.s-rejected { background: #ffc9cf; }
.mine-empty { text-align: center; color: var(--ink2); font-weight: 600; line-height: 1.6; padding: 18px 8px; }
#mine-more { display: block; margin: 14px auto 0; }
.modal-box:has(.mine-view) { width: min(760px, 100%); }
.mine-view { border-radius: 6px; background: #fff; border: 8px solid #fff; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px var(--ink); margin: 4px 0 16px; }
.mine-pic { display: block; width: 100%; max-height: 60vh; max-height: 60dvh; object-fit: contain; -webkit-user-drag: none; }
.mine-meta { display: flex; gap: 12px; align-items: center; }
.mine-meta .em { flex: none; width: 52px; height: 52px; }
.mine-meta .em img { width: 100%; height: 100%; }
@media (max-width: 560px) { .mine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }