:root { --green: #743b29; --line: #d8cbb7; color: #302b23; background: #f2eee6; }
body { background: #f2eee6; }
html, body { touch-action:pan-x pan-y; }
.home-poster { height: 325px; }
.poster-content { padding-top: 24px; }
.poster-content h1 { color: #fff1c4; text-shadow: 0 2px 3px #241a11, 1px 0 #241a11; font-size: 34px; }
.poster-content p { color: #fff6dc; text-shadow: 0 1px 3px #291c16; }
.search-dock { position: sticky; top: 0; z-index: 14; padding: 10px 12px; margin-top: -76px; border: 0; border-radius: 19px; background: transparent; backdrop-filter: none; }
.search-dock #search-form { margin: 0 auto; width: min(420px,100%); max-width: 420px; height: 50px; padding-inline: 10px; gap: 8px; background: rgb(255 251 240 / 30%); border: 0; border-radius: 39px; box-shadow: 0 2px 10px #38271918; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.search-dock #search-form button { width:40px; height:44px; padding:0; }
.search-dock #search-form .asset-icon { width:24px; height:24px; }
.search-dock #search-form input { height:44px; padding:0; background:transparent; color:#382b23; }
.search-dock #search-form input::placeholder { color:#584b40; opacity:1; }
.search-dock #search { font-size:16px; }
.home-poster[hidden] + .search-dock { margin-top:0; }
.site-layout { max-width: 1240px; }
main { position:relative; z-index:1; padding-top: 16px; border-radius:25px 25px 0 0; background:#f2eee6; }
.platforms { gap: 12px; padding: 4px 0 12px; border-radius:17px; border-bottom: 1px solid var(--line); }
.platforms button { gap: 4px; padding: 6px 2px; }
.platforms img { height: 48px; width: 76px; }
.platforms span { font-size: 12px; }
.catalog-tools { margin-top: 12px; gap: 10px; }
.collection-tabs { flex: 1; width:100%; min-width:0; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.collection-tabs :is(button,a),.collection-tabs #random-game { width:100%; height:auto; margin:0; min-width:0; min-height:70px; padding:6px 4px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:5px; border:1px solid #d1bea4; border-radius:6px; background:#e7dac6; color:#302b23; }
.collection-tabs :is(button,a).is-active { color: #fff8df; border-color: #4e3a2d; background: #514338; }
.collection-tabs :is(img,svg) { width:30px; height:30px; flex-shrink:0; object-fit:contain; }
.catalog-actions:not(:has(button:not([hidden]))) { display:none; }
#random-game:disabled { cursor:wait; opacity:.6; }
.collection-tabs span { font-size: 13px; }
.game-grid { gap: 14px 20px; }
.game-info { background: #eee2cc; color: #302b23; border-color: #d4bea2; }
.game-name { color: #302b23; }
.game-info .game-name { color:#302b23; }
.game-meta, #result-count { color: #756859; }
.cartridge-display .game-cover { object-fit: fill; }
.cartridge-wrap { position:relative; width:100%; }
.game-card .cartridge-title { position:absolute; z-index:4; top:3%; left:10%; width:80%; min-height:22px; padding:3px 5px; color:#fff; background:transparent; }
.game-card .cartridge-title .game-name { display:block; width:100%; padding:0; color:#38353d; -webkit-text-stroke:.3px #24222a; paint-order:stroke fill; text-shadow:0 1px 0 #ffffffa8,0 -1px 0 #00000080; font-family:"Microsoft YaHei","SimHei",sans-serif; font-size:12px; font-weight:900; text-align:center; line-height:16px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.game-card .cartridge[data-platform="nes"] .game-name { color:#694012; -webkit-text-stroke:.3px #5c3411; text-shadow:0 1px 0 #ffea95,0 -1px 0 #7944109c; }
.game-card .cartridge[data-platform="gba"] .game-name,.game-card .cartridge[data-platform="gbc"] .game-name,.game-card .cartridge[data-platform="arcade"] .game-name { color:#e3dcec; -webkit-text-stroke:.3px #21182a; text-shadow:0 1px 0 #000c,0 -1px 0 #ffffff80; }
.game-card .cartridge-brand { top:calc(var(--cover-top) + 3px); right:calc(100% - var(--cover-left) - var(--cover-width) + 3px); }
.game-card .cartridge-wrap .favorite-toggle { position:absolute; z-index:5; right:4%; bottom:3%; width:40px; height:40px; display:grid; place-items:center; border:1px solid #eee5d375; border-radius:50%; color:#fff8e2; background:#24202ac9; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.game-card .favorite-toggle svg { width:28px; height:28px; }
.game-card .favorite-toggle.is-favorite { color:#ff7c99!important; }
.game-card .favorite-toggle.is-favorite svg { fill:#ff6084; }
.bottom-nav { border-top: 1px solid #bba78d; background: #eadccbee; backdrop-filter: blur(14px); }
.bottom-nav a { color: #685747; font-size: 13px; }
.bottom-nav a.is-active { color: #8a3826; }
.page-footer { border-color: #d8cbb7; }
.room-heading { border-bottom: 1px solid #d8cbb7; padding-bottom: 14px; }
.room-row { border-color: #cfbea6; background: #fffaf0; }
.room-row h3 { color: #3c3129; }
dialog { color: #302b23; background: #fffaf0; border-color: #cebca1; }
.detail-dismiss { display: flex; justify-content: center; align-items: center; gap: 8px; width: min(300px,100%); min-height: 48px; margin: 24px auto 0; background: #5c4939; border: 0; border-radius: 6px; color: #fff6e0; font-size: 16px; }
.account-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.account-summary button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid #bba58a; border-radius: 6px; background: #edf2e6; color: #315538; }
.member-panel { padding: 20px 0; border-block: 1px solid var(--line); }
.member-panel > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.member-panel span, .member-panel a { display: flex; align-items: center; gap: 6px; }
.member-panel p { color: #786858; font-size: 13px; }
.cloud-history-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cloud-history-row a { color: #813c27; }
.cloud-history { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line); }
.cloud-history span { font-size:12px;color:#756859; }
.account-dialog { max-width: 380px; width: calc(100% - 32px); padding: 24px; border-radius: 8px; text-align: center; }
.account-dialog .wechat-qr { display: block; width: 220px; height: 220px; max-width: 100%; margin: 16px auto; background: white; user-select: auto; -webkit-touch-callout: default; }
.account-dialog .dialog-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.account-dialog button { min-height: 44px; padding: 8px 16px; border: 1px solid #bba78d; border-radius: 6px; background: #fff6e4; color: #48372a; }
@media (max-width: 760px) {
  .home-poster { height: 255px; }
  .poster-content { padding-top: 20px; }
  .poster-content h1 { font-size: 28px; }
  .poster-content p { font-size: 12px; }
  .search-dock { margin-top: -76px; padding: 10px 12px; }
  .platforms { gap: 6px; }
  .platforms img { width: 100%; height: 36px; }
  .platforms span { font-size: 11px; }
  .collection-tabs { gap: 6px; }
  .collection-tabs :is(button,a),.collection-tabs #random-game { min-width:0; min-height:64px; padding:5px 2px; gap:4px; }
  .collection-tabs :is(img,svg) { width:28px; height:28px; }
  .collection-tabs span { font-size: 12px; }
  .game-grid { gap: 14px 12px; }
  .catalog-actions { margin-left: auto; }
  main { padding-inline: 12px; }
  #nickname, #room-password { font-size:16px; }
}
body[data-view="me"] { color:#302b23; background:#f2eee6; }
body[data-view="me"] main { background:#f2eee6; }
body[data-view="me"] #search-dock { display:none; }
#personal-center { max-width:800px; padding:16px 0 28px; }
#personal-center :is(.profile-heading,.member-panel) { border-color:#d8cbb7; }
#personal-center .profile-heading { padding:10px 0 20px; gap:16px; }
#personal-center .profile-heading p { color:#786858; }
#personal-center .profile-heading h2 { color:#302b23; }
#personal-center .profile-heading img { border-radius:50%; background:#ffffff12; }
#personal-center .account-summary { padding:18px 0; }
#personal-center .account-summary button { color:#a5edcf; border-color:#8fc4ad66; background:#33625070; }
#personal-center #profile-form { padding:20px 0; }
#personal-center #profile-form input { min-height:44px; border:1px solid #b7a7c466; background:#ffffff0d; color:#f5ebee; border-radius:8px; }
#personal-center #profile-form button { color:#ffe0a4; border:1px solid #bd995d88; background:#79603980; border-radius:8px; }
#personal-center .profile-stats strong { color:#f0d797; }
#personal-center .profile-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#personal-center .profile-links :is(a,button) { display:grid; grid-template-columns:26px minmax(0,1fr) 14px; align-items:center; min-height:76px; padding:14px 12px; gap:8px; text-align:left; color:#40372f; border:1px solid #cbbda999; border-radius:16px; background:linear-gradient(135deg,#ffffffb3,#e4e7e580); box-shadow:inset 0 1px 6px #fff8; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); font-size:14px; overflow-wrap:anywhere; }
#personal-center .profile-links svg:first-child { width:26px; height:26px; color:#80614c; }
#personal-center .profile-links svg:last-child { width:14px; height:14px; color:#7b786e; }
#personal-center .member-panel h3 { color:#654733; }
#personal-center .member-panel :is(p,span) { color:#756859; }
#personal-center .member-panel a { color:#a5edcf; }
#personal-center .cloud-history { border-color:#c7b8cd33; }
#personal-center .cloud-history a { color:#e7c980; }
.profile-identity { min-width:0; flex:1; }
.profile-name-row { display:flex; align-items:center; gap:6px; }
.profile-name-row h2 { min-width:0; overflow-wrap:anywhere; font-size:22px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
#edit-nickname { width:30px; height:30px; flex-shrink:0; padding:5px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#80614c; }
#edit-nickname svg { width:17px; height:17px; }
.profile-status { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; color:#756859; font-size:11px; }
.profile-auth button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 10px; border:1px solid #9baea0; border-radius:8px; background:#e5eee580; color:#315538; font-size:12px; white-space:nowrap; }
.profile-auth svg { width:18px; height:18px; }
#nickname-dialog { width:min(380px,calc(100% - 28px)); padding:30px 20px 20px; background:#f2eee6ee; backdrop-filter:blur(20px); border-radius:16px; }
#nickname-dialog h2 { font-size:18px; color:#40372f; }
#nickname-dialog #profile-form { padding:0; }
#nickname-dialog #profile-form > div { display:flex; gap:8px; }
#nickname-dialog input { flex:1; min-width:0; min-height:44px; padding:8px; border:1px solid #cbbda9; border-radius:8px; background:#fff9; color:#302b23; font-size:16px; }
#nickname-dialog #profile-form button { width:44px; display:grid; place-items:center; border:1px solid #9baea0; border-radius:8px; color:#315538; background:#e5eee5; }
@media (max-width:420px) { #personal-center .profile-heading { gap:10px; } #personal-center .profile-heading img { width:48px; height:48px; } .profile-name-row h2 { font-size:18px; } .profile-auth button { padding:8px; } }
@media (max-width:360px) { .game-card .cartridge-title .game-name { font-size:11px; } #personal-center .profile-links { grid-template-columns:1fr; } }
#game-detail[open] { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); overflow:hidden; border:1px solid #c9bac866; border-radius:20px; color:#f4ece6; background:linear-gradient(135deg,#393339d9,#24232bd9); box-shadow:0 16px 64px #0006; backdrop-filter:blur(28px) saturate(115%); -webkit-backdrop-filter:blur(28px) saturate(115%); }
#game-detail .detail-body { flex:1 1 auto; min-height:0; max-height:calc(100dvh - 26px); overflow:hidden; padding:44px 24px 18px; gap:22px; }
#game-detail .detail-content { min-width:0; min-height:0; display:flex; flex-direction:column; }
#game-detail .detail-content > :not(#detail-description) { flex-shrink:0; }
#game-detail :is(#detail-type,#detail-version) { color:#efcf91; }
#game-detail #detail-title { color:#f9ecda; }
#game-detail :is(#detail-description,#detail-note,#public-label) { color:#cfc2cf; }
#game-detail #detail-description { min-height:40px; height:160px; max-height:180px; flex:1 1 160px; overflow-y:auto; overscroll-behavior:contain; margin:4px 0; }
#game-detail :is(.dialog-close,.detail-dismiss,#detail-play,#detail-host,#detail-favorite,#detail-share) { border:1px solid #b9a5c466; color:#f9ead7; background:linear-gradient(135deg,#69566888,#3b344e99); box-shadow:inset 0 1px 6px #fff1; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:12px; }
#game-detail #detail-play { color:#ffe4a9; border-color:#dbb56688; background:linear-gradient(135deg,#956c3399,#69503199); }
#game-detail #detail-host { color:#b2eace; border-color:#a0c2b666; background:linear-gradient(135deg,#44625788,#303b4199); min-height:44px; }
#game-detail .dialog-close { position:absolute; z-index:5; top:10px; right:10px; width:36px; height:36px; border-radius:50%; }
#game-detail .detail-dismiss { flex:0 0 auto; width:calc(100% - 32px); max-width:300px; margin:10px auto 16px; min-height:48px; }
#game-detail .detail-dismiss::before { content:none; }
#game-detail :is(#detail-play,#detail-host) svg { width:20px; height:20px; }
#game-detail #detail-note:empty { display:none; }
.detail-provenance { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; font-size:11px; color:#cfc2cf; }
.detail-provenance span { min-width:0; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
#detail-disclaimer { flex-shrink:0; min-height:30px; padding:4px 8px; border:1px solid #a391b666; border-radius:8px; color:#efcf91; background:#ffffff0c; }
#resource-disclaimer { padding:40px 24px 20px; color:#f4ece6; background:#302c35ed; border-color:#a391b666; border-radius:20px; }
#resource-disclaimer h2 { font-size:20px; color:#efcf91; }
#resource-disclaimer p { font-size:14px; line-height:1.7; }
#resource-disclaimer .dialog-close { color:#f4ece6; background:#69566888; }
dialog .site-notice { top:50%; bottom:auto; transform:translate(-50%,-50%); background:#26232eee; border:1px solid #c1b39b99; color:#fff1d6; backdrop-filter:blur(18px); pointer-events:none; width:max-content; max-width:calc(100vw - 48px); }
@media (max-width:760px) {
  #game-detail .detail-body { height:min(740px,calc(100dvh - 26px)); grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:10px; padding:40px 18px 14px; }
  #game-detail .detail-media.cartridge-display { width:140px; }
  #game-detail #detail-type { margin:0 0 4px; }
  #game-detail #detail-title { margin:0 0 6px; font-size:20px; }
  #game-detail #detail-version { margin:0 0 4px; }
  #game-detail .detail-actions { margin:8px 0; }
}
@media (max-width:760px) and (max-height:620px) {
  #game-detail .detail-body { padding:40px 12px 10px; gap:6px; }
  #game-detail .detail-media.cartridge-display { width:80px; }
  #game-detail #detail-title { font-size:16px; margin-bottom:4px; }
  #game-detail #detail-type { font-size:10px; }
  #game-detail #detail-description { font-size:11px; line-height:1.6; }
  #game-detail .detail-provenance { margin-top:4px; font-size:10px; }
  #game-detail #public-label { margin-top:6px; font-size:10px; }
}
@media (min-width:761px) and (max-height:600px) { #game-detail .detail-body { height:calc(100dvh - 26px); grid-template-columns:120px minmax(0,1fr); padding:40px 16px 12px; gap:16px; } #game-detail .detail-media.cartridge-display { width:120px; } #game-detail #detail-title { font-size:18px; margin:0 0 6px; } #game-detail #detail-type,#game-detail #detail-version { margin:0 0 4px; } #game-detail .detail-actions { margin:8px 0; } }
#random-picker { width:min(680px,calc(100% - 28px)); max-height:calc(100dvh - 24px); padding:22px 20px 14px; overflow:hidden; border:1px solid #b8aebc88; border-radius:20px; color:#fff2df; background:linear-gradient(135deg,#42343ce6,#252631ed); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
#random-picker header { display:flex; align-items:center; justify-content:center; gap:10px; min-height:38px; margin:0 30px 14px; color:#f3ce7d; }
#random-picker header img { width:28px; height:28px; object-fit:contain; }
#random-title { margin:0; font-size:22px; }
#random-picker .dialog-close { color:#f9ecde; background:#ffffff18; }
.random-stage { position:relative; height:min(62dvh,500px); overflow:hidden; isolation:isolate; }
.random-deck { position:absolute; inset:0; }
.random-card { position:absolute; inset:0; display:grid; place-items:center; opacity:.9; pointer-events:none; will-change:transform; }
.random-card .cartridge-display { width:20%; height:auto; max-width:calc(min(62dvh,500px) * .25); aspect-ratio:var(--cartridge-ratio); }
.random-card .cartridge-title { top:3%; min-height:16px; padding:1px 2px; }
.random-card .cartridge-title .game-name { font-size:9px; line-height:12px; }
.random-card.is-winner { z-index:30; opacity:1; filter:drop-shadow(0 0 18px #ffdb7a); }
.random-card.is-winner .cartridge-display { width:62%; max-width:calc(min(62dvh,500px) * .64); animation:cartridge-reveal .7s cubic-bezier(.2,.8,.25,1.1) both; }
.random-card.is-winner .game-name { font-size:13px; line-height:18px; }
.room-search { display:flex; align-items:center; gap:10px; margin:16px 0 20px; border-bottom:1px solid #cfc4b4; padding:8px 0; color:#68786e; }
.room-search svg { width:20px; height:20px; flex:none; }
body[data-view="rooms"] #search-dock { margin:0; padding:0 0 20px; border-radius:0; }
body[data-view="rooms"] #search-form { background:#fffaf099; }
.room-list .room-row { cursor:pointer; transition:border-color .15s,background .15s; }
.room-list .room-row:hover { border-color:#819e8d; background:#fffdfbbb; }
.room-list .room-row:focus-visible { outline:2px solid #38644f; outline-offset:3px; }
.room-cover .cartridge-title { pointer-events:none; }
#room-entry { width:min(420px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:38px 24px 24px; border:1px solid #b7c8be99; border-radius:8px; background:#edf4eef0; color:#28392e; box-shadow:0 16px 70px #15291d40; backdrop-filter:blur(24px) saturate(115%); -webkit-backdrop-filter:blur(24px) saturate(115%); }
#room-entry::backdrop { background:#14281e66; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#room-entry h2 { margin:0 24px 12px 0; font-size:20px; line-height:1.4; text-align:left; overflow-wrap:anywhere; color:#2c4636; }
#room-entry-game { margin:0 0 24px; color:#65776a; font-size:14px; }
#room-entry .dialog-close { color:#426a54; background:#38644f0d; }
#room-entry-form label { color:#536957; font-size:13px; }
#room-entry-form input { width:100%; min-height:48px; margin-top:8px; border:1px solid #9fb5a8; border-radius:6px; background:#ffffff90; color:#263c2e; padding:10px 12px; font:16px var(--sans); }
#room-entry-error { min-height:20px; color:#963b3d; font-size:13px; }
#room-entry-form .primary-action { width:100%; min-height:48px; border:1px solid #38644f; border-radius:6px; background:#38644f; color:#fff; display:flex; align-items:center; justify-content:center; gap:10px; }
#back-to-top { position:fixed; z-index:16; right:max(16px,env(safe-area-inset-right)); bottom:calc(88px + env(safe-area-inset-bottom)); width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid #b6bcb6; border-radius:8px; color:#345844; background:#f9faf7f2; box-shadow:0 3px 14px #233c2824; }
#back-to-top[hidden] { display:none; }
#back-to-top svg { width:24px; height:24px; }
#back-to-top:hover { color:#263e33; background:#e5eee8; }
#back-to-top:focus-visible { outline:2px solid #38644f; outline-offset:3px; }
.room-search input { border:0; outline:0; width:100%; min-width:0; background:transparent; color:#302b23; font:14px var(--sans); padding:8px 0; }
.room-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
.room-list .room-row { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:0; padding:12px; border:1px solid #d2c7b8; border-radius:8px; background:#ffffff65; }
.room-list .room-row[hidden] { display:none; }
.room-row .room-cover { width:100%; max-width:190px; margin:0 auto; flex:none; }
.room-row h3 { font-size:14px; line-height:1.5; text-align:left; margin:0; overflow-wrap:anywhere; }
.room-row p { font-size:11px; text-align:left; line-height:1.5; margin:4px 0 0; overflow-wrap:anywhere; color:#6d746d; }
.room-row .room-ready { position:absolute; top:10px; left:10px; color:#d6f4e1; background:#294838eb; padding:3px 7px; border-radius:4px; font-size:11px; }
.room-row > a { width:100%; margin-top:auto; min-height:38px; display:flex; justify-content:center; align-items:center; gap:8px; background:#38644f16; color:#365844; border:1px solid #76977e66; border-radius:4px; }
.room-row > a svg { width:17px; height:17px; }
@media(min-width:640px) { .room-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1000px) { .room-list { grid-template-columns:repeat(5,minmax(0,1fr)); } }
#random-picker.is-revealed .random-card:not(.is-winner) { visibility:hidden; }
#random-picker.is-spinning .random-card { animation:cartridge-mix var(--orbit-duration) linear infinite; animation-delay:var(--orbit-phase); }
#random-picker.is-spinning header img { animation:dice-tumble .4s ease-in-out infinite; }
#random-status { min-height:24px; margin:14px 0 0; text-align:center; color:#f5dda9; font-size:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@keyframes cartridge-mix {
  0%,100% { transform:translate(var(--orbit-x),var(--orbit-y)) rotate(var(--tilt)); }
  25% { transform:translate(calc(-1 * var(--orbit-x)),var(--orbit-y)) rotate(-35deg); }
  50% { transform:translate(calc(-1 * var(--orbit-x)),calc(-1 * var(--orbit-y))) rotate(25deg); }
  75% { transform:translate(var(--orbit-x),calc(-1 * var(--orbit-y))) rotate(40deg); }
}
@keyframes cartridge-reveal { from { transform:scale(.2) rotate(-30deg); opacity:0; } 75% { transform:scale(1.12) rotate(4deg); opacity:1; } to { transform:scale(1) rotate(0); opacity:1; } }
#random-confetti { position:absolute; inset:0; z-index:40; pointer-events:none; }
#random-confetti span { position:absolute; top:50%; left:50%; width:7px; height:12px; background:var(--confetti-color); opacity:0; }
.is-revealed #random-confetti span { animation:cartridge-confetti 1.8s ease-out both; }
@keyframes cartridge-confetti { 0% { opacity:1; transform:translate(0,0) rotate(0); } 65% { opacity:1; } 100% { opacity:0; transform:translate(var(--confetti-x),calc(var(--confetti-y) + 70px)) rotate(var(--confetti-spin)); } }
@keyframes dice-tumble { 0%,100% { transform:rotate(-12deg); } 50% { transform:rotate(18deg); } }
@media (max-width:600px) { #random-picker { padding:20px 12px 12px; } #random-title { font-size:18px; } }
@media (prefers-reduced-motion:reduce) {
  #random-picker.is-spinning .random-deck { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px; }
  #random-picker.is-spinning .random-card { position:relative; animation:none; }
  #random-picker.is-spinning .cartridge-display { width:100%; max-width:calc(min(62dvh,500px) * .17); }
  #random-picker.is-spinning header img,.random-card.is-winner .cartridge-display,.is-revealed #random-confetti span { animation:none; }
}
.lobby-poster { position:relative; width:100%; max-width:1240px; margin:0 auto; overflow:hidden; }
.lobby-poster img { display:block; width:100%; height:auto; max-height:420px; object-fit:cover; object-position:center 28%; }
body[data-view="rooms"] main { padding-top:10px; }
body[data-view="rooms"] #search-dock { position:relative; padding:12px 0; margin:0; }
body[data-view="rooms"] #search-form { width:100%; max-width:none; border:1px solid #d8cbb7; background:#fff9; box-shadow:none; }
.room-platform-tabs { display:flex; gap:8px; margin:0 0 16px; }
.room-platform-tabs button { flex:1; min-height:40px; border:1px solid #d8cbb7; border-radius:6px; background:#fff6; color:#544d42; }
.room-platform-tabs button[aria-pressed="true"] { background:#514338; color:#fff8df; border-color:#514338; }
.room-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.room-list .room-row { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; min-height:146px; gap:12px; padding:12px 10px; background:#fff9; }
.room-row .room-cover { width:72px; margin:0; }
.room-row .room-copy { min-width:0; padding-top:16px; }
.room-row h3 { font-size:14px; }
.room-row .room-ready { left:auto; right:10px; top:8px; background:#38644f; }
.room-waiting { display:inline-flex; align-items:center; gap:4px; margin-top:8px; color:#4f7562; font-size:11px; }
.room-waiting svg { width:14px; height:14px; }
.room-lobby-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:20px 0; }
.room-lobby-actions :is(a,button) { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border:1px solid #bcb5a5; border-radius:6px; background:#fff8; color:#544d42; font-size:14px; }
.room-lobby-actions a { background:#514338; color:#fff8df; border-color:#514338; }
.personal-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.personal-title h1 { margin:0; font-size:22px; }
.personal-title a { display:grid; place-items:center; width:40px; height:40px; border:1px solid #d8cbb7; border-radius:6px; }
#personal-center .profile-links { display:flex; flex-direction:column; gap:0; margin:16px 0 24px; }
#personal-center .profile-links :is(a,button) { width:100%; min-height:56px; border:0; border-bottom:1px solid #d8cbb7; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; padding:12px 0; }
#personal-center .profile-links :nth-child(2) svg:first-child { color:#748957; }
#personal-center .profile-links :nth-child(3) svg:first-child { color:#6c83a0; }
#personal-center .profile-links :nth-child(4) svg:first-child { color:#8a6b88; }
.save-manager { padding:0 0 24px; }
.save-manager > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.save-manager h3 { margin:0; font-size:18px; }
.save-manager button,.save-record a { border:1px solid #c8c4b9; border-radius:6px; background:#ffffff80; color:#4c6254; min-height:40px; padding:8px 12px; }
.save-manager > header button,.save-record :is(button,a) { width:40px; height:40px; padding:0; display:grid; place-items:center; flex:none; }
.save-source-tabs { display:flex; gap:8px; padding:16px 0 0; }
.save-source-tabs button { flex:1; font-size:13px; }
.save-source-tabs [aria-selected="true"] { background:#38644f; color:#fff; border-color:#38644f; }
#save-space-summary { color:#3c5f4a; font-size:14px; margin:16px 0 6px; }
#save-space-hint { font-size:12px; line-height:1.6; color:#756e63; margin:0 0 12px; }
.save-records { max-height:440px; overflow:auto; margin:0 0 12px; overscroll-behavior:contain; }
.save-record { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #d8cbb7; }
.save-record > svg { color:#6c83a0; }
.save-record > div { min-width:0; flex:1; }
.save-record strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.save-record small { display:block; margin-top:5px; color:#7a7369; font-size:11px; line-height:1.5; }
#clear-local-saves,#save-manager-login { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font-size:13px; }
#clear-local-saves { color:#9a493a; }
#room-code-dialog { width:min(400px,calc(100% - 28px)); padding:24px; border:1px solid #d8cbb7; border-radius:8px; color:#302b23; background:#f2eee6f2; }
#room-code-dialog::backdrop { background:#182c2566; backdrop-filter:blur(8px); }
#room-code-dialog h2 { font-size:20px; margin:0 0 20px; }
#room-code-form { display:grid; gap:12px; }
#room-code-form input { width:100%; border:1px solid #c8c4b9; border-radius:6px; padding:12px; font-size:18px; background:#fff9; text-transform:uppercase; }
#room-code-form button { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; background:#38644f; color:#fff; border:0; border-radius:6px; }
#room-code-form p { margin:0; color:#9a493a; font-size:12px; }
@media(min-width:860px) { .room-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1160px) { .room-list { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:380px) { .room-list .room-row { grid-template-columns:52px minmax(0,1fr); gap:8px; padding:12px 8px; } .room-row .room-cover { width:52px; } .room-row h3 { font-size:12px; } .save-record { gap:6px; } .save-record > svg { display:none; } }
.lobby-poster > img { height:340px; max-height:none; object-position:center; }
.lobby-poster .room-heading { position:absolute; inset:12px 12px auto; display:flex; align-items:center; justify-content:space-between; padding:0; margin:0; border:0; }
.lobby-poster .room-heading > div { display:flex; gap:8px; }
.lobby-poster .room-heading :is(a,button),.lobby-poster .room-count { background:#f8f8f1d9; backdrop-filter:blur(14px); color:#293a32; border:1px solid #ffffffa6; box-shadow:0 2px 8px #0002; border-radius:6px; min-height:40px; }
.lobby-poster .room-heading :is(a,button) { display:grid; place-items:center; width:40px; padding:0; }
.lobby-poster .room-count { display:flex; align-items:center; padding:0 12px; font-size:13px; }
#room-poster-controls { position:absolute; bottom:12px; left:12px; right:12px; display:grid; gap:8px; }
body[data-view="rooms"] #room-poster-controls #search-dock { padding:0; }
body[data-view="rooms"] #room-poster-controls #search-form { background:#f8f8f1e6; backdrop-filter:blur(14px); min-height:44px; height:44px; width:100%; color:#293a32; box-shadow:0 2px 8px #0002; }
#room-poster-controls .room-platform-tabs { margin:0; }
#room-poster-controls .room-platform-tabs button { min-height:36px; background:#f8f8f1e6; backdrop-filter:blur(14px); color:#293a32; border-color:#ffffffa6; box-shadow:0 2px 8px #0002; }
#room-poster-controls .room-platform-tabs button[aria-pressed="true"] { background:#38644fed; color:#fff; }
.save-manager { max-width:840px; margin:0 auto; padding-top:20px; }
.save-manager > header h1 { flex:1; margin:0; font-size:22px; }
.save-manager > header a { display:grid; place-items:center; width:40px; height:40px; border:1px solid #c8c4b9; border-radius:6px; }
.save-records { max-height:none; overflow:visible; }
.save-cover { width:76px; height:70px; object-fit:contain; flex:none; background:#ffffff60; border:1px solid #d8cbb7; border-radius:4px; }
@media(max-width:600px) { .lobby-poster > img { height:300px; } .save-cover { width:60px; height:64px; } }

.lobby-poster .room-heading :is(a,button),.lobby-poster .room-count{background:#fff4d7e6;border:1px solid #fffaf1;box-shadow:0 3px 14px #0c181b59;color:#263e33;backdrop-filter:blur(18px)}#room-poster-controls{max-width:780px;margin:0 auto}.save-snapshot{width:96px;height:64px;object-fit:contain;margin-top:8px;background:#161b20;border-radius:6px}.save-record{align-items:flex-start;padding:16px 0}.save-cover{height:100px;width:80px}#resource-disclaimer a{color:#f4d395}@media(max-width:600px){.save-cover{width:60px;height:84px}.save-record small{font-size:12px}.save-snapshot{width:80px;height:56px}}
.lobby-poster #refresh-rooms{background:#fff4d7e6;border:1px solid #fffaf1;box-shadow:0 3px 14px #0c181b59;color:#263e33;backdrop-filter:blur(18px)}

.save-source-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.save-version-badge{display:inline-block;margin:8px 0 0;padding:3px 8px;background:#d4e7de;color:#34624c;border-radius:4px;font-size:11px}.save-sync-status{font-size:13px;color:#356c53}.save-sync-status[data-phase="conflict"]{color:#a16030}

.page-footer{justify-content:center;text-align:center}.page-footer a{margin:0!important;font-size:12px;color:inherit}.lobby-poster>img{height:250px;object-position:center 35%}@media(max-width:600px){.lobby-poster>img{height:215px}}