:root{--layer-menu:5;--layer-focus:6;--layer-notice:10}
.header{max-width:none;padding:14px 4vw}
.header nav button{border-radius:8px;border:0;position:relative}
.header nav button:hover{background:transparent;color:var(--ink)}
.header nav button.active::after{content:"";position:absolute;bottom:2px;height:1px;background:var(--gold);left:18px;right:18px}
main{max-width:none;padding:0 4vw;min-height:calc(100svh - 160px)}
#reading{padding:22px 0 0}
.reading-intro{display:flex;align-items:baseline;gap:20px;margin-bottom:20px}
.reading-intro h1{font-size:25px;letter-spacing:.02em}.reading-intro p{font-size:12px}
.reading-layout{display:flex;flex-direction:column;gap:16px}
.reading-controls{display:grid;grid-template-columns:minmax(350px,1fr) minmax(240px,1fr);gap:12px 36px;padding:0 0 16px}
.reading-controls label,.field-heading{font-size:12px;margin:0 0 8px}
.field-heading{display:flex;align-items:center;justify-content:space-between}
.question-field .field-heading label{margin:0}.question-field label span{float:none;margin-left:8px;font-size:10px}
.reading-controls .reverse-option{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--muted);cursor:pointer}
.reading-controls input[type=checkbox]{width:16px;height:16px;min-height:16px;margin:0;padding:0;accent-color:var(--gold);cursor:pointer}
.spread-field,.question-field{min-width:0}
.question-field textarea{height:56px;min-height:56px;max-height:120px;resize:vertical;font-size:13px;padding:15px}
#traditional-options{display:flex;gap:8px}
.preset-choice{flex:1;border:1px solid var(--line);border-radius:9px;min-height:56px;padding:8px 12px;text-align:left}
.preset-choice b{font-size:13px;font-weight:500;display:block}.preset-choice small{font-size:10px;display:block}
.preset-choice[aria-pressed=true]{border-color:var(--gold);background:oklch(.85 .07 85/.08)}
.preset-choice[aria-pressed=true] b{color:var(--gold)}
#custom-selection{font-size:12px;color:var(--gold);margin-top:8px;overflow-wrap:anywhere}
#more-spreads{position:relative}#more-spreads summary{display:flex;gap:5px;align-items:center;color:var(--muted);cursor:pointer;list-style:none;border-radius:6px}
#more-spreads summary::-webkit-details-marker{display:none}#more-spreads summary:hover{color:var(--gold)}
button svg,summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}
summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.spread-menu{position:absolute;right:0;top:30px;width:min(380px,84vw);padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);box-shadow:0 12px 35px oklch(.1 .02 273/.4);z-index:var(--layer-menu);max-height:60svh;overflow:auto}
.spread-menu>p{font-size:11px;padding:0 8px 8px}.spread-menu>.text-button{padding:8px;width:100%;border-top:1px solid var(--line);margin-top:8px}
.custom-choice{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:12px;overflow-wrap:anywhere}
.custom-choice b{font-size:13px;font-weight:400}.custom-choice small{font-size:11px}.custom-choice[aria-pressed=true]{background:oklch(.85 .07 85/.08);color:var(--gold)}
#custom-options>p{font-size:12px;padding:8px}
.reading-controls .deck-summary{margin:0;padding:0;border:0;gap:10px}
.reading-controls .deck-summary img{width:24px;height:36px}
.reading-controls .deck-summary small{display:none}.reading-controls .deck-summary strong{font-size:11px;max-width:260px;overflow-wrap:anywhere}
.reading-controls .deck-summary .text-button{font-size:11px;margin-left:8px}
.reading-controls>#begin{justify-self:end;width:auto;margin:0;display:flex;align-items:center;justify-content:center;gap:24px;padding:10px 22px;min-height:42px;font-size:13px}
.table-wrap{border-radius:14px;background:var(--surface);overflow:visible}
.table-heading{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;gap:20px;border-bottom:1px solid var(--line)}
.table-heading>div:first-child{min-width:0}.table-heading h2{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.table-heading #table-caption{font-size:11px;margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere;max-width:70ch}
.table-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}.table-actions button{font-size:12px;white-space:nowrap}
#focus-table{display:flex;align-items:center;gap:7px;color:var(--muted);border-radius:8px}#focus-table:hover{color:var(--ink)}
#focus-begin{display:none}#reading[data-focus=true][data-phase=idle] #focus-begin{display:block}
#reading-status{padding:12px 20px 0;text-align:center;font-size:12px;min-height:34px;color:var(--gold)}
.board-stage{height:clamp(260px,calc(100svh - 390px),640px);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:0 0 14px 14px}
#reading-board{flex:none;width:100%;height:auto;aspect-ratio:1000/650;background:transparent}
#reading-board .slot{width:11%;transition:box-shadow .2s,border-color .2s,background .2s}
#reading-board[data-spread=traditional-three-card] .slot{width:24%}
#reading-board[data-spread=traditional-single-card] .slot{width:40%}
#reading-board[data-spread=traditional-celtic-cross] .slot{width:9%}
#reading-board .slot:disabled{opacity:1;cursor:default}
#reading-board .slot:hover:enabled{background:oklch(.34 .034 273);border-color:var(--gold);box-shadow:0 5px 20px oklch(.1 .025 273/.25),0 0 14px oklch(.85 .07 85/.1)}
#reading-board .slot:active{transform:translate(-50%,-50%) rotate(var(--angle))}
#reading-board .slot b{font-size:30px}#reading-board .slot span{font-size:13px}
#reading-board[data-spread=traditional-celtic-cross] .slot span{font-size:10px}
#reading-board .position-number{font-size:11px!important}
#reading-board img[data-reversed=true]{rotate:180deg}
.pick-hint{text-align:center;font-size:12px;color:var(--gold);padding:8px 16px 0}.pick-hint span{margin-left:12px;font-size:11px;color:var(--muted)}
#reading .pick-tray{justify-content:flex-start;gap:10px;padding:16px 24px 22px;min-height:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;user-select:none;cursor:grab}
#reading .pick-card{width:clamp(96px,8vw,128px);height:auto;aspect-ratio:2/3;flex:none;margin:0;transform:none;border-radius:9px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 10px oklch(.1 .02 273/.18)}
#reading .pick-card:first-child{margin-left:auto}#reading .pick-card:last-child{margin-right:auto}
#reading .pick-card:hover:enabled{transform:translateY(-6px);box-shadow:0 0 0 1px var(--gold),0 7px 20px oklch(.1 .02 273/.4)}
#reading .pick-card{cursor:grab}#reading .pick-tray[data-dragging=true],#reading .pick-tray[data-dragging=true] .pick-card{cursor:grabbing}#reading .pick-tray[data-dragging=true] .pick-card{transform:none}
#reading:not([data-phase=idle]) .reading-controls,#reading:not([data-phase=idle]) .reading-intro{display:none}
#reading:not([data-phase=idle]) .board-stage{height:clamp(300px,calc(100svh - 280px),780px)}
#reading-results{padding:10px 0 25px}.result-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0}
.result-heading h2{font-size:16px}.result-heading p{font-size:12px}
#reading .results{padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 28px}
#reading .result-row{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:18px 8px;border-bottom:1px solid var(--line);align-items:start;text-align:left;border-radius:8px}
.result-row strong{color:var(--gold);font:22px Georgia,serif}.result-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.result-copy b{font-size:13px;font-weight:400;color:var(--muted)}.result-copy small{font-size:12px;overflow-wrap:anywhere}.result-copy em{font-style:normal;color:var(--ink);font-size:18px}
.result-copy p{font-size:13px;color:var(--ink);line-height:1.8;white-space:pre-line}.result-copy .view-link{font-size:11px;color:var(--gold)}
#restart-confirm{max-width:420px;padding:26px}#restart-confirm p{font-size:13px;margin:12px 0 22px}#restart-confirm .actions{justify-content:flex-end}
body:has(#reading[data-focus=true]:not([hidden])){overflow:hidden}
body:has(#reading[data-focus=true]:not([hidden]))>.header,body:has(#reading[data-focus=true]:not([hidden]))>footer{display:none}
#reading[data-focus=true]{position:fixed;inset:0;z-index:var(--layer-focus);overflow:auto;background:var(--bg);padding:18px 3vw}
#reading[data-focus=true] .reading-intro,#reading[data-focus=true] .reading-controls{display:none}
#reading[data-focus=true] .board-stage{height:calc(100svh - 225px);min-height:220px}
#notice{z-index:var(--layer-notice)}
@media(max-width:700px){
  .header{padding:10px 16px;gap:8px}.header nav button{padding:8px;font-size:11px}.header nav button.active::after{left:8px;right:8px}
  main{padding:0 16px}#reading{padding:16px 0 0}.reading-intro{margin-bottom:16px;gap:8px}.reading-intro h1{font-size:20px}.reading-intro p{display:none}
  .reading-controls{grid-template-columns:1fr 1fr;gap:12px;padding:0 0 4px}.spread-field,.question-field{grid-column:1/-1}
  .question-field textarea{height:44px;min-height:44px;padding:10px 12px}.preset-choice{padding:7px 9px;min-height:50px}.preset-choice b{font-size:12px}.preset-choice small{font-size:9px}
  .reading-controls .deck-summary{gap:7px}.reading-controls .deck-summary strong{max-width:100px}.reading-controls .deck-summary .text-button{margin-left:0;white-space:nowrap}
  .reading-controls>#begin{font-size:12px;gap:10px;padding:8px 12px;margin:0;align-self:center}.reading-controls>#begin svg{width:15px}
  .table-heading{padding:12px;gap:10px;align-items:start}.table-heading h2{font-size:12px}.table-heading #table-caption{font-size:10px}.table-actions{gap:5px;flex-direction:column-reverse;align-items:end}.table-actions button{font-size:10px;min-height:28px;padding:3px 5px}
  #focus-table{gap:4px}#focus-table svg{width:14px;height:14px}#reading-status{font-size:11px;padding:10px 12px 0;min-height:36px}
  .board-stage{height:clamp(200px,calc(100svh - 470px),320px)}
  #reading:not([data-phase=idle]) .board-stage{height:clamp(250px,calc(100svh - 320px),470px)}
  #reading-board .slot b{font-size:23px}#reading-board .slot span{font-size:11px}#reading-board[data-spread=traditional-celtic-cross] .slot span{font-size:8px}
  #reading .pick-tray{padding:14px 12px 20px}.pick-hint span{display:block;margin:3px 0 0}.result-heading{display:block}.result-heading p{margin-top:6px;font-size:11px}#reading .results{display:flex}
  #reading[data-focus=true]{padding:10px}#reading[data-focus=true] .board-stage{height:calc(100svh - 240px)}
}
@media(prefers-reduced-motion:reduce){#reading button{transition:none}#reading .revealing img{animation:none}}