@import "./styles/tokens.css";
@import "./styles/base.css";

@font-face {
  font-family: 'RodinHimawari';
  src: url('font/FOT-RodinHimawari Pro UB.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


:root {
  --layout-max-width: 1080px;
  --container-gap: var(--space-5);
  --controls-padding-y: var(--space-5);
  --controls-padding-x: var(--space-4);
  --controls-gap: var(--space-4);
  --control-max-width: 320px;
  --button-max-width: 320px;
  --select-arrow-offset: 20px;
  --select-arrow-offset-alt: 14px;
  --select-arrow-size: 6px;
  --select-arrow-baseline: 2px;
  --preview-tile-min: calc(var(--space-6) * 4);
  --preview-radius: var(--radius-2);
  --preview-stripe-width: 80px;
  --accent-stripe-height: 6px;
  --result-min-height: calc(var(--space-6) * 7);
  --result-stripe-width: 140px;
  --portrait-scale-preview: 1.18;
  --portrait-scale-hero: 1.08;
  --hero-max-width: calc(var(--space-6) * 10 + var(--space-4));
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-line-strong);
  color: var(--color-surface);
  border-bottom: 2px solid var(--color-accent);
  box-shadow: var(--shadow-2);
}



.top-bar h1 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--font-weight-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app {
  width: min(var(--layout-max-width), 100%);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--controls-gap);
  padding: var(--controls-padding-y) var(--controls-padding-x);
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-line-strong);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
}

.control-group {
  width: 100%;
  max-width: var(--control-max-width);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.control-label {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: left;
}

select {
  border: 2px solid var(--color-line-strong);
  border-radius: var(--radius-0);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - var(--select-arrow-offset)) calc(50% + var(--select-arrow-baseline)), calc(100% - var(--select-arrow-offset-alt)) calc(50% + var(--select-arrow-baseline));
  background-size: var(--select-arrow-size) var(--select-arrow-size);
  background-repeat: no-repeat;
}

select:focus {
  border-color: var(--color-accent);
}

#rollBtn {
  font-size: clamp(20px, 3vw, 28px);
  padding: var(--space-4) var(--space-6);
  min-height: 72px;
  width: min(100%, 360px);
}

.primary-btn {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-2);
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
}

.primary-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.secondary-btn {
  background: var(--color-surface);
  border-color: var(--color-text);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
}

.secondary-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.secondary-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.danger-btn {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-1);
}

.danger-btn:hover {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.danger-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-1);
  border: 2px solid var(--color-accent);
  color: var(--color-accent-ink);
  background: rgba(236, 24, 37, 0.16);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section-title {
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: var(--space-2) 0;
  color: var(--color-text-inverse);
}

.preview-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--preview-tile-min), 1fr));
}

.preview-item {
  position: relative;
  background: var(--color-surface);
  border: 2px solid var(--color-line-strong);
  border-radius: var(--preview-radius);
  box-shadow: var(--shadow-2);
  padding: var(--space-3);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.preview-item::before {
  content: "";
  position: absolute;
  inset: var(--space-1) auto auto var(--space-1);
  height: var(--accent-stripe-height);
  width: var(--preview-stripe-width);
  background: var(--color-accent);
  transform: skewX(-12deg);
  box-shadow: var(--shadow-2);
}

.preview-item:hover,
.preview-item:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

.custom-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--preview-tile-min), 1fr));
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--space-2);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.custom-grid .preview-item {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--easing-snap), filter var(--dur-fast), opacity var(--dur-fast);
}

.custom-grid .preview-item:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.custom-grid .preview-item--inactive {
  filter: grayscale(1) saturate(0.5) brightness(0.7);
  opacity: 0.55;
}

.custom-grid .preview-item--inactive::before {
  opacity: 0;
}

.custom-preview-item {
  min-height: var(--preview-tile-min);
}


.portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--preview-radius) - var(--space-1));
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: #000000;
}

.portrait-frame .portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
  transform: scale(var(--portrait-scale-preview, 1.18));
  transition: transform var(--dur-fast) var(--easing-snap);
}

.preview-item:hover .portrait,
.preview-item:focus-within .portrait {
  transform: scale(calc(var(--portrait-scale-preview, 1.18) * 1.04));
}

.result {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  perspective: 1200px;
  perspective-origin: center bottom;
}

.result-card {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-line-strong);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  min-height: var(--result-min-height);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transform-origin: bottom center;
  transform: rotateX(0deg) translateY(0);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, box-shadow, opacity;
}

.result-card::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  height: var(--accent-stripe-height);
  width: var(--result-stripe-width);
  background: var(--color-accent);
  transform: skewX(-12deg);
  box-shadow: var(--shadow-2);
}


