html{
  height: auto; 
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #00001a; 
  color: #333;
  font-family:"Noto Sans JP","Segoe UI", "Meiryo", "Hiragino Sans", sans-serif;
}
body{
  width:100%;
  min-height: 100vh;
  margin: 0;
  padding:0 0 32px 0;
  background-image: 
    linear-gradient(#22222211 2px, transparent 1px),
    linear-gradient(90deg, #22222211 2px, transparent 1px),
    linear-gradient(#22222211 1px, transparent 1px),
    linear-gradient(90deg, #22222211 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 5px 5px, 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:root {
  --p3-blue: #00e5ff;
  --p3-dark-blue: #002a32;
}
h1{
  position: relative;
  font-size: 2rem;
  width:70vw;
  text-align:center;
  font-weight:900;
  color: #fff;
  letter-spacing: 4px;
  padding: 0 60px;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  background: 
    repeating-linear-gradient(transparent 0, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px),
    linear-gradient(90deg, transparent 0%, rgba(0, 229, 255, 0.2) 30%, rgba(0, 229, 255, 0.2) 70%, transparent 100%);
  text-shadow: 
    0 0 10px rgba(255,255,255,0.8),
    2px 2px 0px var(--p3-dark-blue),
    0 0 25px var(--p3-blue);
}
h1::before,
h1::after {
  content: "";
  position: absolute;
  background: var(--p3-blue);
  box-shadow: 0 0 15px var(--p3-blue);
}
#table {
  position: relative; width:70vw; height:29vh;padding:80px 0;margin-bottom:32px; perspective: 2000px;
  background-color:rgba(0, 0, 0, 0.9);
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  border: 2px solid #00f2ff;
  border-radius:0;
  box-shadow:0 0 20px rgba(0, 242, 255, 0.6), inset 0 0 30px rgba(0, 242, 255, 0.3);
  perspective: 2000px;
  overflow: visible; 
}
#table::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity:0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.card {
    --card-w: 16vh;
    --card-h: 28vh;
    --off-x: 0vh;
    --off-y: 0vh;
    --gap-x: 20vh;
    --gap-y: 0vh;
    --move-x: 0vh;
    --move-y: calc(-28vh - 6px);
    --f-x: 0vh;
    --f-y: 24vh;
    position: absolute;
    width: var(--card-w); height: var(--card-h);
    left: 50%; top: 50%;
    margin-left: calc(var(--card-w) / -2);
    margin-top: calc(var(--card-h) / -2);
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.5s;
    transform-style: preserve-3d;
    border-radius: 8px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), -1px -1px 1px rgba(255, 255, 255, 0.1);
    --dir: 0;
    will-change: transform;
}
.cardbtn {
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%, -50%);
}
.card-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 8px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.back { background-image: url("https://img.itaxes.co.jp/img/tarots.png"); transform: rotateY(0deg);
box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05), 
    inset 0 0 15px rgba(200, 190, 170, 0.2); }
