:root{--fair-blue:#146fe8;--fair-yellow:#ffd84a;--fair-ink:#233053;--fair-soft:#f5f9ff;--fair-green:#36a66a;--fair-red:#db647a}
.fair-body{margin:0;background:linear-gradient(145deg,#eef6ff,#fff9dd);color:var(--fair-ink);font-family:system-ui,-apple-system,"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif}
.fair-wrap{width:min(900px,calc(100% - 24px));margin:18px auto 38px}
.fair-intro{display:flex;align-items:center;gap:14px;margin-bottom:12px;padding:14px 16px;border:1px solid #dce9fb;border-radius:20px;background:#fff}
.fair-intro-icon{width:58px;height:58px;border-radius:15px;object-fit:cover;background:#eef6ff}
.fair-intro h1{font-size:clamp(24px,5vw,34px);margin:0}.fair-intro p{margin:5px 0 0;color:#667085;line-height:1.55}
.fair-stage{position:relative;border:1px solid #d9e7f8;border-radius:24px;background:#fff;box-shadow:0 16px 38px #3159a618;overflow:hidden}
.fair-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px;background:#f6faff;border-bottom:1px solid #dce8f7}
.fair-stat{text-align:center;padding:7px;border-radius:12px;background:#fff}.fair-stat b{display:block;font-size:19px}.fair-stat span{font-size:10px;color:#6b7488;font-weight:800}
.fair-timer{height:6px;background:#e7edf8}.fair-timer>div{height:100%;width:calc(var(--time,1)*100%);background:linear-gradient(90deg,#36a66a,#ffd84a,#ec7285);transition:width .08s linear}
.fair-arena{position:relative;min-height:440px;display:grid;grid-template-columns:104px 1fr 104px;align-items:center;padding:8px 10px 14px}
.fair-character{text-align:center;align-self:center}.fair-character img{width:86px;height:110px;object-fit:contain;filter:drop-shadow(0 8px 10px #203d6a18)}.fair-character strong{display:block;font-size:14px}
.fair-board{position:relative;min-width:0}.fair-treat-label{text-align:center;font-size:12px;font-weight:900;color:#6b6282;margin:0 0 4px}
.fair-svg{display:block;width:100%;max-height:390px;aspect-ratio:1000/620;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;border-radius:20px;background:radial-gradient(circle at center,#fffdf2 0,#f7fbff 72%);border:1px dashed #cbdcf3;cursor:crosshair}
.fair-shape{stroke-width:6}.fair-preview{stroke:#146fe8;stroke-width:9;stroke-linecap:round;stroke-dasharray:16 12;pointer-events:none}.fair-cut{stroke:#6558dc;stroke-width:7;stroke-linecap:round;pointer-events:none}
.fair-help{text-align:center;margin:8px 12px 12px;padding:9px 11px;border-radius:12px;background:#f6f9ff;color:#4d5d78;font-size:13px;font-weight:800;min-height:38px}
.fair-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:#f5f9fff2;backdrop-filter:blur(5px)}
.fair-overlay[hidden],.fair-round-result[hidden],.fair-final[hidden]{display:none!important}
.fair-overlay-card{width:min(520px,100%);text-align:center;background:#fff;border:1px solid #d7e5f7;border-radius:22px;padding:20px;box-shadow:0 16px 42px #193d7520}
.fair-start-visual{display:block;width:min(190px,46vw);height:auto;aspect-ratio:1;margin:5px auto 10px;border-radius:28px;object-fit:cover;box-shadow:0 12px 28px #173d8322}
.fair-overlay-card h2{margin:8px 0 4px;font-size:25px}.fair-overlay-card p{margin:7px 0;color:#5f687c;line-height:1.6}
.fair-daily{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e9f4ff;color:#225da6;font-size:12px;font-weight:900}
.fair-main-btn,.fair-action{border:0;border-radius:14px;padding:12px 16px;font:inherit;font-weight:1000;cursor:pointer}
.fair-main-btn{width:100%;margin-top:10px;background:linear-gradient(180deg,#ffdc58,#ffc928);color:#172654;border:1px solid #e8b811;box-shadow:0 8px 18px #e5ae2033}
.fair-main-btn:focus-visible,.fair-action:focus-visible,.fair-svg:focus-visible{outline:3px solid #146fe844;outline-offset:3px}
.fair-round-result{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;padding:16px;background:#ffffffee}
.fair-result-card{width:min(450px,100%);text-align:center;border:2px solid #dce8f7;border-radius:22px;padding:18px;background:#fff;box-shadow:0 16px 40px #183d7220}
.fair-result-card h2{margin:0 0 7px;font-size:28px}.fair-split{font-size:34px;font-weight:1000;color:#173d83}.fair-round-score{font-size:20px;font-weight:1000;margin:4px 0}.fair-reaction{color:#657086;min-height:24px}
.fair-stage.is-perfect .fair-result-card{border-color:#f2c934;background:linear-gradient(145deg,#fff,#fff9d9)}.fair-stage.is-great .fair-result-card{border-color:#68c794}.fair-stage.is-close .fair-result-card{border-color:#e7a5b0}
.fair-final{padding:14px}.fair-final-card{border:1px solid #dce9f8;border-radius:22px;background:linear-gradient(145deg,#fff,#f4f9ff 70%,#fff9de);padding:18px}.fair-final-head{text-align:center}.fair-final-head h2{margin:3px 0;font-size:26px}
.fair-total{text-align:center;font-size:38px;font-weight:1000;color:#173d83;margin:8px 0}.fair-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}.fair-summary>div{background:#fff;border:1px solid #e0e8f5;border-radius:14px;padding:10px;text-align:center}.fair-summary strong{display:block;font-size:20px}.fair-summary span{font-size:11px;color:#6e7789;font-weight:800}
.fair-result-rows{display:grid;gap:6px;margin:12px 0}.fair-result-row{display:grid;grid-template-columns:38px 1fr 64px;gap:8px;align-items:center;padding:8px 10px;border-radius:11px;background:#fff}.fair-result-row span{font-weight:900;color:#667085}.fair-result-row strong{text-align:center}.fair-result-row b{text-align:right;color:#173d83}
.fair-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.fair-action{text-decoration:none;text-align:center;background:#edf4ff;color:#234b83}.fair-action.primary{grid-column:1/-1;background:linear-gradient(180deg,#ffdc58,#ffc928);color:#172654;border:1px solid #e8b811}.fair-action.share-x{background:#111;color:#fff}.fair-action.share-line{background:#06c755;color:#fff}.fair-action.home{grid-column:1/-1;background:#fff;border:1px solid #d8e3f1}
.fair-footer-note{text-align:center;color:#7a8292;font-size:11px;margin-top:10px}.fair-howto{margin-top:12px;padding:14px 16px;background:#fff;border:1px solid #dce8f7;border-radius:18px}.fair-howto h2{margin:0 0 7px;font-size:19px}.fair-howto ol{margin:0;padding-left:20px;line-height:1.7;color:#59647a}.fair-howto .sound-note{font-size:12px;color:#747d90;margin:7px 0 0}
.fair-portions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.fair-portions>span{position:relative;display:grid;grid-template-columns:34px 1fr 70px;grid-template-rows:auto auto;align-items:center;text-align:left;padding:7px 10px;border-radius:13px;background:#f6f9ff;min-height:62px}.fair-portions img{grid-row:1/3;width:30px;height:34px;object-fit:contain}.fair-portions b{font-size:11px;color:#68758c}.fair-portions strong{font-size:16px}.fair-mini-piece{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:68px;height:50px;overflow:hidden}.fair-mini-piece svg{width:68px;height:50px}
.fair-flight-layer{position:absolute;inset:0;z-index:18;pointer-events:none;overflow:hidden}.fair-flight-piece{position:absolute;will-change:transform,opacity;filter:drop-shadow(0 8px 8px rgba(35,48,83,.24))}.fair-flight-piece svg{display:block;width:100%;height:100%}
.fair-stage.is-sharing .fair-character img{animation:fair-bounce .42s ease}
@keyframes fair-bounce{50%{transform:translateY(-6px) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.fair-stage.is-sharing .fair-character img{animation:none}.fair-timer>div{transition:none}}
@media(max-width:680px){
  .fair-wrap{width:min(100% - 12px,900px);margin:8px auto 24px}.fair-intro{padding:10px 12px;margin-bottom:7px}.fair-intro-icon{width:50px;height:50px}.fair-intro h1{font-size:21px}.fair-intro p{font-size:12px}
  .fair-stage{border-radius:18px}.fair-hud{padding:6px;gap:4px}.fair-stat{padding:5px 2px}.fair-stat b{font-size:16px}.fair-stat span{font-size:9px}
  .fair-arena{min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"pico sora" "board board";gap:4px 8px;padding:6px}
  #picoSide{grid-area:pico}#soraSide{grid-area:sora}.fair-board{grid-area:board;width:100%}.fair-character{display:grid;grid-template-columns:48px auto;align-items:center;justify-self:center;text-align:left}.fair-character img{width:46px;height:58px}.fair-character strong{font-size:11px}
  .fair-svg{width:100%;max-height:none;min-height:210px;border-radius:14px}.fair-help{font-size:12px;margin:6px 7px 8px;padding:7px;min-height:34px}
  .fair-overlay{padding:8px}.fair-overlay-card{padding:14px;border-radius:18px}.fair-start-visual{width:min(160px,42vw);border-radius:24px}.fair-overlay-card h2{font-size:21px}.fair-overlay-card p{font-size:13px;margin:5px 0}
  .fair-round-result{padding:8px}.fair-result-card{padding:14px}.fair-result-card h2{font-size:24px}.fair-split{font-size:29px}.fair-final{padding:8px}.fair-final-card{padding:12px}.fair-total{font-size:31px}.fair-actions{gap:6px}.fair-action{padding:10px 8px;font-size:13px}.fair-howto{margin-top:8px;padding:11px 12px;font-size:12px}
  .fair-portions>span{grid-template-columns:30px 1fr 54px;padding:6px}.fair-mini-piece,.fair-mini-piece svg{width:52px;height:40px}
}
@media(max-height:720px) and (max-width:680px){.fair-intro p{display:none}.fair-intro{margin-bottom:5px}.fair-howto{display:none}.fair-start-visual{width:min(134px,36vw)}}