*{box-sizing:border-box}
:root{
  --ink:#222;
  --muted:#6e6e6e;
  --page-max:790px;
  --stage-w:736px;
  --stage-h:619px;
  --font:"Noto Sans TC","Noto Sans CJK TC","Source Han Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
html,body{margin:0;min-height:100%;background:#fff;color:var(--ink);font-family:var(--font)}
body{overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.page{width:min(100%,var(--page-max));margin:0 auto;padding:14px 10px 24px}
.top{width:min(100%,736px);margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;overflow:visible}
.title-mark{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.title-image{display:block;width:100%;max-width:500px;height:auto;object-fit:contain}
.fund{position:relative;width:min(30%,188px);flex:0 0 188px;min-width:105px}
.fund>img{width:100%;height:auto}
.fund b{position:absolute;left:27%;right:12%;top:45%;height:25%;display:grid;place-items:center;font-size:clamp(18px,4.2vw,28px);line-height:1;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}


.announcement-bar{width:min(100%,430px);min-height:36px;margin:0 0 8px auto;padding:7px 10px;display:flex;align-items:center;gap:9px;border:1.5px dashed rgba(34,34,34,.32);font-size:14px;line-height:1.45;background:#fff;overflow:hidden}
.announcement-label{flex:0 0 auto;font-weight:700;font-size:13px;letter-spacing:.08em}
.announcement-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444;animation:announcement-in 220ms ease-out both}
@keyframes announcement-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.admin-announcement{width:min(100%,540px);margin:0 0 8px auto;padding:8px 10px;border:2px dashed rgba(34,34,34,.28);font-size:13px}
.admin-announcement>label{display:block;margin-bottom:6px;color:#555}
.admin-announcement-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.admin-announcement input{min-width:180px;flex:1 1 240px;border:1.5px solid #333;background:#fff;padding:7px 9px;outline:none;font-size:14px}
.admin-announcement button{flex:0 0 auto;border:1.5px solid #333;background:#fff;padding:7px 12px;cursor:pointer;font-size:14px}
.admin-announcement .announcement-delete{opacity:.72}
.admin-announcement .announcement-delete:disabled{opacity:.3;cursor:not-allowed}

.lobby-view{width:min(100%,736px);margin:8px auto 0;padding:4px 0 16px}
.room-select-shell{position:relative;width:min(100%,691px);height:410px;margin:0 auto;overflow:visible}
.room-select-board{position:absolute;left:0;top:0;width:691px;height:410px;transform-origin:top left}
.room-select-board>img{position:absolute;left:0;top:0;width:691px;height:410px;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:0}
.public-room-hit{z-index:1;position:absolute;left:17px;top:12px;width:321px;height:377px;border:0;background:transparent;cursor:pointer;border-radius:22px;transition:transform .16s ease,filter .16s ease}
.public-room-hit:hover{transform:translateY(-2px);filter:contrast(1.08)}
.public-room-hit:active{transform:translateY(1px) scale(.985)}
.private-code-input{z-index:50;position:absolute;left:401px;top:198px;width:224px;height:42px;box-sizing:border-box;pointer-events:auto;cursor:text;user-select:text;-webkit-user-select:text;caret-color:#111;touch-action:manipulation;border:0;outline:0;background:transparent;padding:0 8px;text-align:center;text-transform:uppercase;font-size:28px;line-height:42px;font-weight:600;letter-spacing:.08em;appearance:none;-webkit-appearance:none;border-radius:0;box-shadow:none}
.private-code-input::placeholder{color:#8a8a8a;opacity:.7;letter-spacing:.02em}
.private-join-hit{z-index:2;position:absolute;left:395px;top:298px;width:240px;height:58px;border:0;background:transparent;cursor:pointer;font-size:20px;line-height:58px;font-weight:600;padding:0}
.private-join-hit:hover{text-decoration:underline;text-underline-offset:4px}
.private-join-hit:active{transform:scale(.97)}
.lobby-note{margin:7px auto 0;max-width:620px;text-align:center;font-size:14px;line-height:1.6;color:var(--muted)}

.chat-view{width:100%}
.room-toolbar{width:min(100%,736px);min-height:58px;margin:0 auto 8px;display:grid;grid-template-columns:minmax(0,1fr) auto 54px;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-bottom:2px solid rgba(34,34,34,.14)}
.room-info{display:flex;align-items:baseline;gap:9px;min-width:0}
.room-info strong{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-code{border:0;background:transparent;padding:3px 0;cursor:pointer;font-size:14px;color:#555;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.online-wrap{position:relative;justify-self:end}
.online-count{border:0;background:transparent;padding:6px 4px;cursor:pointer;font-size:15px;white-space:nowrap;color:#444}
.online-count:hover{text-decoration:underline;text-underline-offset:3px}
.online-panel{position:absolute;right:0;top:calc(100% + 5px);z-index:80;width:190px;max-height:230px;overflow:auto;background:#fff;border:2px solid #222;padding:10px 12px;box-shadow:4px 5px 0 rgba(0,0,0,.08)}
.online-panel>strong{display:block;font-size:14px;margin-bottom:6px}
.online-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.online-panel li{font-size:14px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-panel .you{font-size:11px;opacity:.58;margin-left:4px}
.online-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#222;vertical-align:1px}
.leave-room{justify-self:end;width:50px;height:50px;border:0;background:transparent;padding:0;cursor:pointer;overflow:hidden}
.leave-room img{width:100%;height:100%;object-fit:contain}
.leave-room:active{transform:scale(.94)}

.stage-shell{position:relative;width:min(100%,736px);height:619px;margin:0 auto;overflow:visible}
.stage-canvas{position:absolute;left:0;top:0;width:736px;height:619px;overflow:hidden;isolation:isolate;transform-origin:top left}
.chat-viewport{position:absolute;left:24px;top:24px;width:650px;height:466px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;z-index:1}
.chat-viewport::-webkit-scrollbar{display:none}
.messages{display:flex;flex-direction:column;gap:10px;width:100%;min-height:100%;padding:12px 6px 16px 2px}
.message-row{display:flex;align-items:center;gap:20px;width:100%;min-width:0;flex:0 0 217px;padding-left:36px}
.message-enter .bubble{animation:bubble-enter 260ms cubic-bezier(.2,.8,.25,1) both;transform-origin:22% 64%}
.message-enter .plus-wrap{animation:plus-enter 210ms cubic-bezier(.2,.8,.25,1) 70ms both}
@keyframes bubble-enter{0%{opacity:0;transform:translateY(10px) scale(.975)}70%{opacity:1;transform:translateY(-2px) scale(1.005)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes plus-enter{0%{opacity:0;transform:translateY(5px) scale(.88)}100%{opacity:1;transform:translateY(0) scale(1)}}
.bubble{position:relative;width:440px;height:217px;flex:0 0 440px;min-width:0;padding:40px 52px 28px 82px;background:url("./assets/message-bubble.png") center/440px 217px no-repeat;overflow:hidden}
.meta{display:flex;align-items:baseline;gap:12px;width:100%;min-width:0;margin-bottom:10px}
.name{display:block;min-width:0;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:21px;line-height:1.2;font-weight:500}
.time{display:block;flex:0 0 auto;font-size:16px;line-height:1.2;opacity:.62;white-space:nowrap;font-variant-numeric:tabular-nums}
.text{margin:0;max-width:100%;font-size:28px;line-height:1.35;font-weight:400;overflow-wrap:anywhere;word-break:break-word;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.plus-wrap{width:58px;height:70px;display:flex;align-items:center;justify-content:center;flex:0 0 58px;overflow:visible}
.plus{width:58px;height:auto;max-width:none}
.system-message{flex:0 0 auto;width:100%;padding:3px 36px;text-align:center;font-size:16px;line-height:1.45;color:#666;animation:system-enter 180ms ease-out both}
.system-message span{display:inline-block;padding:3px 10px;background:rgba(255,255,255,.86)}
@keyframes system-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.empty-state{width:100%;margin:0;padding:160px 40px 0;text-align:center;font-size:22px;line-height:1.5;opacity:.56}

.fish-area{position:absolute;left:24px;top:24px;width:650px;height:466px;overflow:hidden;z-index:5;pointer-events:none}
.fish{position:absolute;left:0;top:0;width:330px;height:auto;max-width:none;opacity:0;pointer-events:none;will-change:transform,opacity}
.frame{position:absolute;left:0;top:0;width:736px;height:619px;max-width:none;pointer-events:none;z-index:10}
.composer{position:absolute;inset:0;z-index:20;pointer-events:none}
.composer input,.send{position:absolute;pointer-events:auto;border:0;outline:0;background:transparent;color:var(--ink);border-radius:0;box-shadow:none}
.name-input{left:38px;top:518px;width:146px;height:64px;padding:0 12px;font-size:24px;line-height:64px}
.message-input{left:220px;top:518px;width:360px;height:64px;padding:0 15px;font-size:24px;line-height:64px}
.name-input::placeholder,.message-input::placeholder{font-size:23px;color:#777;opacity:1}
.send{left:602px;top:505px;width:116px;height:91px;padding:0;cursor:pointer}
.send:active{transform:scale(.96)}
.send:disabled{cursor:wait;opacity:.45}
.actions{width:min(100%,736px);margin:0 auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:44px;padding-top:7px}
.small-action{font-size:16px;margin-right:auto}
.rename{border:0;background:transparent;padding:0;cursor:pointer}
.rename img{width:128px;height:auto}
.rename:active{transform:scale(.97)}
.status{width:min(100%,736px);min-height:1.3em;margin:2px auto 0;text-align:right;font-size:14px;opacity:.58}

dialog{border:0;padding:0;background:transparent;max-width:none;font-family:var(--font)}
dialog::backdrop{background:rgba(255,255,255,.84);backdrop-filter:blur(2px)}
.dialog-card{width:min(86vw,360px);padding:22px;background:#fff;border:3px solid var(--ink);box-shadow:5px 6px 0 rgba(0,0,0,.08);transform:rotate(-.2deg)}
.dialog-card p{margin:0 0 14px;font-size:24px;font-weight:600}
.dialog-card label{display:block;margin:10px 0 5px;font-size:15px;color:#555}
.dialog-card input{width:100%;border:2px solid var(--ink);border-radius:0;padding:10px 12px;margin-bottom:4px;background:#fff;outline:none;font-size:20px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.dialog-card button{border:2px solid var(--ink);background:#fff;padding:8px 14px;cursor:pointer;font-size:18px}
.dialog-cancel{opacity:.62}
.join-room-code{font-size:16px;margin-bottom:8px}
.join-room-code strong{font-size:20px;letter-spacing:.08em}

@media(max-width:560px){
  .page{padding:8px 7px 16px}
  .top{margin-bottom:5px;gap:5px}
  .fund{min-width:88px;flex-basis:28%;width:28%}
  .title-image{max-width:100%}
  .room-toolbar{grid-template-columns:minmax(0,1fr) auto 43px;min-height:48px;padding-left:7px}
  .room-info strong{font-size:16px}
  .room-code{font-size:12px}
  .online-count{font-size:12px}
  .online-panel{width:165px;right:-4px}
  .announcement-bar{width:100%;font-size:12px;padding:5px 7px}
  .admin-announcement{width:100%;padding:7px}
  .admin-announcement-row{align-items:stretch}
  .admin-announcement input{flex-basis:100%;min-width:0}
  .admin-announcement button{flex:1 1 auto}
  .leave-room{width:40px;height:40px}
  .lobby-note{font-size:12px;padding:0 10px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* V22 -------------------------------------------------------------------- */
.announcement-bar,
.admin-panel,
.room-toolbar,
.music-strip {
  width: min(736px, calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.admin-panel {
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  padding: 10px 0;
  margin-bottom: 10px;
  font-family: "Noto Sans TC", sans-serif;
}
.admin-login-box,
.admin-announcement-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-panel input {
  min-width: 180px;
  flex: 1 1 220px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #111;
  background: #fff;
  font: inherit;
}
.admin-panel button,
.music-card button {
  border: 1px solid #111;
  background: #fff;
  color: #111;
  min-height: 36px;
  padding: 0 12px;
  font: 600 14px/1 "Noto Sans TC", sans-serif;
  cursor: pointer;
}
.admin-panel button:hover,
.music-card button:hover { background: #f0f0f0; }

.music-strip {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) 54px;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.music-icon-btn {
  width: 54px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  filter: grayscale(1);
}
.music-icon-btn:active { transform: translateY(1px) scale(.98); }
.sound-toggle { font-size: 24px; }
.now-playing-window {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  min-height: 36px;
  display: flex;
  align-items: center;
  position: relative;
}
.now-playing-text {
  display: inline-block;
  min-width: 100%;
  padding-left: 100%;
  font: 600 15px/1.4 "Noto Sans TC", sans-serif;
  animation: songMarquee 14s linear infinite;
}
@keyframes songMarquee { from { transform: translateX(0); } to { transform: translateX(-200%); } }

.actions {
  width: min(736px, calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shake-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 78px;
  height: 72px;
  padding: 0;
  cursor: pointer;
}
.shake-btn img { width: 100%; height: 100%; object-fit: contain; display: block; filter: contrast(1.08); }
.shake-btn[disabled] { opacity: .35; cursor: not-allowed; }
.stage-shell.is-shaking { animation: msnShake 1.15s linear; }
@keyframes msnShake {
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-9px,2px)}
  20%{transform:translate(8px,-2px)}
  30%{transform:translate(-7px,-1px)}
  40%{transform:translate(9px,2px)}
  50%{transform:translate(-8px,1px)}
  60%{transform:translate(7px,-2px)}
  70%{transform:translate(-6px,2px)}
  80%{transform:translate(5px,-1px)}
  90%{transform:translate(-3px,1px)}
}

.music-dialog {
  width: min(92vw, 850px);
  max-height: 82vh;
  border: 0;
  padding: 0;
  background: transparent;
}
.music-dialog::backdrop { background: rgba(0,0,0,.28); }
.music-card {
  border: 2px solid #111;
  background: #fff;
  padding: 18px 22px 16px;
  font-family: "Noto Sans TC", sans-serif;
}
.music-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #111;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.music-card-head strong { font-size: 26px; }
.music-card-head button { min-width: 42px; font-size: 22px; }
.song-queue {
  list-style: decimal;
  margin: 0 0 24px 28px;
  padding: 0;
  max-height: 48vh;
  overflow: auto;
}
.song-queue li {
  border-bottom: 1px solid #111;
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
}
.song-main { min-width: 0; }
.song-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.song-meta { display:block; font-size:12px; margin-top:4px; opacity:.7; }
.song-playing .song-title::before { content:"▶ "; }
.song-delete { white-space:nowrap; }
.song-empty { list-style:none; margin-left:-28px; padding:18px 0!important; border-bottom:0!important; display:block!important; }
.song-form { display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:12px; }
.song-form input { height:48px; border:1px solid #111; padding:0 12px; font:500 15px/1 "Noto Sans TC",sans-serif; }
.song-form button { height:48px; font-size:20px; }
.music-volume-row { margin-top:14px; display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:center; font-size:13px; }
.music-volume-row label { white-space:nowrap; }
.music-volume-row input[type="range"] { width:100%; accent-color:#111; }
.music-status { min-height:18px; margin:8px 0 0; font-size:12px; font-weight:700; }
.music-note { font-size:12px; margin:6px 0 0; opacity:.65; }
.youtube-player { position:fixed; width:2px; height:2px; right:0; bottom:0; opacity:.001; pointer-events:none; overflow:hidden; }

.blocked-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.97);
  padding: 24px;
}
.blocked-card {
  width: min(520px,100%);
  border: 2px solid #111;
  padding: 28px;
  text-align: center;
  font-family: "Noto Sans TC", sans-serif;
}
.blocked-card strong { display:block; font-size:22px; margin-bottom:10px; }

@media (max-width: 600px) {
  .music-strip { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .music-icon-btn { width:44px; font-size:26px; }
  .song-form { grid-template-columns:1fr; }
  .song-form button { width:100%; }
  .music-card { padding:14px; }
  .music-card-head strong { font-size:22px; }
  .admin-login-box,.admin-announcement-row { align-items:stretch; }
  .admin-panel input,.admin-panel button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .now-playing-text { animation:none; padding-left:0; }
  .stage-shell.is-shaking { animation:none; }
}