.result-card.slam-in {
  animation: hinge-in var(--dur-hinge) var(--easing-snap) both;
}

.slam-in .portrait-frame.hero {
  animation: hinge-portrait var(--dur-hinge) var(--easing-snap) both, hero-drop var(--dur-hinge) var(--easing-snap) both;
}

.slam-in .hero-details {
  animation: hinge-text var(--dur-hinge) var(--easing-snap) both;
}

.result-card.empty {
  justify-content: center;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.roll-hero {
  display: grid;
  grid-template-columns: minmax(0, var(--hero-max-width)) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  width: 100%;
}

.portrait-frame.hero {
  width: 100%;
  border-radius: var(--radius-2);
  border: 2px solid var(--color-line-strong);
  box-shadow: var(--shadow-3);
  transform-origin: bottom center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.portrait-frame.hero .portrait {
  transform: scale(var(--portrait-scale-hero, 1.08));
}

.roll-hero .hero-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  will-change: transform, opacity;
}

.roll-hero .hero-label {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
}

.custom-class-editor {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--color-line-inverse);
  border-radius: var(--radius-2);
  padding: var(--space-5);
  margin: 0;
  margin-top: var(--space-4);
}

.custom-class-editor[hidden] {
  display: none !important;
}

.custom-class-editor:not([hidden]) {
  display: block;
}

.editor-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.editor-footer {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.editor-actions .primary-btn,
.editor-actions .secondary-btn {
  min-width: 180px;
}

#customName {
  width: 100%;
  padding: var(--space-2);
}

.custom-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--preview-tile-min), 1fr));
}

.custom-grid .preview-item {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--easing-snap), filter var(--dur-fast), opacity var(--dur-fast);
}

.custom-grid .preview-item:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.custom-grid .preview-item--inactive {
  filter: grayscale(1) saturate(0.5) brightness(0.7);
  opacity: 0.55;
}

.custom-grid .preview-item--inactive::before {
  opacity: 0;
}

.custom-preview-item {
  min-height: var(--preview-tile-min);
}

.preview-empty {
  padding: var(--space-5);
  border-radius: var(--radius-2);
  border: 2px dashed var(--color-line-inverse);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted-inverse);
  text-align: center;
}


@keyframes hinge-in {
  0% {
    opacity: 0;
    transform: rotateX(45deg) translateY(24px) scale(0.97);
    box-shadow: var(--shadow-1);
  }
  55% {
    opacity: 1;
    transform: rotateX(-3deg) translateY(-2px) scale(1.01);
    box-shadow: var(--shadow-2);
  }
  80% {
    transform: rotateX(1.5deg) translateY(1px) scale(0.995);
    box-shadow: var(--shadow-2);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) translateY(0) scale(1);
    box-shadow: var(--shadow-3);
  }
}

@keyframes hinge-portrait {
  0% {
    transform: scale(calc(var(--portrait-scale-hero, 1.08) * 1.04)) rotateX(10deg);
  }
  55% {
    transform: scale(calc(var(--portrait-scale-hero, 1.08) * 1.01)) rotateX(-3deg);
  }
  80% {
    transform: scale(calc(var(--portrait-scale-hero, 1.08) * 0.995)) rotateX(1.5deg);
  }
  100% {
    transform: scale(var(--portrait-scale-hero, 1.08)) rotateX(0deg);
  }
}

@keyframes hero-drop {
  0% {
    transform: translateZ(32px) translateY(-18px) rotate(-4deg);
  }
  55% {
    transform: translateZ(-10px) translateY(4px) rotate(3deg);
  }
  80% {
    transform: translateZ(4px) translateY(-2px) rotate(-1deg);
  }
  100% {
    transform: translateZ(0) translateY(0) rotate(0deg);
  }
}

@keyframes hinge-text {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  55% {
    opacity: 1;
    transform: translateY(-3px);
  }
  80% {
    transform: translateY(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-card.slam-in,
  .slam-in .portrait-frame.hero,
  .slam-in .hero-details {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  :root {
    --controls-padding-y: var(--space-4);
    --controls-padding-x: var(--space-4);
    --controls-gap: var(--space-3);
  }

  .roll-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .roll-hero .hero-details {
    align-items: center;
  }
}

@media (max-width: 600px) {
  :root {
    --preview-tile-min: calc(var(--space-6) * 3);
  }

  .app {
    padding: var(--space-4) var(--space-3) var(--space-5);
  }

  .section-title {
    text-align: center;
  }

  .controls,
  .result-card {
    padding: var(--space-4);
  }

  .editor-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .editor-footer {
    gap: var(--space-2);
  }

  .controls-meta {
    justify-content: center;
  }
}