html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe0e6; }
#view { display: block; width: 100vw; height: 100vh; touch-action: none; cursor: grab; }
#note {
  position: fixed; left: 14px; bottom: 12px; padding: 6px 12px; border-radius: 999px;
  font: 600 13px/1.2 system-ui, sans-serif; color: #3b2a3c; background: rgba(255, 250, 240, 0.8);
  pointer-events: none;
}

/* the duel: a few quiet marks, nothing that shouts */
#duel { position: fixed; inset: 0; pointer-events: none; font: 500 14px/1.3 Georgia, 'Times New Roman', serif; color: #fbf6ea; text-shadow: 0 1px 3px rgba(40, 30, 40, 0.7); }
#duel .top { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 90px; }
#duel .man { width: 190px; display: flex; align-items: center; gap: 10px; }
#duel .man b { flex: 1; height: 3px; background: linear-gradient(#fbf6ea, #fbf6ea) left / 100% 100% no-repeat; background-color: transparent; box-shadow: 0 0 0 1px rgba(251, 246, 234, 0.25); display: block; max-width: 150px; transition: width 0.15s; }
#duel .man.r { flex-direction: row; justify-content: flex-end; }
#duel .man i { font-style: normal; letter-spacing: 3px; font-size: 11px; opacity: 0.9; }
#duel .angle { position: absolute; left: 50%; bottom: 96px; width: 0; height: 0; }
#duel .angle u { position: absolute; display: block; background: #fbf6ea; opacity: 0.35; border-radius: 2px; transition: opacity 0.08s; box-shadow: 0 0 0 1.5px rgba(40, 30, 40, 0.55); }
#duel .angle u.on { opacity: 0.95; }
#duel .angle u[data-a="top"] { width: 34px; height: 3px; left: -17px; top: -30px; }
#duel .angle u[data-a="left"] { width: 3px; height: 34px; left: -30px; top: -17px; }
#duel .angle u[data-a="right"] { width: 3px; height: 34px; left: 27px; top: -17px; }
#duel .say { position: absolute; left: 0; right: 0; bottom: 150px; text-align: center; font-size: 17px; letter-spacing: 0.12em; opacity: 0; transition: opacity 0.5s; }
#duel .help { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; padding: 7px 14px; border-radius: 999px; background: rgba(40, 30, 40, 0.55); white-space: nowrap; font: 500 12px system-ui, sans-serif; text-shadow: none; opacity: 0.95; transition: opacity 2s; }
#duel .help.fade { opacity: 0; }
#duel.watch .angle, #duel.watch .help, #duel.watch .top { display: none; }

/* painting: the paper on the right, the island still in view on the left */
#painter { position: fixed; top: 0; right: 0; bottom: 0; width: min(54vw, 132vh); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px; box-sizing: border-box; background: linear-gradient(90deg, rgba(40, 30, 40, 0), rgba(40, 30, 40, 0.5) 12%); font: 500 13px system-ui, sans-serif; color: #fbf6ea; }
#painter[hidden] { display: none; }
#painter .sheet { background: #6e4536; padding: 10px; border-radius: 4px; box-shadow: 0 10px 30px rgba(30, 20, 30, 0.45); }
#painter canvas { display: block; width: 100%; aspect-ratio: 4 / 3; cursor: crosshair; touch-action: none; }
#painter .tools { display: flex; flex-direction: column; gap: 9px; }
#painter .inks { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; }
#painter .inks button { aspect-ratio: 1; border: 2px solid rgba(251, 246, 234, 0.35); border-radius: 50%; padding: 0; cursor: pointer; }
#painter .row { display: flex; align-items: center; gap: 8px; }
#painter .row .grow { flex: 1; }
#painter .brushes button, #painter .papers button { width: 38px; height: 38px; border-radius: 8px; border: 2px solid rgba(251, 246, 234, 0.35); background: rgba(251, 246, 234, 0.12); display: grid; place-items: center; cursor: pointer; padding: 0; }
#painter .brushes i { display: block; border-radius: 50%; background: #fbf6ea; }
#painter button.on { border-color: #fbf6ea; box-shadow: 0 0 0 2px rgba(251, 246, 234, 0.5); }
#painter .row > button[data-do] { padding: 9px 14px; border-radius: 8px; border: 0; background: rgba(251, 246, 234, 0.16); color: inherit; font: inherit; cursor: pointer; }
#painter .row > button.main { background: #fbf6ea; color: #3b2a3c; font-weight: 700; }
#painter .hint { margin: 0; opacity: 0.8; }

