.loban-help{margin:20px auto 14px;text-align:center;color:#71625d;font-size:14px}
.loban-board{padding:42px 18px 16px;border:1px solid #e2d6c9;border-radius:18px;background:#fff;box-shadow:0 12px 30px #5a211210}
.loban-deck{position:relative;padding-top:34px;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.loban-deck.is-dragging{cursor:grabbing}
.loban-floating-input{position:absolute;z-index:7;top:0;left:50%;display:flex;align-items:center;gap:7px;transform:translateX(-50%);white-space:nowrap}
.loban-floating-input input{width:58px;height:28px;padding:2px 5px;border:1px solid #f49a00;border-radius:0;background:#fff;color:#d83419;text-align:center;font-weight:800;outline:none}
.loban-floating-input span{color:#777;font-size:12px;font-weight:500}
.loban-ruler{position:relative;margin:0;padding-top:42px}
.loban-ruler+.loban-ruler{margin-top:16px}
.loban-ruler header{position:absolute;z-index:3;top:17px;left:0;display:flex;gap:5px;align-items:baseline;color:#37322f;pointer-events:none}
.loban-ruler header b{font-size:13px}
.loban-ruler header span{font-size:12px;color:#756e69}
.loban-scale{position:relative;height:91px;overflow:hidden;border-top:1px solid #777;border-bottom:3px solid #333;background:#fff}
.loban-track{--drag-x:0px;position:absolute;left:0;top:0;display:grid;grid-template-rows:31px 28px 29px;width:300%;height:100%;transform:translate3d(-33.333%,0,0) translate3d(var(--drag-x),0,0);will-change:transform}
.loban-tick-row{display:grid;grid-template-columns:repeat(30,1fr);border-bottom:1px solid #777}
.loban-tick-row span{padding-top:9px;text-align:center;border-right:1px solid #aaa;font-size:10px;color:#5e5753;background:repeating-linear-gradient(90deg,#777 0 1px,transparent 1px 10%,#777 10% calc(10% + 1px),transparent calc(10% + 1px) 50%)}
.loban-major-row,.loban-minor-row{display:flex;width:100%;min-width:0}
.loban-major-row>span,.loban-minor-row>span{box-sizing:border-box;display:flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:0;padding:2px 4px;text-align:center;border-right:1px solid #888;font-size:10px;font-weight:800;line-height:1.05;white-space:nowrap;overflow:hidden}
.loban-major-row>span{gap:5px;border-bottom:1px solid #999;background:#f1f1f1;color:#3d3835}
.loban-major-row small{font-size:9px;font-weight:500}
.loban-minor-row>span{border-bottom:3px solid #353535;background:#fff;color:#403936}
.loban-major-row .is-auspicious,.loban-minor-row .is-auspicious{color:#e5252d}
.loban-minor-row .is-auspicious{border-bottom-color:#ed2732}
.loban-shared-pointer{position:absolute;z-index:6;left:50%;top:28px;bottom:0;width:2px;background:#f49a00;transform:translateX(-1px);pointer-events:none}
.loban-shared-pointer:before{content:"";position:absolute;top:0;left:-6px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #f49a00}
.loban-drag-hint{margin-top:9px;text-align:right;color:#776f69;font-size:12px}
.loban-scrollbar{width:58%;height:5px;margin:8px auto 0;overflow:hidden;border-radius:9px;background:#ddd}
.loban-scrollbar span{display:block;width:20%;height:100%;border-radius:9px;background:#888;transition:transform .25s ease}
.loban-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.loban-reading{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:17px;border:1px solid #e2d3c4;border-radius:16px;background:#fff;box-shadow:0 8px 24px #5a21120a}
.loban-reading div{display:grid;gap:4px}.loban-reading span,.loban-reading small{color:#766661}.loban-reading b{font-size:20px}.loban-reading p{margin:0;color:#554844;line-height:1.55}.loban-reading strong{font-size:12px;letter-spacing:.04em}
.loban-summary .good b,.loban-summary .good strong{color:#28713e}.loban-summary .bad b,.loban-summary .bad strong{color:#a91e28}
@media(max-width:760px){
  .loban-board{padding:42px 8px 14px;border-radius:14px}
  .loban-ruler header{align-items:flex-start;flex-direction:column;gap:1px;top:7px}
  .loban-ruler{padding-top:49px}
  .loban-ruler+.loban-ruler{margin-top:9px}
  .loban-unit{grid-template-rows:30px 28px 29px}
  .loban-unit b,.loban-unit small,.loban-unit strong{font-size:9px}
  .loban-floating-input span{display:none}
  .loban-summary{grid-template-columns:1fr}
  .loban-scrollbar{width:75%}
}