/* «Чемодан»: вид. Общие токены — в shared/base.css. Всё под .g-chemodan. */

.g-chemodan {
  --accent: #8a5a36;
  --on-accent: #ffffff;
  --leather: #8a5a36;
  --leather-edge: #5a3720;
  --leather-st: #e6cfa8;
  --lid: #9a6843;
  --lining: #efe8da;
  --lining-edge: #b9a98c;
  --pocket: #e5dcc9;
  --pocket-edge: #cfc2aa;
  --metal: #c9b27a;
  --metal-edge: #7b6733;
  --stitch: rgba(255, 255, 255, 0.7);
  --p0: #d4745a; --p0d: #8f3f2a;
  --p1: #dcaa3c; --p1d: #81600f;
  --p2: #7fae6f; --p2d: #3c6732;
  --p3: #4a9aa2; --p3d: #1d5a61;
  --p4: #6b8fd1; --p4d: #2c4a88;
  --p5: #a874b4; --p5d: #673675;
  --star: #b87400;
  --star-off: #9db0c2;
  --warn: #b3261e;
}
:root[data-theme='dark'] .g-chemodan {
  --accent: #e3b98e;
  --on-accent: #1c1108;
  --leather: #a06f46;
  --leather-edge: #5d3d22;
  --leather-st: #ead7b5;
  --lid: #b07c50;
  --lining: #2a313b;
  --lining-edge: #566272;
  --pocket: #323b47;
  --pocket-edge: #44505e;
  --metal: #d9c58d;
  --metal-edge: #7b6733;
  --stitch: rgba(255, 255, 255, 0.6);
  --p0: #d4745a; --p0d: #1d0d08;
  --p1: #dcaa3c; --p1d: #1f1604;
  --p2: #7fae6f; --p2d: #0e1f0a;
  --p3: #4a9aa2; --p3d: #06191b;
  --p4: #6b8fd1; --p4d: #0a1530;
  --p5: #a874b4; --p5d: #1a0a1f;
  --star: #f0b43c;
  --star-off: #5d7084;
  --warn: #ff8f86;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .g-chemodan {
    --accent: #e3b98e; --on-accent: #1c1108; --leather: #a06f46; --leather-edge: #5d3d22; --leather-st: #ead7b5; --lid: #b07c50;
    --lining: #2a313b; --lining-edge: #566272; --pocket: #323b47; --pocket-edge: #44505e; --metal: #d9c58d; --metal-edge: #7b6733;
    --stitch: rgba(255, 255, 255, 0.6);
    --p0d: #1d0d08; --p1d: #1f1604; --p2d: #0e1f0a; --p3d: #06191b; --p4d: #0a1530; --p5d: #1a0a1f;
    --star: #f0b43c; --star-off: #5d7084; --warn: #ff8f86;
  }
}

.g-chemodan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
}
.g-chemodan [hidden] { display: none !important; }

/* ---------- шапка: общая (.ghd в base.css) ---------- */

.g-chemodan .cm-head b { font-weight: 650; }
.g-chemodan .ghd-l.cm-count { display: block; }

/* ---------- чемодан ---------- */

.g-chemodan .cm-area {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  place-items: center;
  touch-action: none;
}
.g-chemodan .cm-case { position: relative; flex: none; }
.g-chemodan .cm-body-box { position: absolute; inset: 0; }
.g-chemodan .cm-body-svg,
.g-chemodan .cm-lid-svg { display: block; overflow: visible; }

.g-chemodan .cm-handle { fill: none; stroke: var(--leather-edge); stroke-linecap: round; stroke-linejoin: round; }
.g-chemodan .cm-shell { fill: var(--leather); stroke: var(--leather-edge); stroke-linejoin: round; }
.g-chemodan .cm-shell-st { fill: none; stroke: var(--leather-st); stroke-linecap: round; opacity: 0.85; }
.g-chemodan .cm-lining { fill: var(--lining); stroke: var(--lining-edge); }
.g-chemodan .cm-pocket { fill: var(--pocket); stroke: var(--pocket-edge); }
.g-chemodan .cm-blk { fill: var(--leather); stroke: var(--leather-edge); }
.g-chemodan .cm-blk-in { fill: none; stroke: var(--leather-st); stroke-dasharray: 3 2.5; opacity: 0.8; }
.g-chemodan .cm-stud { fill: var(--metal); stroke: var(--metal-edge); }
.g-chemodan .cm-latch { fill: var(--metal); stroke: var(--metal-edge); }
.g-chemodan .cm-lid-face { fill: var(--lid); stroke: var(--leather-edge); stroke-linejoin: round; }
.g-chemodan .cm-lid-face2 { fill: none; stroke: var(--leather-edge); opacity: 0.35; }