/* walking about: a prompt, a line of talk, your purse */
#play { position: fixed; inset: 0; pointer-events: none; font: 500 14px/1.35 system-ui, sans-serif; color: #fbf6ea; text-shadow: 0 1px 3px rgba(40, 30, 40, 0.75); }
#play.quiet > * { display: none !important; }
#play .purse { position: absolute; left: 18px; top: 14px; font-size: 13px; opacity: 0.92; }
#play .prompt { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(40, 30, 40, 0.6); text-shadow: none; white-space: nowrap; transition: opacity 0.2s; }
#play .say { position: absolute; left: 0; right: 0; bottom: 124px; text-align: center; font: 500 16px Georgia, serif; letter-spacing: 0.02em; opacity: 0; transition: opacity 0.6s; }
#play .keys { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(40, 30, 40, 0.5); font-size: 12px; text-shadow: none; white-space: nowrap; transition: opacity 2s; }
#play .keys.fade { opacity: 0; }
#play .card { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); width: 420px; padding: 14px 18px 16px; border-radius: 10px; background: #fbf6ea; color: #3b2a3c; text-shadow: none; box-shadow: 0 12px 34px rgba(30, 20, 30, 0.35); }
#play .card[hidden] { display: none; }
#play .card canvas { display: block; width: 100%; }
#play .card h3 { margin: 2px 0 4px; font: 700 20px Georgia, serif; }
#play .card p { margin: 0; font-size: 13px; opacity: 0.85; }

/* the island with other people on it: names, talk, panels */
#play.duelling > :not(.log):not(.labels):not(.chat) { display: none; }
#play .log { position: absolute; left: 18px; bottom: 60px; width: min(440px, 40vw); display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
#play .log div { transition: opacity 3s; } #play .log div.old { opacity: 0.35; } #play .log div.news { font-style: italic; opacity: 0.9; }
#play .labels { position: absolute; inset: 0; overflow: hidden; }
#play .tag { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; font-size: 12.5px; will-change: transform; }
#play .tag b { display: block; font-weight: 600; }
#play .tag span:not(:empty) { display: inline-block; max-width: 260px; white-space: normal; margin-top: 3px; padding: 5px 10px; border-radius: 10px; background: rgba(251, 246, 234, 0.94); color: #3b2a3c; text-shadow: none; font-size: 13px; }
#play .chat { position: absolute; left: 18px; bottom: 18px; width: min(440px, 40vw); padding: 9px 12px; border-radius: 8px; border: 0; background: rgba(251, 246, 234, 0.95); color: #3b2a3c; font: inherit; pointer-events: auto; outline: none; }
#play .chat[hidden] { display: none; }
#play .ask { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); padding: 10px 18px; border-radius: 8px; background: rgba(40, 30, 40, 0.75); text-shadow: none; white-space: nowrap; }
#play .ask[hidden] { display: none; }
#panel { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); width: min(430px, 44vw); max-height: 86vh; overflow: auto; padding: 18px 20px; border-radius: 12px; background: rgba(251, 246, 234, 0.96); color: #3b2a3c; font: 500 13px system-ui, sans-serif; box-shadow: 0 14px 40px rgba(30, 20, 30, 0.35); }
#panel h2 { margin: 0 0 12px; font: 700 20px Georgia, serif; }
#panel .row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } #panel .row label { width: 92px; padding-top: 8px; flex: none; opacity: 0.75; }
#panel .opts { display: flex; flex-wrap: wrap; gap: 6px; }
#panel .chip { min-width: 34px; min-height: 34px; padding: 6px 10px; border-radius: 8px; border: 2px solid rgba(59, 42, 60, 0.18); background: #fff; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; text-transform: capitalize; }
#panel .chip.sw { width: 38px; padding: 0; } #panel .chip.on { border-color: #3b2a3c; box-shadow: 0 0 0 2px rgba(59, 42, 60, 0.25); }
#panel .chip small { font-size: 10px; opacity: 0.8; background: rgba(251, 246, 234, 0.85); border-radius: 4px; padding: 0 3px; margin-top: 2px; text-transform: none; }
#panel .note { margin: 8px 0 0; opacity: 0.7; font-size: 12px; }
#welcome { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(40, 30, 40, 0.45); z-index: 5; font: 500 15px system-ui, sans-serif; color: #3b2a3c; }
#welcome > div { width: min(380px, 86vw); padding: 26px 28px; border-radius: 14px; background: #fbf6ea; text-align: center; }
#welcome h1 { margin: 0 0 6px; font: 700 34px Georgia, serif; } #welcome p { margin: 0 0 16px; opacity: 0.8; }
#welcome input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 8px; border: 2px solid rgba(59, 42, 60, 0.2); font: inherit; margin-bottom: 10px; text-align: center; }
#welcome button { width: 100%; padding: 11px; border: 0; border-radius: 8px; background: #3b2a3c; color: #fbf6ea; font: 600 15px system-ui, sans-serif; cursor: pointer; }

