:root{
  --rose:#fff6fb;
  --rad:12px;
  --gap:1.8rem;
  --cardW:clamp(56px,14vw,90px);
  --gap-r:clamp(8px,2vw,18px);
}

.spread-board{
  grid-area:content;
  background:var(--card);
  border-radius:var(--rad);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  padding:var(--gap);
  padding-bottom:calc(var(--gap) + 3.2rem);
  display:grid;
  grid-template-columns:repeat(var(--cols,6),var(--cardW));
  grid-auto-rows:calc(var(--cardW)*1.54);
  gap:var(--gap-r);
  justify-content:center;
  margin-bottom:var(--gap);
  overflow-x:auto;
}
.card-slot{
  background:var(--rose);
  position:relative;
  border-radius:var(--rad);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:.25s;
  aspect-ratio:65/100;
}
.card-slot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.card-slot::after{
  content:'';
  position:absolute;
  left:50%;
  top:calc(100% + .6rem);
  transform:translateX(-50%);
  font-size:1.3rem;
  white-space:nowrap;
  color:var(--muted);
  pointer-events:none;
}
.card-slot.selected{background:var(--accent);transform:translateY(-4px);z-index:20}
.card-slot.selected::after{
  content:attr(data-title);
  color:var(--accent);
  background:var(--card);
  padding:.2rem .8rem;
  border-radius:var(--rad);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  font-weight:600;
}
body.tarobot .spread-board .card-slot[data-spread-position]{cursor:pointer}
body.tarobot .spread-board .card-slot[data-spread-position]::after{content:none!important}
body.tarobot .spread-board .card-slot[data-spread-position]:hover{border-color:rgba(124,243,196,.55)}
body.tarobot .spread-board .card-slot[data-spread-position]:focus-visible{outline:2px solid var(--tarobot-accent);outline-offset:3px}
.spread-position-source{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.spread-position-popover{
  position:fixed;
  z-index:2147483000;
  max-width:min(320px,calc(100vw - 24px));
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(124,243,196,.42);
  background:rgba(7,9,18,.96);
  color:#f7faf9;
  box-shadow:0 12px 34px rgba(0,0,0,.42);
  font:700 14px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  text-align:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px) scale(.98);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.spread-position-popover.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
body.tarobot[data-tarobot-theme="light"] .spread-position-popover{
  background:rgba(255,255,255,.98);
  color:#111827;
  border-color:rgba(47,125,140,.36);
  box-shadow:0 12px 30px rgba(15,23,42,.18);
}
.spinner{width:40px;height:40px;border:4px solid #ccc;border-top-color:var(--prim);border-radius:50%;animation:spin 1s linear infinite;margin:2rem auto}
.spinner-inline{
  width:1em;
  height:1em;
  flex:0 0 auto;
}
.result-header{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;
}
@media (min-width:768px){
  .result-header{gap:.75rem}
}
@keyframes spin{to{transform:rotate(360deg)}}
.slot-desc{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 14px rgba(0,0,0,.05);padding:2.2rem;line-height:1.65;color:var(--muted)}
.slot-desc h2{font-size:2.4rem;color:var(--txt);margin-bottom:.8rem;font-weight:700}
.ask-box{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 14px rgba(0,0,0,.05);padding:2.2rem;line-height:1.65}
.ask-box h2{font-size:2.4rem;color:var(--txt);margin-bottom:1rem;font-weight:700}
.query-form{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.query-form textarea{flex:1 1 320px;min-height:56px;padding:1rem 1.2rem;border:1px solid #ccc;border-radius:var(--rad);resize:vertical;font-family:inherit;font-size:1.6rem}
.query-form button{flex:0 0 160px;padding:1.2rem;border:0;border-radius:var(--rad);font-weight:700;background:var(--accent);color:#fff;cursor:pointer;transition:.25s}
.query-form button:disabled{opacity:.6;cursor:not-allowed}
.query-form button:hover:enabled{background:#a60077}
@media(max-width:480px){
  .query-form textarea{flex:1 1 100%}
  .query-form button{flex:1 1 100%}
}

@media(max-width:480px){
  :root{--cardW:clamp(43px,10vw,72px)}
}

#board{
  display:grid;
  gap:1rem;
  justify-content:center;
  padding:1rem env(safe-area-inset-right) 1rem env(safe-area-inset-left);
  box-sizing:border-box;
}

#board img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

@media (min-width:768px){
  #board{gap:1.25rem;}
}

@media (min-width:1440px){
  #board{gap:1.5rem;}
}