.g-chemodan .cm-grid { position: absolute; touch-action: none; }

/* крышка закрывается сверху вниз */
.g-chemodan .cm-lid {
  position: absolute;
  left: 0;
  width: 100%;
  transform-origin: 50% 0;
  transform: scaleY(0);
  pointer-events: none;
}
.g-chemodan .cm-case.closing .cm-lid { animation: cmLid 0.75s cubic-bezier(0.5, 0, 0.25, 1) forwards; }
.g-chemodan .cm-case.closed .cm-lid { transform: none; }
@keyframes cmLid {
  0% { transform: scaleY(0); }
  85% { transform: scaleY(1.03); }
  100% { transform: scaleY(1); }
}

/* ---------- вещи ---------- */

.g-chemodan .cm-pc {
  position: absolute;
  pointer-events: none;
}
.g-chemodan .cm-pc svg { display: block; overflow: visible; }
.g-chemodan .cm-pc .cm-body { fill: var(--pk); stroke: var(--pkd); stroke-linejoin: round; }
.g-chemodan .cm-pc .cm-st { fill: none; stroke: var(--stitch); stroke-linecap: round; }
.g-chemodan .c0 { --pk: var(--p0); --pkd: var(--p0d); }
.g-chemodan .c1 { --pk: var(--p1); --pkd: var(--p1d); }
.g-chemodan .c2 { --pk: var(--p2); --pkd: var(--p2d); }
.g-chemodan .c3 { --pk: var(--p3); --pkd: var(--p3d); }
.g-chemodan .c4 { --pk: var(--p4); --pkd: var(--p4d); }
.g-chemodan .c5 { --pk: var(--p5); --pkd: var(--p5d); }

.g-chemodan .cm-pc.placed.pop { animation: cmPop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes cmPop { 0% { transform: scale(1.08); } 100% { transform: none; } }
.g-chemodan .cm-pc.placed.warn { animation: cmWarn 1.1s ease-in-out; }
@keyframes cmWarn {
  0%, 100% { filter: none; }
  25%, 75% { filter: drop-shadow(0 0 0 var(--warn)) drop-shadow(0 0 3px var(--warn)); transform: scale(1.04); }
  50% { filter: none; transform: none; }
}
.g-chemodan .cm-pc.ghost { opacity: 0.45; z-index: 0; }
.g-chemodan .cm-pc.ghost .cm-st { display: none; }

.g-chemodan .cm-layer { position: absolute; inset: 0; pointer-events: none; touch-action: none; z-index: 5; }
.g-chemodan .cm-float { left: 0; top: 0; transform-origin: 50% 50%; filter: drop-shadow(0 8px 10px var(--shadow)); will-change: transform; }
.g-chemodan .cm-float.bad { opacity: 0.8; }
.g-chemodan .cm-float.bad .cm-body { stroke: var(--warn); }

/* ---------- подсказка-строка ---------- */

.g-chemodan .cm-tip {
  line-height: 20px;
  height: 22px;
  white-space: nowrap;
  transition: opacity 0.25s;
}
.g-chemodan .cm-tip.gone { opacity: 0; }
.g-chemodan .cm-tip.warn { color: var(--warn); font-weight: 600; }

/* ---------- лоток ---------- */

.g-chemodan .cm-tray {
  position: relative;
  flex: none;
  margin: 0 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  touch-action: none;
}
.g-chemodan .cm-slot {
  position: absolute;
  border-radius: 12px;
  cursor: grab;
}
.g-chemodan .cm-slot.empty { border: 1.5px dashed var(--line); cursor: default; }
.g-chemodan .cm-slot .cm-pc.spin { animation: cmSpin 0.2s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes cmSpin { from { transform: rotate(-90deg); } to { transform: none; } }

/* ---------- низ: общая линия кнопок (.cbar), здесь только значок ---------- */

.g-chemodan .ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .g-chemodan .cm-pc.placed.pop,
  .g-chemodan .cm-slot .cm-pc.spin,
  .g-chemodan .cm-case.closing .cm-lid { animation: none; }
  .g-chemodan .cm-case.closing .cm-lid { transform: none; }
  .g-chemodan .cm-tip { transition: none; }
}