.record-theme-rummikub{--record-color:#75d9ad}
/* Record cosmetics share the existing equipped entrance lifecycle. */
.record-effect-avatar{position:relative;isolation:isolate;overflow:visible!important}
.record-effect-avatar>.pg-avatar{position:relative;z-index:2}
.record-effect-player{border-color:color-mix(in srgb,var(--record-color,#91cdf0) 55%,#3f4251)!important}
.record-theme-minesweeper{--record-color:#65dfb5}.record-theme-applegame{--record-color:#ff8298}.record-theme-tetris{--record-color:#6edfff}.record-theme-poker{--record-color:#c6a3ff}.record-theme-sevenpoker{--record-color:#ffc26d}.record-theme-wordchain{--record-color:#b5a6ff}.record-theme-yutnori{--record-color:#e8bc81}.record-theme-worldmarble{--record-color:#6ad9f2}.record-theme-fighter{--record-color:#ff8a9a}.record-theme-territory{--record-color:#7ce0b5}.record-theme-skybattle{--record-color:#9fc9ff}
.record-fx.entry-fx-layer{z-index:1;inset:-14% -36% -5%;color:var(--record-color);overflow:visible;pointer-events:none;contain:layout style}
.record-fx svg{display:block;width:100%;height:100%;overflow:visible}
.record-fx-stage{position:absolute;inset:4% 3%;opacity:.22;pointer-events:none}
.record-fx-arrival{position:absolute;display:block;left:var(--x);top:var(--y);width:var(--w);height:26%;opacity:0;transform:translate(-50%,-50%) rotate(var(--angle));transform-origin:center;pointer-events:none}
.record-effect-enter .record-fx-arrival{animation:record-arrive 1.65s cubic-bezier(.18,.65,.28,1) both;animation-delay:calc(var(--i)*75ms + var(--record-enter-elapsed,0ms))}
.record-effect-enter .record-fx-tetris .record-fx-arrival{animation-name:record-stack;animation-duration:1.6s}
.record-effect-enter .record-fx-minesweeper .record-fx-arrival{animation-name:record-reveal}
.record-effect-enter .record-fx-applegame .record-fx-arrival{animation-name:record-apple-drop}
.record-effect-enter .record-fx-poker .record-fx-arrival{animation-name:record-card-fan}
.record-effect-enter .record-fx-sevenpoker .record-fx-arrival{animation-name:record-card-turn}
.record-effect-enter .record-fx-wordchain .record-fx-arrival{animation-name:record-letter-link}
.record-effect-enter .record-fx-yutnori .record-fx-arrival{animation-name:record-yut-toss}
.record-effect-enter .record-fx-worldmarble .record-fx-arrival{animation-name:record-city-build}
.record-effect-enter .record-fx-territory .record-fx-arrival{animation-name:record-claim}
/* 격투 대전: 타격 섬광이 사방에서 찍히듯 들어와 흔들린다. */
.record-effect-enter .record-fx-fighter .record-fx-arrival{animation-name:record-impact}
@keyframes record-impact{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(var(--angle))}18%{opacity:1;transform:translate(-50%,-50%) scale(.85) rotate(var(--angle))}26%{transform:translate(-46%,-50%) scale(1.05) rotate(var(--angle))}34%{transform:translate(-54%,-50%) scale(1) rotate(var(--angle))}80%{opacity:.85;transform:translate(-50%,-50%) scale(1) rotate(var(--angle))}100%{opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(var(--angle))}}
.record-effect-enter .record-fx-skybattle .record-fx-arrival{animation-name:record-launch}
.record-effect-enter .record-fx-stage{animation:record-stage-enter 2.5s ease-out both;animation-delay:var(--record-enter-elapsed,0ms)}
.record-fx-float{position:absolute;top:42%;width:20%;height:23%;opacity:.92;animation:record-idle-float 4s ease-in-out infinite;animation-delay:var(--float-phase);pointer-events:none}
.record-fx-side-0{left:0;rotate:-10deg}.record-fx-side-1{right:0;rotate:12deg}
.record-fx-tetris .record-fx-side-0{width:23%;top:39%}.record-fx-tetris .record-fx-side-1{width:24%;top:54%;rotate:15deg}
.record-fx-poker .record-fx-float,.record-fx-sevenpoker .record-fx-float{animation-name:record-idle-card}
.record-fx-wordchain .record-fx-float{top:33%}.record-fx-wordchain .record-fx-side-1{top:56%}
.record-fx-yutnori .record-fx-float{top:50%;animation-name:record-idle-yut}
.record-fx-worldmarble .record-fx-side-1{top:57%}.record-fx-territory .record-fx-float{rotate:45deg}
.record-fx-skybattle .record-fx-float{animation-name:record-idle-flight}.record-fx-skybattle .record-fx-side-1{top:54%}
.record-fx-sum{position:absolute;left:50%;top:7%;translate:-50% 0;opacity:0;color:#fff1ce;font-size:clamp(10px,1.5vw,22px);font-weight:900}
.record-effect-enter .record-fx-sum{animation:record-sum 2.5s ease both;animation-delay:var(--record-enter-elapsed,0ms)}
.player.record-effect-player .player-avatar-slot{overflow:visible!important}
.my-room-effect-item.record-effect-item>span:first-child{border-color:var(--record-color);color:var(--record-color);font-size:22px}
.my-room-effect-item .record-effect-description{display:block;margin-top:5px;color:#b6c9dc;font-size:11px;line-height:1.5;font-style:normal;white-space:normal}
.my-room-effect-item.record-effect-item small{color:#b4a3e1;line-height:1.4;white-space:normal}
.my-room-record-effect-guide{grid-column:1/-1;margin:0 0 8px;padding:10px 12px;border:1px solid #6c63824d;border-radius:10px;color:#bcb0de;background:#1f2129;font-size:12px;line-height:1.5}
@keyframes record-stack{0%{opacity:0;transform:translate(-50%,-320%) rotate(var(--angle))}18%{opacity:1}42%,77%{opacity:.95;transform:translate(-50%,-50%) rotate(var(--angle))}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle))}}
@keyframes record-reveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}25%,78%{opacity:.8;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes record-apple-drop{0%{opacity:0;transform:translate(-50%,-190%) rotate(-30deg)}30%{opacity:1;transform:translate(-50%,-60%) rotate(10deg)}45%,78%{opacity:.85;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(-50%,-80%) scale(.7)}}
@keyframes record-card-fan{0%{opacity:0;transform:translate(-50%,30%) rotate(0) scale(.3)}32%,78%{opacity:.95;transform:translate(-50%,-50%) rotate(var(--angle)) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) rotate(var(--angle)) scale(1)}}
@keyframes record-card-turn{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) rotateY(90deg)}32%,78%{opacity:.92;transform:translate(-50%,-50%) rotate(var(--angle)) rotateY(0)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) rotateY(0)}}
@keyframes record-letter-link{0%{opacity:0;transform:translate(-80%,-50%) scale(.6)}25%,76%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-30%,-60%) scale(.8)}}
@keyframes record-yut-toss{0%{opacity:0;transform:translate(-50%,80%) rotate(-150deg)}28%{opacity:1;transform:translate(-50%,-90%) rotate(160deg)}53%,78%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--angle))}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle))}}
@keyframes record-city-build{0%{opacity:0;transform:translate(-50%,0) scaleY(.15)}32%,80%{opacity:.95;transform:translate(-50%,-50%) scaleY(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleY(1)}}
@keyframes record-claim{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%,78%{opacity:.75;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes record-launch{0%{opacity:0;transform:translate(-50%,130%) rotate(var(--angle))}30%,65%{opacity:.95;transform:translate(-50%,-50%) rotate(var(--angle))}100%{opacity:0;transform:translate(-50%,-240%) rotate(var(--angle))}}
@keyframes record-arrive{0%{opacity:0}30%,75%{opacity:1}100%{opacity:0}}
@keyframes record-stage-enter{0%{opacity:0;transform:scale(.7)}28%{opacity:.7;transform:scale(1)}100%{opacity:.22;transform:scale(1)}}
@keyframes record-sum{0%,30%{opacity:0;transform:scale(.7)}45%,78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes record-idle-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12%) rotate(6deg)}}
@keyframes record-idle-card{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10%) rotate(8deg)}}
@keyframes record-idle-yut{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-8%) rotate(9deg)}}
@keyframes record-idle-flight{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(7%,-17%) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.record-fx *{animation:none!important}.record-fx-float{opacity:.9}.record-fx-stage{opacity:.22}.record-fx-arrival,.record-fx-sum{opacity:0}}