#play .gear { position: absolute; right: 16px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(40, 30, 40, 0.5); color: #fbf6ea; font-size: 18px; cursor: pointer; pointer-events: auto; }

/* the sushi counter: the 3D board fills the screen; words sit round its edges */
#sushi { position: fixed; inset: 0; z-index: 4; pointer-events: none; font: 500 14px system-ui, sans-serif; color: #fbf6ea; text-shadow: 0 1px 3px rgba(20, 10, 20, 0.8); cursor: none; }
#sushi[hidden] { display: none; }
#sushi .head { position: absolute; left: 0; right: 0; top: 18px; text-align: center; padding: 0 12vw; }
#sushi h2 { margin: 0 0 6px; font: 700 26px Georgia, serif; text-transform: capitalize; } #sushi .step { margin: 0; font-size: 16px; }
#sushi .side { position: absolute; left: 18px; bottom: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(40, 30, 40, 0.6); text-shadow: none; }
#sushi table { border-collapse: collapse; } #sushi td { padding: 3px 9px; text-align: center; } #sushi td:first-child { text-align: left; } #sushi td:last-child { font-weight: 700; } #sushi tr.me td { color: #ffd9a8; }
#sushi .foot { margin: 6px 0 0; opacity: 0.7; font-size: 12px; }

/* loading, and the menu */
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #bfe0e6; z-index: 9; font: 500 15px system-ui, sans-serif; color: #3b2a3c; text-align: center; }
#loading h1 { margin: 0 0 6px; font: 700 40px Georgia, serif; } #loading p { margin: 0; opacity: 0.75; max-width: 80vw; }
#menu { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(40, 30, 40, 0.4); z-index: 4; font: 500 14px system-ui, sans-serif; color: #3b2a3c; }
#menu[hidden] { display: none; }
#menu .box { width: min(900px, 94vw); height: min(640px, 90vh); display: flex; flex-direction: column; padding: 16px 20px; box-sizing: border-box; border-radius: 14px; background: #fbf6ea; box-shadow: 0 14px 40px rgba(30, 20, 30, 0.35); }
#menu .tabs { display: flex; gap: 6px; margin-bottom: 12px; } #menu .tabs button, #menu .set button, #menu .name button { padding: 8px 14px; border-radius: 8px; border: 2px solid rgba(59, 42, 60, 0.15); background: #fff; color: inherit; font: inherit; cursor: pointer; text-transform: capitalize; }
#menu button.on { border-color: #3b2a3c; background: #3b2a3c; color: #fbf6ea; }
#menu .body { flex: 1; overflow: auto; } #menu .lead { margin: 0 0 12px; opacity: 0.8; } #menu .foot { margin: 8px 0 0; opacity: 0.55; font-size: 12px; }
#menu .fish { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
#menu .card { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid rgba(59, 42, 60, 0.1); font-size: 12.5px; }
#menu .card img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; } #menu .card b { font: 700 15px Georgia, serif; } #menu .card i { opacity: 0.7; } #menu .card .top { opacity: 0.6; }
#menu .card.none img { filter: brightness(0) opacity(0.25); } #menu .card.none b { opacity: 0.5; }
#menu .rows .r { display: flex; align-items: center; gap: 14px; padding: 6px 4px; border-top: 1px solid rgba(59, 42, 60, 0.1); } #menu .rows img { width: 72px; } #menu .rows b { flex: 1; }
#menu .name { display: flex; gap: 8px; margin-top: 16px; } #menu .name input { flex: 1; max-width: 240px; padding: 8px 10px; border-radius: 8px; border: 2px solid rgba(59, 42, 60, 0.2); font: inherit; }
#menu .keys td { padding: 6px 10px; border-top: 1px solid rgba(59, 42, 60, 0.1); vertical-align: top; } #menu .keys td:first-child { font-weight: 700; white-space: nowrap; }
#menu .set { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } #menu .set label { width: 80px; opacity: 0.75; } #menu .set div { display: flex; gap: 6px; flex-wrap: wrap; }

