* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #6f6f6f; -webkit-text-size-adjust: 100%; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; color: #4a4a4a; }
a { color: #be0000; } a:hover { color: #8a0000; }
img { display: block; }
button { font: inherit; }

/* ---------- Shared: background + red wave ---------- */
.bg { position: absolute; inset: 0; background: #6f6f6f url('../assets/bg-landscape-clean.webp') center/cover no-repeat; }
.wave { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .75; }
.wave svg { position: absolute; top: 0; left: 0; width: 400%; height: 100%; }
.wave path { fill: none; stroke: #c25555; stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* ---------- Tablet (input) ---------- */
.tablet { position: relative; width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.frame { position: relative; width: 100vw; height: 100vh; height: 100dvh; container-type: inline-size; overflow: hidden; }
@media (orientation: landscape) {
  .frame { width: min(100vw, 75vh); height: min(133.33vw, 100vh); }
}
.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: block; }
.abs { position: absolute; }

.img-btn { position: absolute; left: 0; right: 0; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .12s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.img-btn img { width: 100%; }
.img-btn:active { transform: scale(.96); }
.img-btn:disabled { opacity: .5; cursor: default; }
.img-btn:focus-visible { outline: 2px solid #be0000; outline-offset: 4px; }

.start-kicker { top: 11%; left: 43%; width: 33.5%; text-align: right; font-size: 4.2cqw; line-height: 1.1; letter-spacing: .04em; }
.start-logo { top: 18%; left: 22%; width: 56%; }
.start-ring { top: 32%; left: 50%; width: 66%; margin-left: -33%; opacity: .9; pointer-events: none; }
.start-product { top: 39%; left: 21%; width: 58%; }
.start-product img { width: 100%; }
.btn-start { top: 83%; width: max(43%, 200px); }

.write-logo { top: 3.5%; right: 7%; width: 29%; }
.write-title { top: 18%; left: 0; right: 0; text-align: center; font-size: 4.6cqw; line-height: 1.2; letter-spacing: .03em; }
.write-box { top: 28.5%; left: 3%; right: 3%; height: 55.5%; background: #be0000; border-radius: 2.8cqw; display: flex; flex-direction: column; padding: 3.2cqw; }
@media (orientation: landscape) {
  .frame:has(.screen[data-screen="write"].is-active) { overflow: visible; }
  .write-box { left: calc(50% - 46vw); right: calc(50% - 46vw); }
}
.write-box textarea { flex: 1; width: 100%; background: transparent; border: 0; outline: none; resize: none; color: #fff; font: inherit; font-size: max(4.6cqw, 16px); line-height: 1.35; }
.write-tabs { display: flex; gap: 1.6cqw; align-items: center; margin-bottom: 2cqw; }
.write-tab { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); border: 0; border-radius: 99px; padding: 1.2cqw 3.4cqw; font: inherit; font-size: max(2.8cqw, 13px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.write-tab.is-active { background: #fff; color: #be0000; }
.write-clear { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.6); color: #fff; border-radius: 99px; padding: 1cqw 3cqw; font: inherit; font-size: max(2.6cqw, 12px); cursor: pointer; }
.write-clear + .write-clear { margin-left: 0; }
.write-clear[hidden], .write-pad[hidden], .write-box textarea[hidden] { display: none; }
.write-pad { flex: 1; min-height: 0; width: 100%; touch-action: none; cursor: crosshair; border: 1px dashed rgba(255,255,255,.35); border-radius: 1.6cqw; }
.write-box textarea::placeholder { color: rgba(255,255,255,.6); }
.write-counter { align-self: flex-end; color: rgba(255,255,255,.75); font-size: 2.6cqw; }
.btn-next { top: 85.5%; width: max(42%, 200px); }

.thanks-logo { top: 7%; left: 35%; width: 30%; }
.thanks-lips { top: 31%; left: 24%; width: 52%; }
.thanks-lips img { width: 100%; }
.thanks-text { top: 64%; left: 0; right: 0; text-align: center; font-size: 6.4cqw; letter-spacing: .12em; }
.btn-home { top: 83%; width: max(42%, 200px); }

/* ---------- Comment screen ---------- */
.wall { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #b7b7b7; }
.wall .bg { inset: -3%; }
.ring { position: absolute; top: 28%; left: 50%; width: 44vh; margin-left: -22vh; opacity: .9; pointer-events: none; }
.wall-head { position: absolute; top: 6%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2vh; }
.wall-title { text-align: center; font-size: min(2.7vw, 3.8vh); letter-spacing: .04em; }
.wall-logo { display: flex; justify-content: center; }
.wall-logo img { width: min(22vw, 31vh); }
.wall-product { position: absolute; top: 33%; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.wall-product img { width: min(30vw, 42vh); }

.slot { position: absolute; width: 15.8%; z-index: 1; transition: transform .8s cubic-bezier(.45,0,.2,1), left .9s ease, top .9s ease, width .9s ease; }
.slot[hidden] { display: none; }
.card { position: relative; min-height: calc(6vw * var(--s,1)); background: #fff; border: 1px solid rgba(190,40,40,.55); border-radius: calc(0.8vw * var(--s,1)); box-shadow: 0 0 calc(0.9vw * var(--s,1)) rgba(236,48,19,.45); padding: calc(1.5vw * var(--s,1)) calc(1.1vw * var(--s,1)) calc(1vw * var(--s,1)); transition: background .7s ease, box-shadow .9s ease; }
.card-quote { position: absolute; top: calc(-1vw * var(--s,1)); left: calc(1.1vw * var(--s,1)); display: flex; gap: calc(0.35vw * var(--s,1)); pointer-events: none; }
.card-quote i { width: calc(0.55vw * var(--s,1)); height: calc(1.6vw * var(--s,1)); background: #e8202a; transform: skewX(-28deg); transition: background .5s; }
.card-text { color: #2b2b2b; font-size: max(calc(1vw * var(--s,1)), 9px); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; overflow-wrap: anywhere; transition: color .5s; }

/* spotlight */
.slot.is-spot { z-index: 5; transform: scale(var(--spot, 1.45)); transition: transform .9s cubic-bezier(.34,1.45,.5,1); }
.slot.is-spot .card { background: #be0000; box-shadow: 0 0 2.4vw rgba(236,48,19,.85); }
.slot.is-spot .card-quote i { background: #fff; }
.slot.is-spot .card-text { color: #fff; -webkit-line-clamp: 12; }

.card-img { display: block; }
.card-img img { display: block; width: 100%; max-height: calc(14vw * var(--s,1)); object-fit: contain; transition: filter .5s; }
.slot.is-spot .card-img img { filter: brightness(0) invert(1); }

/* ---------- Preloader ---------- */
.preload { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #fff; transition: opacity .6s ease, visibility .6s; }
.preload.is-done { opacity: 0; visibility: hidden; }
.preload img { width: min(30vw, 42vh); animation: preload-pulse 1.6s ease-in-out infinite; }
@keyframes preload-pulse { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }
.card-text[hidden], .card-img[hidden] { display: none; }

/* new-card loader */
.card-loader { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: calc(0.5vw * var(--s,1)); }
.slot.is-loading .card-loader { display: flex; }
.slot.is-loading .card-text, .slot.is-loading .card-img { visibility: hidden; }
.card-loader i { width: calc(0.55vw * var(--s,1)); height: calc(0.55vw * var(--s,1)); border-radius: 50%; background: #e8202a; animation: loader-dot 1s ease-in-out infinite; }
.card-loader i:nth-child(2) { animation-delay: .15s; }
.card-loader i:nth-child(3) { animation-delay: .3s; }
@keyframes loader-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- Comment screen: portrait / mobile ---------- */
@media (orientation: portrait) {
  .wall-head { top: 3.5%; gap: 1.6vw; }
  .wall-title { font-size: 4.2vw; }
  .wall-logo img { width: 34vw; }
  .wall-product { top: 21%; }
  .wall-product img { width: 56vw; }
  .ring { top: 17%; width: 76vw; margin-left: -38vw; }
  .slot { width: 44%; }
  .card { min-height: 0; border-radius: calc(2vw * var(--s,1)); padding: calc(4vw * var(--s,1)) calc(3vw * var(--s,1)) calc(2.6vw * var(--s,1)); }
  .card-quote { top: calc(-2.4vw * var(--s,1)); left: calc(3vw * var(--s,1)); gap: calc(0.9vw * var(--s,1)); }
  .card-quote i { width: calc(1.3vw * var(--s,1)); height: calc(3.6vw * var(--s,1)); }
  .card-text { font-size: max(calc(3vw * var(--s,1)), 8px); -webkit-line-clamp: 3; }
  .slot.is-spot { transform: scale(var(--spot, 1.18)); }
  .slot.is-spot .card-text { -webkit-line-clamp: 12; }
  .card-img img { max-height: calc(22vw * var(--s,1)); }
  .card-loader i { width: calc(1.5vw * var(--s,1)); height: calc(1.5vw * var(--s,1)); }
  .card-loader { gap: calc(1.2vw * var(--s,1)); }
}

/* push test modal */
.ping-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.45); animation: ping-in .4s ease; }
.ping-modal[hidden] { display: none; }
.ping-modal.is-hiding { opacity: 0; transition: opacity .4s ease; }
.ping-card { background: #fff; border-radius: 1.4vw; padding: 3vw 4vw; text-align: center; box-shadow: 0 0 3vw rgba(236,48,19,.55); animation: ping-pop .5s cubic-bezier(.2,.8,.2,1); max-width: 90vw; }
.ping-check { width: 6vw; height: 6vw; min-width: 56px; min-height: 56px; margin: 0 auto 1.4vw; border-radius: 50%; background: #e8202a; color: #fff; display: grid; place-items: center; font-size: 3.4vw; line-height: 1; }
.ping-title { font-size: max(2vw, 18px); color: #2b2b2b; }
.ping-sub { margin-top: .6vw; font-size: max(1.2vw, 13px); color: #777; }
@keyframes ping-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ping-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (orientation: portrait) { .ping-card { padding: 7vw 8vw; border-radius: 3vw; } .ping-title { font-size: 5vw; } .ping-sub { font-size: 3.4vw; } .ping-check { font-size: 8vw; width: 16vw; height: 16vw; margin-bottom: 3vw; } }