/* A readable inventory with its own scroll area; decorations never enlarge rows. */
#my-room-effects{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;align-content:start}
#my-room-effects.has-record-effect-item{grid-template-columns:repeat(2,minmax(0,1fr))}
.my-room-effect-item.record-effect-item{grid-template-columns:40px minmax(0,1fr) auto;align-items:start;gap:12px;padding:16px}
.my-room-effect-item.record-effect-item>span:first-child{width:38px;height:38px;border-radius:10px;background:#24262f;letter-spacing:0}
.my-room-effect-item.record-effect-item>span:nth-child(2){min-width:0;gap:5px;word-break:keep-all;overflow-wrap:break-word}
.my-room-effect-item.record-effect-item b{font-size:15px;line-height:1.4}
.my-room-effect-item.record-effect-item small{font-size:11px}
.my-room-effect-item.record-effect-item em{align-self:center;opacity:1;font-size:12px;white-space:nowrap}
.my-room-effect-item.record-effect-item .record-effect-description{margin-top:3px;font-size:12px;line-height:1.6;color:#a6b9cc}
.my-room-avatar-card #my-room-avatar.record-effect-avatar>.pg-avatar{max-width:100%;max-height:100%}
html.mobile-layout .player-avatar-slot.record-effect-avatar>.pg-avatar{width:100%;height:100%;max-width:100%;max-height:100%}
html.mobile-layout .player-avatar-slot.record-effect-avatar .record-fx{inset:-5% -20%}
@media(max-width:1000px){#my-room-effects.has-record-effect-item{grid-template-columns:1fr}}
@media(max-width:720px){.my-room-effect-item.record-effect-item{padding:13px;gap:10px}.my-room-record-effect-guide{font-size:11px}}
/* Game icons in the ranking are labels; the selectable avatar cosmetic owns animation. */
#game-record-list .record-crown{animation:none}

#my-room-effects.has-record-effect-item{grid-auto-rows:max-content}
.my-room-effect-item.record-effect-item{height:auto;min-height:max-content}
@media(min-width:721px) and (max-width:1000px) and (orientation:landscape){
  #my-room-avatar-panel.has-record-effect-avatar{display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:0 8px;align-items:center;padding:8px 12px}
  #my-room-avatar-panel #my-room-avatar.record-effect-avatar{position:relative;grid-row:1/3;grid-column:1;width:56px;height:82px;max-height:100%;top:auto;left:auto;margin:0 auto;align-self:center}
  #my-room-avatar-panel #my-room-avatar.record-effect-avatar>.pg-avatar{width:100%;height:100%}
  #my-room-avatar-panel.has-record-effect-avatar>b{grid-column:2;grid-row:1;align-self:end;margin:0;text-align:left}
  #my-room-avatar-panel.has-record-effect-avatar>small{grid-column:2;grid-row:2;align-self:start;margin:0;text-align:left}
}