/* v2 collections, room controls, turn purchases and compact profile. */
.panel-trade { width:min(790px,100%); max-height:min(740px,calc(100dvh - 48px)); }
.panel-trade .panel-body { overflow:auto; }
.panel-settings { height:min(720px,calc(100dvh - 40px)); max-height:calc(100dvh - 40px); }
.panel-settings .panel-body { overflow-y:auto; }
.panel-layer:has(.panel-pets) { align-items:start; overflow-y:auto; }
.panel-pets { margin:12px 0 24px; max-height:calc(100dvh - 54px); }
.panel-pets .panel-body { overflow-y:auto; }
.panel-pets .pets-grid .item-art { width:130px; height:130px; }
.panel-pets .pets-grid .model-thumb { width:120px; height:120px; max-width:none; max-height:none; }
.panel-pets .pets-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.panel-layer:has(.panel-cards) { align-items:start; overflow-y:auto; }
.panel-cards { align-self:start; margin:12px 0 24px; max-height:calc(100dvh - 54px); }
.panel-cards .panel-body { overflow-y:auto; }
.panel-cards .card-box-highlight { animation:card-box-pulse .55s ease-in-out 4; outline:5px solid #45d878; outline-offset:3px; }
@keyframes card-box-pulse { 50% { box-shadow:0 0 0 8px #45d87866,0 6px var(--ink); } }
.profile-summary .longest-word-stat { grid-column:1/-1; }
.profile-summary .longest-word-stat .stat-value { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; font-size:16px; }
.panel-cards .block-card > .model-thumb { width:122px; height:122px; max-width:none; max-height:none; margin:-10px -12px -10px -5px; }
.trade-partner { font:700 19px var(--font); margin:0 0 10px; }
.trade-offers { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.trade-box { position:relative; min-width:0; padding:11px; border:2px solid #477563; border-radius:13px; background:#eaffef; box-shadow:inset 0 2px #fff; overflow:hidden; }
.trade-box.accepted { border-color:#11934e; background:#ccf5d7; box-shadow:inset 0 0 0 3px #88e6a7,0 0 15px #27ad6570; }
.trade-box h3 { margin:0 0 7px; font:700 17px var(--font); }
.trade-icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:8px; }
.trade-icon-grid.offer-grid { min-height:126px; align-content:start; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.trade-offer-grid .trade-tile-name { display:none; }
.trade-offer-grid .trade-tile { min-height:72px; }
.trade-collection { max-height:175px; overflow:auto; padding:6px; border:2px solid #89ac95; border-radius:12px; background:#f3fff5; }
.trade-tile { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; min-height:94px; padding:4px; border:2px solid #8cb7a0; border-radius:10px; background:#fff; color:#264235; cursor:pointer; }
.trade-tile:hover,.trade-tile:focus-visible { border-color:#389663; transform:translateY(-2px); }
.trade-tile.selected { border-color:#2eaa60; background:#d9f6df; box-shadow:0 0 0 2px #abecba; }
.trade-tile:disabled { cursor:default; opacity:.8; }
.trade-tile img,.trade-tile svg { width:60px; height:60px; object-fit:contain; }
.trade-tile-name { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 11px var(--font); }
.trade-tile-count { position:absolute; top:3px; right:3px; border-radius:7px; padding:1px 4px; background:#208b4b; color:#fff; font:700 12px var(--font); }
.trade-empty { align-self:center; grid-column:1/-1; color:#5a7163; font:600 15px var(--font); }
.trade-offer-footer { display:flex; justify-content:space-between; gap:5px; margin-top:8px; font:700 14px var(--font); }
.trade-accepted-mark { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; color:#0c9a4a99; font:900 132px/1 var(--font); text-shadow:0 2px #fff9; }
.trade-collection-title { margin:10px 0 6px; font:700 16px var(--font); }
.trade-request-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
.trade-request { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px; border:3px solid #367752; border-radius:15px; background:#dcffe6; color:#1e4933; cursor:pointer; }
.trade-request-avatar { display:block; width:76px; height:68px; border:2px solid #338258; border-radius:12px; overflow:hidden; background:linear-gradient(#c9f2ff,#7bd99b); }
.trade-request-avatar .avatar-preview { width:100%; height:100%; display:block; }
.trade-request strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trade-request small { font-weight:700; }
.trade-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.trade-note { margin:10px 0 0; color:#425b4b; font:600 14px var(--font); }
.trade-history-shortcut { float:right; display:grid; place-items:center; width:44px; height:44px; margin:0 0 8px 12px; padding:6px; border:3px solid var(--ink, #1b1b1b); border-radius:12px; background:#d9f7df; box-shadow:0 3px 0 #779782; cursor:pointer; }
.trade-history-shortcut .icon { width:28px; height:28px; }
.trade-history-shortcut:hover { background:#bff0ca; }
.trade-history-shortcut:active { transform:translateY(2px); box-shadow:0 1px 0 #779782; }
.trade-history-shortcut:focus-visible { outline:3px solid #177b37; outline-offset:3px; }
.trade-history { display:grid; gap:8px; max-height:min(55vh, 400px); overflow:auto; text-align:left; }
.trade-history-empty { margin:0; }
.overlay.notice:has(.trade-history) .overlay-card { width:min(540px, 94vw); }
.trade-history-row { display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:6px; border-radius:7px; background:#fff; }
.trade-history-row span { grid-column:1/-1; font-size:12px; }
@media(max-width:620px) { .trade-offers { gap:7px; } .trade-box { padding:7px; } .trade-icon-grid { grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:5px; } .trade-icon-grid.offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .trade-tile { min-height:76px; } .trade-tile img,.trade-tile svg { width:45px;height:45px; } .trade-collection { max-height:150px; } }
.roulette-hud { position:absolute; inset:0; pointer-events:none; color:#f7e5c2; }
.roulette-hud[hidden] { display:none; }
.roulette-heading { position:absolute; left:50%; top:32px; transform:translateX(-50%); text-align:center; text-shadow:0 2px 10px #070010; }
.roulette-title { font:700 clamp(21px,3vw,36px) var(--font); letter-spacing:.12em; }
.roulette-pot { font:600 15px var(--font); color:#e8c36e; margin-top:5px; }
.roulette-bottom { position:absolute; left:50%; bottom:calc(30px + var(--sab)); transform:translateX(-50%); width:min(610px,calc(100vw - 32px)); padding:16px; border:2px solid #baa06f; border-radius:20px; background:linear-gradient(120deg,#24152fed,#111825ed); text-align:center; box-shadow:0 5px 30px #090414; pointer-events:auto; }
.roulette-note { font:600 17px/1.4 var(--font); margin-bottom:12px; }
.roulette-actions { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.roulette-clock { font:700 27px var(--font); color:#caa8ff; min-width:68px; }
.roulette-actions [hidden] { display:none; }
.roulette-intro { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; background:radial-gradient(ellipse,#10061e88,transparent 70%); color:#f2daaa; font:700 clamp(24px,5vw,62px) var(--font); text-align:center; letter-spacing:.08em; text-shadow:0 0 25px #b789df; animation:ritual-intro 4s both; z-index:10; }
@keyframes ritual-intro { 0%,100% { opacity:0; transform:scale(.95); } 25%,70% { opacity:1; transform:scale(1); } }
@media (max-width:720px) { .roulette-heading { top:90px; width:100%; } .roulette-bottom { bottom:calc(105px + var(--sab)); padding:10px; } .roulette-note { font-size:14px; } .roulette-actions .btn { font-size:15px; padding:10px 12px; } }
.model-thumb { display:block; object-fit:contain; width:100%; height:100%; max-width:160px; max-height:160px; }
.block-card > .model-thumb { flex:none; width:88px; height:100px; }
.block-card.secret-block > .model-thumb { width:108px; height:112px; max-width:none; max-height:none; margin:-6px -10px -6px -4px; }
.model-thumb.silhouette { filter:brightness(0); }
.pet-dictionary { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; margin:12px 0 24px; }
.pet-dictionary-card { display:flex; flex-direction:column; align-items:center; gap:5px; min-height:178px; padding:10px; border:3px solid var(--rc); border-radius:14px; background:#ffffffd9; color:#1b2237; text-align:center; }
.pet-dictionary-card .model-thumb { width:80px; height:80px; }
.pet-dictionary-card small { line-height:1.2; }
.pet-dictionary-card.locked { background:#dce0ec; }
.model-odds .odd { flex-direction:column; padding:3px 5px; }
.model-odds .model-thumb { width:34px; height:34px; }
.card-art { width:86px; height:108px; flex:none; }
.card-reveal .card-art { width:160px; height:200px; margin:20px auto; display:block; animation:card-flip .7s ease both; }
.card-reveal-front { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; animation:card-reveal-in .38s cubic-bezier(.18,1.3,.3,1) both; }
.card-reveal-front[hidden] { display:none; }
.card-purchase-stamp { color:#ffe462; font:900 30px var(--font); animation:card-reveal-in .45s cubic-bezier(.18,1.3,.3,1) both; }
.card-reveal-front .card-art { margin:4px auto; }
.card-mystery { display:grid; place-items:center; width:162px; height:210px; margin:20px auto; border:7px solid #24254c; border-radius:20px; background:radial-gradient(circle at 30% 25%,#fff9 0 5%,transparent 30%),linear-gradient(145deg,#7b58ff,#d854e6 54%,#3a8cff); box-shadow:0 0 20px #a477ff,0 0 48px #d554ed,0 8px #24254c; color:white; font:900 100px/1 var(--font); -webkit-text-stroke:5px #24254c; animation:mystery-spin 1.05s ease-in-out both; }
.card-rarity { display:block; padding:5px 18px; border:3px solid #26314c; border-radius:30px; color:#142338; background:#d9edff; font:800 20px/1.1 var(--font); text-transform:uppercase; letter-spacing:.06em; box-shadow:0 3px #26314c; }
.card-rarity.rarity-common { background:#cfd4de; }
.card-rarity.rarity-uncommon { background:#8fe59b; }
.card-rarity.rarity-rare { background:#65c9ff; }
.card-rarity.rarity-epic { background:#c6a2ff; }
.card-rarity.rarity-legendary { background:#ffc850; }
@keyframes mystery-spin { 0% { transform:rotateY(0) scale(.65); opacity:0; } 22% { transform:rotateY(90deg) scale(1); opacity:1; } 72% { transform:rotateY(540deg) scale(1.08); } 100% { transform:rotateY(720deg) scale(.9); opacity:1; } }
@keyframes card-reveal-in { from { opacity:0; transform:rotateY(-90deg) scale(.7); } to { opacity:1; transform:rotateY(0) scale(1); } }
@keyframes card-flip { from { transform:rotateY(90deg) scale(.7); } }
.tier-2 .item-art { box-shadow:0 0 12px #6edfff; }
.tier-3 .item-art { box-shadow:0 0 18px #ffbf3d; }
.host-notice { margin:12px 0; padding:13px 16px; font:600 17px/1.35 var(--font); color:#213449; background:#e3eefc; border:2px solid #8eaed0; border-radius:12px; }
.host-notice.restricted { font-size:20px; color:#422700; background:#fff0bf; border:3px solid #b8811c; }
.version-entry { display:block; margin:18px auto 0; border:0; background:none; color:#7d8794; font:500 12px var(--font); cursor:pointer; }
.secret-entry { display:block; width:110px; margin:5px auto; padding:3px; border:0; outline:none; background:transparent; font:500 15px var(--font); text-align:center; }
.moderation-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid #cad5df; }
.moderation-row .host-tools { margin:0; }
.profile-columns { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; height:100%; min-height:0; }
.panel-profile { width:min(850px,100%); height:min(630px,calc(100dvh - 60px)); }
.panel-profile .panel-body { overflow:hidden; }
.profile-summary { display:flex; flex-direction:column; gap:6px; min-height:0; }
.profile-summary { padding:12px; border:3px solid #7795d5; border-radius:26px; background:radial-gradient(circle at 12% 10%,#ffffff 0 7px,transparent 8px),radial-gradient(circle at 88% 28%,#ffffffa8 0 15px,transparent 16px),linear-gradient(145deg,#d4eeff,#e8ddff); box-shadow:inset 0 4px #ffffffb0,0 5px #657fb438; }
.profile-summary .avatar-stage { border-radius:42% 42% 35% 35%; background:radial-gradient(ellipse at center,#fff 0 35%,#9dcafa88 70%); }
.profile-summary .stat { border-radius:14px; background:#ffffffd9; border-color:#b3bfdf; }
.profile-summary .field { border-radius:18px; }
.profile-summary .level-progress { border-radius:16px; background:#ffffffa8; padding:7px 10px; }
.profile-summary .avatar-stage { width:108px; height:118px; min-height:0; margin:0 auto; flex:none; }
.profile-summary .avatar-stage .avatar-preview { max-height:100%; }
.profile-summary .stats { gap:6px; }
.profile-summary .stat { display:flex; flex-direction:column; align-items:flex-start; padding:3px 7px; border-width:2px; gap:1px; }
.profile-summary .stat-value { max-width:100%; font-size:17px; }
.level-progress { display:flex; flex-direction:column; gap:4px; font:600 14px var(--font); }
.level-progress progress { width:100%; height:12px; accent-color:#775ad8; }
.profile-customize { display:flex; flex-direction:column; min-width:0; min-height:0; gap:12px; }
.profile-tabs { flex:none; }
.profile-tabs .seg-btn { padding:8px 10px; }
.profile-tab-content { min-height:0; overflow:auto; flex:1; }
.profile-tab-content .ae-row { gap:6px; margin-bottom:8px; }
.profile-tab-content .ae-label { font-size:13px; }
.profile-tab-content .swatch { width:25px; height:25px; border-width:2px; }
.profile-tab-content .ae-options { gap:5px; }
.profile-tab-content .seg-btn { font-size:12px; padding:6px 8px; }
.profile-collection { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.profile-item { display:flex; flex-direction:column; align-items:center; border:2px solid #718098; border-radius:12px; background:#fff; padding:8px; font:600 14px var(--font); cursor:pointer; }
.profile-item.equipped { background:#dff6dd; border-color:#3b9d44; }
.profile-item .model-thumb { width:80px; height:80px; }
.pet-stat-tooltip { position:fixed; z-index:1000; width:min(270px,calc(100vw - 16px)); display:grid; gap:4px; padding:10px 13px; border:2px solid #c3a2ff; border-radius:13px; background:#201a31f2; box-shadow:0 7px 24px #0007; color:#fff; font:600 14px/1.25 var(--font); pointer-events:none; }
.pet-stat-tooltip strong { font-size:17px; }
.pet-stat-line { color:#b3ffcf; font-size:18px; font-weight:700; }
.admin-room-list { display:grid; gap:8px; margin:9px 0; max-height:300px; overflow:auto; }
.admin-room { padding:9px; border:2px solid #9aa8ba; border-radius:11px; background:#f2f7ff; }
.admin-room-head { display:flex; align-items:center; justify-content:space-between; gap:8px; font:700 15px var(--font); }
.admin-room-players { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.admin-room-players .btn { font-size:12px; padding:5px 8px; }
.cape-controls { display:grid; gap:8px; margin-bottom:12px; padding:12px; border:2px solid #8ba4d7; border-radius:16px; background:#e6f0ff; font:700 16px var(--font); }
.cape-colors { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cape-swatch { width:34px; height:34px; border:3px solid #263449; border-radius:50%; box-shadow:0 3px #263449; cursor:pointer; }
.cape-swatch[aria-pressed=true] { outline:3px solid #fff; box-shadow:0 0 0 5px #4a80d8,0 3px #263449; }
.public-room-list { display:grid; gap:5px; }
.public-room { display:flex; justify-content:space-between; border:1px solid #aabdd1; background:#eaf2fb; border-radius:9px; padding:8px 10px; color:#26394e; font:600 13px var(--font); cursor:pointer; }
.play-card > .btn + .btn { margin-top:9px; }
.view-button { position:absolute; bottom:calc(86px + var(--sab)); left:calc(12px + var(--sal)); padding:7px 10px; border:2px solid var(--ink); border-radius:20px; background:#fff; color:#26394e; font:600 13px var(--font); pointer-events:auto; cursor:pointer; }
.view-button[aria-pressed=true] { background:#bfebff; }
.counters { bottom:calc(126px + var(--reserve-side) + var(--sab)); }
.side { top:45%; gap:16px 12px; transform:translateY(-45%); }
.side { top:clamp(155px,27dvh,320px); transform:none; }
@media (max-height:950px) and (min-width:721px) {
  .side { --u:1; }
  .side { top:clamp(120px,20dvh,190px); }
  .counters { bottom:calc(56px + var(--reserve-side) + var(--sab)); }
}
.side-btn { width:calc(66px * var(--u)); height:calc(66px * var(--u)); }
.side-btn[aria-label="Game Settings"] .side-label { white-space:normal; text-align:center; width:80px; bottom:-17px; font-size:11px; }
.counters .side-btn[aria-label="Game Settings"] { width:calc(66px * var(--u));height:calc(66px * var(--u));margin-top:12px; }
.match-badges { font:600 14px/1.3 var(--font); color:#fff; padding:3px 8px; background:#16273e65; border-radius:8px; }
.turn-tools { display:flex; gap:9px; pointer-events:auto; }
.obby-return { position:absolute; right:calc(12px + var(--sar)); bottom:calc(24px + var(--sab)); pointer-events:auto; }
.card-guidance { color:#413413; padding:12px 15px; border:2px solid #dfbd59; border-radius:16px; background:#fff4c9; font:600 16px/1.4 var(--font); }
.card-art-button { display:grid; place-items:center; border:0; background:transparent; padding:0; cursor:pointer; border-radius:16px; transition:transform .15s; }
.card-art-button:hover,.card-art-button:focus-visible { transform:translateY(-3px) rotate(-3deg); outline:3px solid #739bee; outline-offset:4px; }
.collection-card .item-desc { flex:1; }
.collection-card.selected { box-shadow:0 0 0 4px #6b8efa,0 6px var(--ink); }
.card-turn-tray { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
.card-turn-tray .collection-card { min-height:0; padding:14px 8px; gap:9px; position:relative; }
.card-turn-tray .item-name { font-size:18px; }
.card-turn-tray .card-art { width:70px; height:90px; }
.card-turn-tray .item-desc { position:absolute; z-index:2; left:-3px; right:-3px; bottom:calc(100% - 6px); margin:0; padding:10px; background:#fff; color:#26344f; border:3px solid #6b8efa; border-radius:16px; box-shadow:0 4px 12px #17294e44; font-size:14px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s; }
.card-turn-tray .collection-card:hover .item-desc,.card-turn-tray .collection-card:focus-within .item-desc,.card-turn-tray .collection-card.selected .item-desc { opacity:1; visibility:visible; }
.card-turn-tray .pill { display:none; }
.card-turn-tray .btn { font-size:15px; padding:8px; }
.card-turn-tray .item-count { font-size:19px; }
.panel-account { width:min(500px,100%); }
.account-form { display:flex; flex-direction:column; gap:16px; }
.account-status { padding:14px; border:2px solid #9bb8e3; border-radius:18px; color:#253b62; background:#e5f0ff; font:600 16px/1.4 var(--font); }
.account-status.error { color:#852d35; border-color:#df9ba1; background:#fff0f0; }
.account-help { margin:0; color:#4a5a71; font:500 14px/1.5 var(--font); }
.recovery-box { display:grid; gap:9px; padding:14px; margin:12px 0; border:3px solid #6255ad; border-radius:18px; background:#f3eaff; color:#29324d; font:600 15px/1.4 var(--font); }
.recovery-box[hidden] { display:none; }
.recovery-box p { margin:0; }
.recovery-code { display:block; overflow-wrap:anywhere; padding:9px; border:2px dashed #8063be; border-radius:9px; background:#fff; font:700 15px/1.4 ui-monospace,monospace; user-select:all; }
.account-menu-button { margin-top:10px; }
.collection-badge { position:absolute; right:-3px; top:-5px; width:15px; height:15px; border-radius:50%; background:#ff3348; border:3px solid #fff; box-shadow:0 2px #243149; }
.plist { border:3px solid #384963; border-radius:21px; background:#e9f3ffef; box-shadow:0 5px #24314988,inset 0 3px #fff; color:#26354b; }
.plist-head { padding:11px 12px; color:#fff; background:linear-gradient(#7bafff,#567ed6); text-shadow:0 2px #335492; border-bottom:3px solid #384963; }
.plist-rows { max-height:min(46dvh,380px); overflow:auto; padding:5px; }
.plist-row { min-height:39px; margin:4px 0; padding:5px 7px; color:#26354b; background:#fff; border:2px solid #c3d3e9; border-radius:14px; text-shadow:none; gap:4px; }
.plist-row.me { background:#fff4bf; border-color:#e1c15a; }
.plist-row.me .pl-text { color:#655218; }
.plist-row.turn { background:#d2fbdc; border-color:#40ac68; box-shadow:inset 0 2px #fff; }
.pl-avatar { display:grid; place-items:center; flex:none; width:24px; height:26px; border:2px solid #627caf; border-radius:9px; background:linear-gradient(#b9e1ff,#bba7fa); font:700 15px var(--font); color:#2b416d; }
.pl-wins { background:#e9f0ff; border-radius:8px; font-size:13px; padding:3px 0; }
.hint-answer { padding:7px 14px; border:3px solid #4c3e12; border-radius:12px; background:#fff5bf; color:#332b13; font:700 21px var(--font); user-select:text; pointer-events:auto; }
.combo-meter { font:700 20px var(--font); color:#ffbf52; }
.chat-entry { display:flex; gap:4px; }
.chat-entry .chat-input { flex:1; min-width:0; }
.emote-button { color:#fff; background:#213249a6; border:1px solid #8babc4; border-radius:8px; font-size:22px; padding:0 8px; cursor:pointer; }
.chat-box { position:relative; }
.emote-grid { position:absolute; z-index:80; bottom:40px; left:0; width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:8px; background:#eef6ff; border:2px solid #435e77; border-radius:8px; box-shadow:0 8px 24px #0008; }
.emote-grid .seg-btn { font-size:12px; padding:5px; }
.teleport-overlay { position:absolute; inset:0; z-index:90; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; background:radial-gradient(circle,#7656c7,#191836); color:white; font:700 28px var(--font); pointer-events:auto; animation:travel-fade 1.4s both; }
.teleport-spinner { width:75px; height:75px; border:9px solid #ffffff35; border-top-color:#b6f7fa; border-radius:50%; animation:spin .65s linear infinite; }
@keyframes travel-fade { 0%,100% { opacity:0; } 25%,75% { opacity:1; } }
.respawn-flash { position:absolute; inset:0; background:#202039; z-index:80; animation:travel-fade .45s both; pointer-events:none; }
.heart-hit { animation:damage-shake .25s linear; }
.heart-hit::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 80px 20px #ff253b80; pointer-events:none; animation:fade-in .12s alternate 2; }
@keyframes damage-shake { 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
@media (pointer:coarse) {
  .view-button { left:auto; right:calc(12px + var(--sar)); top:calc(62px + var(--sat)); bottom:auto; font-size:11px; padding:5px 8px; }
}
@media (max-width:720px) {
  .profile-columns { grid-template-columns:1fr; gap:12px; }
  .panel-profile { height:calc(100dvh - 64px); }
  .profile-summary { display:grid; grid-template-columns:90px 1fr; gap:6px 10px; }
  .profile-summary { padding:8px; border-radius:20px; }
  .profile-summary .avatar-stage { grid-row:span 2; width:85px; height:100px; }
  .profile-summary .stats { grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .profile-summary .stat { padding:4px; }
  .profile-summary .stat-label { font-size:10px; }
  .profile-summary .stat-value { font-size:13px; }
  .profile-columns { grid-template-rows:auto minmax(0,1fr); }
  .profile-tabs { display:flex; }
  .profile-tabs .seg-btn { flex:1; }
  .host-notice.restricted { font-size:18px; }
  .panel-bar { flex-wrap:wrap; }
  .match-badges { font-size:11px; }
  .hud-top { top:calc(100px + var(--sat)); }
  .hud-bottom { gap:7px; }
  .turn-row { gap:6px; max-width:100%; }
  .mistakes { gap:3px; }
  .mistake { width:24px; height:24px; border-width:2px; }
  .timer { width:66px; height:66px; }
  .timer-num { font-size:22px; }
  .heart { width:28px; height:28px; }
  .side { top:42%; gap:15px 9px; }
  .side-btn { width:42px; height:42px; border-radius:12px; }
  .side-label { font-size:10px; }
  .side-btn[aria-label="Game Settings"] .side-label { width:58px; font-size:9px; }
  .turn-tools .btn { font-size:13px; padding:6px 11px; }
  .hint-answer { font-size:17px; }
  .card-turn-tray { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .obby-return { bottom:calc(110px + var(--sab)); right:calc(12px + var(--sar)); font-size:13px; }
  .account-form .seg-btn { padding:9px 12px; }
}
@media (pointer:coarse) and (max-width:720px), (pointer:coarse) and (max-height:520px) {
  .counters { bottom:auto; }
}
.kb-open .view-button { display:none; }
@media (prefers-reduced-motion:reduce) {
  .teleport-overlay,.teleport-spinner,.heart-hit,.card-reveal .card-art { animation:none; }
}

.card-target-notice { position:fixed; z-index:2500; top:105px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 24px); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; padding:12px 16px; border:3px solid #275164; border-radius:20px; background:#d9fff4; color:#163e44; pointer-events:auto; box-shadow:0 5px #18334666; }
.card-target-notice strong { font:600 17px var(--font); }

.w-roulette-soul { font:44px sans-serif; filter:drop-shadow(0 0 8px #d8eaff); pointer-events:none; }
.w-roulette-soul::after { content:''; display:block; margin:-8px auto 0; width:25px; height:55px; background:linear-gradient(#e8f0ffbb,transparent); border-radius:50% 50% 80% 80%; }
.roulette-hud.danger .roulette-clock { color:#ff839e; text-shadow:0 0 16px #df2c6f; }
.roulette-cinematic .roulette-hud,.roulette-cinematic .side,.roulette-cinematic .counters { opacity:0;pointer-events:none; }
.roulette-cinematic::before,.roulette-cinematic::after { content:'';position:fixed;left:0;right:0;height:9vh;background:#05030a;z-index:5000;pointer-events:none; }
.roulette-cinematic::before { top:0; } .roulette-cinematic::after { bottom:0; }
.roulette-intro { animation-duration:7s; }
@media (prefers-reduced-motion:reduce) { .roulette-intro { animation:none; } }
.roulette-cinematic .chat,.roulette-cinematic .plist { opacity:0;pointer-events:none; }

.roulette-wager {width:110px;min-width:0;border:2px solid #bd93ef;border-radius:12px;background:#211831;color:#fff;padding:9px;font:600 17px Fredoka,sans-serif;pointer-events:auto}
.roulette-wager-field {display:flex;align-items:center;gap:6px;color:#e7d8ff;font:700 14px Fredoka,sans-serif}
.roulette-odds {display:inline-flex;position:relative;flex-direction:column;align-items:center;color:#fff;margin:10px auto 25px;min-width:165px}
.risk-readout {display:flex;flex-direction:column;align-items:center;padding:4px 20px 11px;border:2px solid var(--risk-color,#30af65);border-radius:15px;background:linear-gradient(color-mix(in srgb,var(--risk-color) 45%,#271c34),#291b34);box-shadow:0 4px #130b24,0 0 14px var(--risk-color,#30af65)}
.risk-readout strong {font:900 30px/1 Fredoka,sans-serif;color:#fff4f2}
.risk-readout span {font:700 12px/1.3 Fredoka,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.risk-tag {position:absolute;top:calc(100% - 8px);left:50%;transform:translateX(-50%) rotate(-4deg);display:flex;align-items:center;gap:5px;white-space:nowrap;border:2px solid #176b43;border-radius:9px;padding:3px 7px;background:#b4f9c3;color:#154d37;box-shadow:0 3px #0d3e2e;font:800 13px Fredoka,sans-serif}
.risk-tag strong {font-size:17px}.risk-tag small {font-size:10px;letter-spacing:.03em}.risk-tag span {display:none}
.mode-group-title {margin:10px 0 1px;text-align:left;color:#fff4c0;font:900 20px Fredoka,sans-serif;text-shadow:0 2px #492b62}
.game-ui.roulette-shock::before {content:'';position:fixed;inset:0;z-index:101;pointer-events:none;animation:roulette-shock .68s ease-out both}
@keyframes roulette-shock {0%{opacity:0;box-shadow:inset 0 0 0 #22051b}16%{opacity:1;box-shadow:inset 0 0 140px 45px #8e1539}29%{opacity:.75;box-shadow:inset 0 0 95px 35px #17041a}100%{opacity:0;box-shadow:inset 0 0 0 #17041a}}
.roulette-heartbeat {position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0;box-shadow:inset 0 0 60px 15px #ec153c,inset 0 0 12px 3px #ff6682}
.game-ui.damage-hit::after {content:'';position:fixed;inset:0;z-index:100;pointer-events:none;animation:damage-border .8s ease-out both}
@keyframes damage-border {0%,20%{box-shadow:inset 0 0 90px 22px #ed1638;opacity:1}100%{box-shadow:inset 0 0 25px 4px #ed1638;opacity:0}}
.w-roulette-soul {font-size:76px!important;filter:drop-shadow(0 0 18px #d6c0ff)}
.w-roulette-soul::after {width:42px!important;height:85px!important}
@media(max-width:600px){.roulette-actions{flex-wrap:wrap;justify-content:center}.roulette-wager{width:90px}.roulette-odds{font-size:14px}}

.w-meteor-reward {padding:5px 12px;border:2px solid #f5d780;border-radius:14px;background:#30203bdd;color:#ffe99d;font:700 22px Fredoka,sans-serif;white-space:nowrap;filter:drop-shadow(0 0 9px #ffc04c)}

.quick-card-tray { position:fixed; z-index:65; bottom:105px; right:18px; width:min(380px,calc(100vw - 28px)); max-height:65dvh; overflow:auto; pointer-events:auto; padding:14px; border:2px solid #aa91ed; border-radius:18px; background:#171a2bf5; color:white; box-shadow:0 10px 40px #0008; }
.quick-card-tray[hidden] { display:none; }
.quick-card-heading { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.quick-card-heading strong { font-size:18px; }
.quick-card-help { color:#d9d2e9; }
.quick-card-tray p { font-size:14px; line-height:1.4; margin:10px 0; }
.quick-card-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.quick-card { display:flex; flex-direction:column; align-items:center; border:2px solid #6f668c; border-radius:10px; background:#29263f; color:white; padding:5px; cursor:pointer; }
.quick-card svg { width:100%; height:62px; }
.quick-card strong { font-size:12px; }
.quick-card.selected { border-color:#ebc177; background:#453958; }
.quick-card:disabled { opacity:.45; cursor:default; }
.quick-card-targets { display:flex; flex-wrap:wrap; gap:6px; }
.quick-card-targets p { width:100%; }
.quick-card-queue { color:#eac889; }
.quick-card-history { margin:8px 0; color:#d9d2e9; }
.quick-card-history p { margin:4px 0; }
.quick-card-style { display:flex; gap:6px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:8px; }

@media (max-height:720px) and (min-width:721px) { .side { --u:.8; top:110px; gap:15px 10px; } .counters { --u:.8; bottom:25px; } }
.pet-abilities { display: grid; gap: 7px; width: 100%; }
.pet-ability-row { display: grid; gap: 2px; font-size: 14px; line-height: 1.25; }
.pet-ability-row strong { font-size: 11px; letter-spacing: .04em; color: #7043b0; }
.pet-ability-row span { overflow-wrap: anywhere; }
.pet-stat-tooltip .pet-ability-row strong { font-size: 11px; color: #d8bcff; }
.presence-overlay { position: fixed; inset: 0; z-index: 20000; background: #15233666; touch-action: none; }
.presence-card { position: absolute; box-sizing: border-box; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 4px solid #202124; border-radius: 24px; background: #fff8e3; text-align: center; box-shadow: 0 8px 0 #202124, 0 12px 40px #0005; }
.presence-card h2 { margin: 0 0 10px; color: white; }
.presence-card p { margin: 0 0 12px; font-size: 16px; line-height: 1.3; color: #36445b; }
.presence-clock { margin: 0 auto 14px; }
.presence-confirm { width: 100%; }
.presence-card.urgent .timer-ring { stroke: #ff4056; }

.tide-shark-credit { position:absolute; bottom:calc(8px + env(safe-area-inset-bottom)); right:10px; font-size:10px; color:#e9fffa; pointer-events:auto; text-shadow:0 1px 3px #123; }

/* The chat reserves its measured height so it cannot cover the sidebar. */
.side { top:var(--sidebar-top, calc(250px + var(--sat))); transform:none; }
.word-form.invalid .word-field { box-shadow:inset 0 4px 0 #00000012,0 5px 0 var(--ink),0 0 0 5px #ff3c56cc; }
.word-form.answer-bounce { animation:answer-bounce .38s ease; }
@keyframes answer-bounce { 0%,100% { transform:translateY(0); } 30% { transform:translateY(-9px); } 65% { transform:translateY(3px); } }
@media(prefers-reduced-motion:reduce) { .word-form.answer-bounce { animation:none; } }

/* On a portrait phone, leave the mode's question above the sidebar too. */
@media(max-width:720px) and (min-height:521px) {
 .side { top:max(var(--sidebar-top, 76px), calc(28dvh + var(--sat))); }
}

.animation-tester { position:absolute;z-index:60;right:14px;top:190px;width:min(290px,calc(100vw - 28px));display:grid;gap:9px;padding:13px;border:3px solid var(--ink);border-radius:15px;background:#fff1d8;color:#293647;font:600 14px var(--font);pointer-events:auto; }
.animation-tester[hidden]{display:none}.animation-tester input{width:100%}.animation-tester .host-tools{display:flex;gap:8px}

.pet-dictionary-button { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.pet-dictionary-button .icon { width:28px; height:28px; }
.pet-dictionary[hidden] { display:none!important; }
.trade-countdown { padding:10px; border:2px solid #208749; border-radius:12px; background:#dcffe8; text-align:center; font-size:22px; }

/* Chat controls share the input surface, including idle/focus states. */
.chat-entry { gap:0; background:rgba(16,22,32,.42); border-radius:0 0 10px 10px; overflow:hidden; transition:opacity .6s,background .2s; }
.chat-entry .chat-input,.chat-entry .emote-button { color:#fff; background:transparent; border:0; border-radius:0; opacity:1; }
.chat-entry .emote-button { display:grid; place-items:center; padding:0 10px; }
.chat-entry:focus-within { background:rgba(16,22,32,.72); }
.chat:not(.awake) .chat-entry:not(:focus-within) { opacity:.45; }
.chat:not(.awake) .chat-entry .chat-input:not(:focus) { opacity:1; }
.emote-button:hover { color:#d6f5ff; }
.hatch-pet-art { width:min(200px,34dvh); height:min(200px,34dvh); margin:auto; animation:emoji-bounce 1.3s ease-in-out infinite; }
.hatch-pet-art .model-thumb { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; filter:drop-shadow(0 6px 3px #0003); }


/* Classic stays the default. Alternatives change row structure and density. */
.pl-player-mark,.plist-columns { display:none; }
.pl-waiting { font-size:16px; opacity:.5; }
.plist[data-style="compact"] { width:256px; color:white; background:#14232bcc; border:0; border-radius:4px; box-shadow:0 4px 12px #0003; }
.plist[data-style="compact"] .plist-head { padding:8px 10px; color:#d9f2ef; background:#0b191dcc; border-bottom:1px solid #ffffff25; text-shadow:none; font-size:13px; }
.plist[data-style="compact"] .plist-rows { padding:0; }
.plist[data-style="compact"] .plist-row { grid-template-columns:minmax(0,1fr) auto 24px; padding:5px 9px; min-height:29px; margin:0; border:0; border-top:1px solid #ffffff17; border-radius:0; background:transparent; color:#eff9ff; font-size:13px; }
.plist[data-style="compact"] .plist-row.me { background:#ffe99b13; }
.plist[data-style="compact"] .plist-row.me .pl-text { color:#ffe9a0; }
.plist[data-style="compact"] .plist-row.turn { background:#65e3a521; box-shadow:inset 3px 0 #71eda8; }
.plist[data-style="compact"] .pl-wins { padding:0; color:#c8dddd; background:transparent; font-size:12px; }

.plist[data-style="portrait"] { width:270px; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
.plist[data-style="portrait"] .plist-head { background:linear-gradient(#7deb8b,#39bd60); border:3px solid #253d33; border-radius:14px; margin-bottom:7px; padding:10px 12px; color:#163923; text-shadow:none; box-shadow:0 3px #253d3355; }
.plist[data-style="portrait"] .plist-rows { padding:0 0 4px; }
.plist[data-style="portrait"] .plist-row { position:relative; grid-template-columns:minmax(0,1fr) 31px; margin:7px 0; padding:8px 10px 8px 57px; min-height:61px; border:3px solid #31454b; border-radius:14px; background:#f6fdfff2; color:#253a43; gap:3px 6px; box-shadow:0 3px #20333b55; }
.plist[data-style="portrait"] .pl-name { grid-column:1; font-size:14px; }
.plist[data-style="portrait"] .pl-player-mark { display:grid; place-items:center; position:absolute; left:7px; top:8px; width:40px; height:40px; border:2px solid #374e58; border-radius:11px; background:#b2dce7; overflow:hidden; }
.pl-player-mark .avatar-preview { width:100%;height:100%; }
.plist[data-style="portrait"] .pl-status { grid-column:1; min-height:18px; }
.plist[data-style="portrait"] .pl-wins { grid-column:2; grid-row:1/3; align-self:center; display:grid; place-items:center; min-height:30px; border:2px solid #cfab4b; border-radius:50%; padding:3px; background:#ffe9a0; color:#6c5112; }
.plist[data-style="portrait"] .plist-row.me { border-color:#c5a544; background:#fff3c8; }
.plist[data-style="portrait"] .plist-row.turn { border-color:#289550; background:#d8fbe0; box-shadow:0 3px #185c3580; }
.plist[data-style="ribbon"] { width:263px; background:none; border:none; border-radius:0; box-shadow:none; overflow:visible; }
.plist[data-style="ribbon"] .plist-head { border:0; background:none; color:#fff; text-shadow:0 2px 3px #173e41; padding:10px 4px; }
.plist[data-style="ribbon"] .plist-rows { padding:2px 4px 6px 0; }
.plist[data-style="ribbon"] .plist-row { position:relative; grid-template-columns:minmax(0,1fr) auto 26px; min-height:47px; margin:9px 4px 9px 35px; padding:8px 7px 8px 18px; border:2px solid #29516a; border-radius:16px 16px 16px 4px; background:#edf9ffef; color:#234052; gap:4px; box-shadow:2px 3px #133c5b77; }
.plist[data-style="ribbon"] .pl-player-mark { position:absolute; left:-34px; top:3px; display:grid; place-items:center; width:43px; height:43px; border:3px solid #2b5875; border-radius:50%; background:#86b9d1; overflow:hidden; box-shadow:0 3px #173d5780; }
.plist[data-style="ribbon"] .pl-name { font-size:12px; }
.plist[data-style="ribbon"] .pl-heart { width:13px; height:13px; }
.plist[data-style="ribbon"] .pl-wins { background:#d2e8f2; color:#24465c; padding:3px 0; }
.plist[data-style="ribbon"] .plist-row.me { background:#fff5cf; border-color:#9f8739; }
.plist[data-style="ribbon"] .plist-row.turn { background:#c8f3dd; border-color:#247b54; box-shadow:2px 3px #12583677; }
@media(max-width:720px),(max-height:520px) { .plist[data-style="compact"] { width:230px; } .plist[data-style="portrait"] { width:235px; } .plist[data-style="ribbon"] { width:240px; } }

/* Keep every profile stat inside its own scrollable card. */
.profile-summary{overflow-y:auto;scrollbar-gutter:stable;min-width:0;}
.profile-summary>*{flex-shrink:0;}
.admin-pet-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0;}
.admin-pet-toolbar .field{flex:1;min-width:140px;}
.admin-pet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:12px;}
.admin-pet-card{border:3px solid var(--pet-color,#9b80cf);border-radius:18px;background:linear-gradient(145deg,#fff,#f0edff);padding:12px;min-width:0;box-shadow:0 4px #332b4930;}
.admin-pet-heading{display:flex;align-items:center;gap:10px;}
.admin-pet-heading .model-thumb{width:74px;height:74px;flex:none;}
.admin-pet-heading strong{display:block;}
.admin-pet-heading small{color:#596171;font-size:12px;}
.admin-pet-tiers{display:flex;gap:8px;margin-top:12px;}
.admin-pet-tier{flex:1;min-width:0;text-align:center;border:2px solid #bec5d7;border-radius:12px;padding:7px 4px;background:#fff;}
.admin-pet-tier[data-tier="2"]{border-color:#70baff;background:#edf8ff;}
.admin-pet-tier[data-tier="3"]{border-color:#e2bc45;background:#fff9de;}
.admin-pet-tier .field{width:100%;padding:5px;text-align:center;margin:4px 0;font-size:17px;}
.admin-pet-stepper{display:flex;gap:4px;justify-content:center;}
.admin-pet-stepper .btn{flex:1;min-width:0;padding:3px 6px;}