.front { transform: rotateY(180deg); background-color: #eee; }
.marker-shadow { box-shadow: 0 1px 0px rgba(255, 255, 255, 0.8); }
.center-pile { transform: translate(var(--off-x), 0) rotate(0deg); }
.p-target { 
    transform: translate(
        calc(var(--off-x) + (var(--dir) * var(--gap-x))), 
        calc(var(--off-y) + (var(--dir) * var(--gap-y)))
    ) rotate(0deg); 
}
.up { 
    transform: translate(
        calc(var(--off-x) + (var(--dir) * var(--gap-x)) + var(--move-x)), 
        calc(var(--off-y) + (var(--dir) * var(--gap-y)) + var(--move-y))
    ) !important;
    transition: transform 0.4s ease-out !important;
}
.flip { 
    transform: translate(
        calc(var(--off-x) + (var(--dir) * var(--gap-x)) + var(--f-x)), 
        calc(var(--off-y) + (var(--dir) * var(--gap-y)) + var(--f-y))
    ) rotateY(180deg) scale(1.2) !important; 
    box-shadow: 0 3px 5px rgba(0,0,0,0.6); 
}
#controls { margin:0 0 64px 0; z-index: 10000; position: relative;display:grid;justify-items: center;}
button {
  position: relative;
  padding: 16px 64px;
  background-color: #000;
  color: #fff;
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: visible;
  z-index: 1;
}
button::before {
  content: "";
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border: 4px solid #00f2ff;
  border-style: double;
  box-shadow: 0 0 15px #00f2ff, inset 0 0 10px #00f2ff;
  transition: inherit;
  z-index: -1;
}
button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  opacity:0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
button:hover {
  text-shadow: 0 0 5px #00f2ff;
}
button:hover::before {
  top: -10px; left: -10px; right: -10px; bottom: -10px;
  box-shadow: 0 0 30px #00f2ff, 0 0 10px #ffffff, inset 0 0 20px #00f2ff;
  border-color: #ffffff;
}
.text {
  box-sizing:border-box;
  width:70vw;
  margin:0 16px 32px 16px;
  padding:32px 48px;
  position: relative;
  background: 
    radial-gradient(
      circle at center, 
      #fcf8e8 20%, 
      #f5e6b3 60%, 
      #e6c87e 100%
    );
  &::before {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04; 
    pointer-events: none;
    z-index: 1;
  }
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.8),
    0 5px 15px rgba(0, 0, 0, 1),
    inset 0 0 80px rgba(184, 134, 11, 0.2),
    inset 0 0 15px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 3px;
}
.title {
  color: #2b2010;
  font-size: 1.5rem;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom: 2px double rgba(139, 69, 19, 0.3);
  position: relative;
  text-align:center;
  font-weight:700;
  z-index: 2;
}
#tarot{display:none;}
.com{
  color: #3e2f1a;
  line-height: 2.1;
  font-size: 1rem;
  margin: 0;
  position: relative;
  z-index: 2;
  text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.3);
  display:grid;
  grid-template-columns:40px 1fr;
}
.tarot{
  color: #3e2f1a;
  line-height: 2.1;
  font-size: 1rem;
  margin:16px 0 0 0;
  position: relative;
  z-index: 2;
  text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.3);
  display:grid;
  gap:16px;
  grid-template-columns:1fr 1fr;
}
.image{display:grid;gap:16px;align-items:start;justify-items:center;font-weight:700;font-size:1.5rem;grid-template-rows:525px 1fr;}
.rcom{text-align:left;width:100%;}
.mainb{display:grid;gap:32px;width:auto;justify-items:center;align-items:center;padding-bottom:32px;}
.select-wrapper {
  position: relative;
  display: inline-block;
  background-color: #000;
  box-sizing: border-box;
  margin-bottom:16px;
}
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 16px 80px 16px 24px; 
  background-color: #000;
  color: #fff;
  border: 1px solid #fff; 
  border-radius: 0;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.select-wrapper::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-right: 2px solid #00f2ff;
  border-bottom: 2px solid #00f2ff;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select-wrapper:hover select {
  background-color: #fff;
  color: #000;
  border-color: #fff;
}
.select-wrapper:hover::after {
  border-color: #000;
}
#controls button{width:600px;}
#controls select{width:610px;}
footer {
  width: 100%;
  margin:32px auto 0 auto;
  padding:0 0 32px 0;
  border-top: 1px solid #aaa;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  list-style: none;
  margin-bottom: 30px;
}
.footer-links a {
  font-size: 0.9rem;
  color:#fff;
  text-decoration: none;
  font-weight: 500;
}
.footer-links a:hover {
  color:#efefef;
}
.copyright{text-align:center;}
@media screen and (max-width: 1199px) {
  .tarot{grid-template-columns:1fr;}

}
@media screen and (max-width: 767px) {
  .card {
      --card-w: 12vh;
      --card-h: 21vh;
      --off-x: -30vw;
      --gap-x: 0vh;
      --gap-y: 25vh;
      --move-x: 55vw;
      --move-y: 0vh;
      --f-x: 45vw;
      --f-y: 0vh;
  }
  #table {width:calc(100% - 16px);;height:22vh;}
  button{padding: 16px 32px;font-size: 1rem;}
  .select-wrapper select{padding:16px 50px 16px 32px;font-size: 1rem;}
  h1{font-size:1.25rem;width:100%;padding:0;}
  .text{margin:0 8px 32px 8px;width:calc(100% - 16px);padding:32px 16px;}
  .image{font-size:1.25rem;}
  .title{font-size:1.25rem;}
  .com{font-size:1rem;}
  .tarot{grid-template-columns:1fr;}
  #controls button{width:calc(100vw - 30px);}
  #controls select{width:calc(100vw - 20px);}
}
1