/* sushi: the judging, and the end */
#sushi .reveal { position: absolute; right: 9vw; top: 50%; transform: translateY(-50%); width: 250px; }
#sushi .reveal[hidden], #sushi .rank[hidden] { display: none; }
#sushi .parts div { display: flex; justify-content: space-between; font-size: 19px; padding: 5px 0; border-bottom: 1px solid rgba(251, 246, 234, 0.3); opacity: 0; transform: translateX(14px); transition: opacity 0.35s, transform 0.35s; text-transform: capitalize; }
#sushi .parts div.on { opacity: 1; transform: none; } #sushi .parts b { font: 700 21px Georgia, serif; }
#sushi .total { font: 700 84px/1.1 Georgia, serif; text-align: right; min-height: 92px; }
#sushi .stamp { display: inline-block; float: right; padding: 8px 14px; border: 3px solid #e0523f; color: #e0523f; border-radius: 6px; font: 700 20px Georgia, serif; letter-spacing: 0.06em; text-shadow: none; background: rgba(251, 246, 234, 0.92); opacity: 0; transform: rotate(-7deg) scale(2.4); }
#sushi .stamp.on { opacity: 1; transform: rotate(-7deg) scale(1); transition: transform 0.16s cubic-bezier(0.3, 1.6, 0.6, 1), opacity 0.08s; }
#sushi .rank { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(420px, 80vw); }
#sushi .rank div { display: flex; gap: 14px; align-items: baseline; font-size: 22px; padding: 8px 4px; border-bottom: 1px solid rgba(251, 246, 234, 0.3); opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s; }
#sushi .rank div.on, #sushi .rank p.on { opacity: 1; transform: none; } #sushi .rank i { font-style: normal; opacity: 0.7; width: 22px; } #sushi .rank span { flex: 1; } #sushi .rank b { font: 700 26px Georgia, serif; } #sushi .rank div.me { color: #ffd9a8; }
#sushi .rank div:nth-last-of-type(1) { font-size: 30px; } #sushi .rank p { margin: 16px 0 0; text-align: center; font: italic 18px Georgia, serif; opacity: 0; transition: opacity 1s 0.5s; }

#play .tug { position: absolute; left: 50%; top: 58%; width: 0; height: 0; outline: 4px solid rgba(224, 82, 63, 0); outline-offset: 70px; border-radius: 50%; }
#play .tug i { position: absolute; left: 0; top: -3px; width: 90px; height: 6px; border-radius: 3px; transform-origin: 0 50%; }
#play .tug i.fish { background: #9a96a0; } #play .tug i.fish::after, #play .tug i.you::after { content: ''; position: absolute; right: -4px; top: -5px; border: 8px solid transparent; border-left-color: inherit; border-left: 12px solid #9a96a0; }
#play .tug i.you { background: #e9e2d4; } #play .tug i.you::after { border-left-color: #b6e35a; }