*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#0b0e13;color:#edf2f7;font-family:"Microsoft JhengHei",Arial,sans-serif}
.admin-preview-mode>header,.admin-preview-mode .pool-sidebar{display:none!important}
.admin-preview-mode .player-layout{display:block;padding:0}
.admin-preview-mode .lottery-content{width:100%;max-width:none}
.admin-preview-mode .lottery-stage{margin:0 auto}
[hidden]{display:none!important}
header{min-height:48px;background:#151a22;border-bottom:1px solid #39414e;padding:5px 14px;display:flex;align-items:center;gap:10px}
header img{flex:none;width:38px;height:38px;object-fit:contain}
header b{font-size:18px}
header span{margin-left:auto;color:#b9c3d1;overflow-wrap:anywhere;text-align:right}
header #logout{flex:none;margin-left:0;padding:7px 12px}
button,input{font:inherit;border:1px solid #4d596a;background:#202733;color:#fff;padding:7px 10px;border-radius:3px}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.player-layout{display:flex;align-items:flex-start;width:100%;padding:10px;gap:10px}
.pool-sidebar{flex:0 0 155px;min-width:0;border-right:1px solid #303946;padding-right:10px}
.pool-sidebar h2{font-size:16px;margin:4px 0 8px}
.pool-sidebar nav{display:block}
.pool-sidebar button{display:block;width:100%;margin-bottom:6px;text-align:left;overflow-wrap:anywhere}
.pool-sidebar button.active{border-color:#f2c14e;color:#f2c14e}
.lottery-content{flex:1 1 auto;min-width:0}
.lottery-stage{position:relative;overflow:hidden;width:100%;max-width:1200px;margin:0 auto;aspect-ratio:16/9;border:1px solid #39414e;background:#141922}
.stage-background{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;object-fit:fill}
.stage-title{position:absolute;left:2%;top:2%;z-index:2;text-shadow:0 1px 3px #000}
.stage-title h1{font-size:22px;margin:0}
.machine{position:absolute;z-index:2;left:5%;right:5%;top:35%;bottom:3%;min-width:0}
.reel-row{position:relative;padding-right:100px}
.reel-wrap{height:112px;overflow:hidden;position:relative;border:1px solid #505b6a;background:#090b0f}
.marker{position:absolute;left:50%;top:0;height:100%;width:3px;background:#e53935;z-index:3}
.reel{position:relative;height:100%;white-space:nowrap;transition:transform 3.5s cubic-bezier(.08,.72,.12,1)}
.reward{display:inline-block;vertical-align:top;width:180px;height:90px;margin:10px 5px;border:1px solid #5a6675;background:#202733;text-align:center;padding:5px;white-space:normal}
.reward-icon{display:block;width:48px;height:48px;margin:0 auto 4px}
.reward-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-command{position:absolute;right:0;top:38px;width:92px}
.status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 2px;color:#fff;text-shadow:0 1px 3px #000}
.status span{min-width:0}
.campaign-description{height:54px;overflow:auto;border:1px solid #888;padding:7px;background:rgba(17,17,17,.92);white-space:pre-wrap}
.stage-bottom{position:absolute;left:0;right:0;bottom:0;height:74px;text-align:center}
.draw-actions{display:inline-block}
.draw-option{display:inline-block;margin:7px 4px 0}
.draw-option span{display:block;margin-top:3px}
.history-command{top:auto;bottom:15px}
.machine #message{position:absolute;left:0;right:0;bottom:-22px;margin:0;color:#f2c14e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal{position:fixed;left:0;top:0;width:100%;height:100%;background:#050608;z-index:20;text-align:center;padding:10px}
.modal:before{content:"";display:inline-block;height:100%;vertical-align:middle}
.modal-panel,.modal form{display:inline-block;vertical-align:middle;text-align:left;width:80%;max-width:980px;max-height:82%;overflow:auto;background:#171d26;border:1px solid #4d596a;padding:18px}
.modal form{width:340px;max-width:calc(100% - 20px)}
.modal form input,.modal form button{display:block;width:100%;margin:9px 0}
.modal form img{display:block;width:90px;height:90px;margin:auto}
.modal-head{position:relative}
.modal-head h2{margin-top:0}
.modal-head button{position:absolute;right:0;top:0}
table{width:100%;border-collapse:collapse;background:#141922}
th,td{padding:8px;border-bottom:1px solid #303946;text-align:left}
.table-item-icon{width:28px;height:28px;vertical-align:middle;margin-right:8px}
.reward-winner{position:relative;z-index:4;border-color:#fff4a3!important;background:#fff3a8!important;color:#261a00!important;animation:rewardWinnerGlow .72s ease-in-out infinite alternate}
.reward-winner .reward-icon{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #ffd740)}
.reward-winner.reward-tier-jackpot{border-color:#ff8181!important;background:#5b1118!important;color:#fff!important;animation:rewardJackpotGlow .68s ease-in-out infinite alternate}
.reward-winner.reward-tier-jackpot .reward-icon{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #ff1f37)}
.reward-winner.reward-tier-second{border-color:#ffe779!important;background:#5b4910!important;color:#fff!important;animation:rewardSecondGlow .72s ease-in-out infinite alternate}
.reward-winner.reward-tier-second .reward-icon{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #ffd740)}
.reward-winner.reward-tier-third{border-color:#d7a6ff!important;background:#45205f!important;color:#fff!important;animation:rewardThirdGlow .74s ease-in-out infinite alternate}
.reward-winner.reward-tier-third .reward-icon{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 18px #b45cff)}
.reward-winner.reward-tier-standard{border-color:#8bd6ff!important;background:#123b5d!important;color:#fff!important;animation:rewardStandardGlow .76s ease-in-out infinite alternate}
.reward-winner.reward-tier-standard .reward-icon{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 17px #28a9ff)}
.lottery-stage.jackpot-pulse{animation:lotteryJackpotPulse 1.05s ease-in-out infinite alternate}
@keyframes rewardJackpotGlow{from{box-shadow:0 0 8px #ff4458}to{box-shadow:0 0 28px 9px rgba(255,31,55,.95)}}
@keyframes rewardSecondGlow{from{box-shadow:0 0 8px #e6ba20}to{box-shadow:0 0 24px 7px rgba(255,215,64,.9)}}
@keyframes rewardThirdGlow{from{box-shadow:0 0 8px #a94cff}to{box-shadow:0 0 23px 7px rgba(180,92,255,.86)}}
@keyframes rewardStandardGlow{from{box-shadow:0 0 7px #238ddd}to{box-shadow:0 0 20px 6px rgba(40,169,255,.8)}}
@keyframes lotteryJackpotPulse{from{box-shadow:inset 0 0 28px rgba(255,24,45,.18),0 0 12px rgba(255,24,45,.28)}to{box-shadow:inset 0 0 95px rgba(255,12,38,.5),0 0 36px rgba(255,12,38,.68)}}
@keyframes rewardWinnerGlow{from{box-shadow:0 0 8px 3px rgba(255,215,64,.75)}to{box-shadow:0 0 24px 10px rgba(255,244,163,1)}}
@media(max-width:1000px){
  .pool-sidebar{flex-basis:135px}
  .stage-title h1{font-size:18px}
  .machine{left:4%;right:4%;top:33%}
  .reel-row{padding-right:82px}
  .reel-wrap{height:86px}
  .reward{width:145px;height:68px;margin:8px 4px;font-size:12px}
  .reward-icon{width:34px;height:34px;margin-bottom:2px}
  .stage-command{width:76px;top:27px;padding:6px;font-size:12px}
  .status{padding:5px 2px;font-size:12px}
  .campaign-description{height:43px;padding:5px;font-size:12px}
  .stage-bottom{height:60px}
  .draw-option{margin-top:4px}
  .draw-option button{padding:5px 8px;font-size:12px}
  .draw-option span{font-size:11px}
  .history-command{bottom:10px}
}
@media(max-width:760px){
  header{padding:5px 9px}
  header b{font-size:16px}
  header span{font-size:12px}
  .player-layout{display:block;padding:8px}
  .pool-sidebar{width:auto;border:0;padding:0;margin-bottom:7px}
  .pool-sidebar h2{margin:0 0 5px}
  .pool-sidebar nav{display:flex;gap:5px;overflow-x:auto;padding-bottom:3px}
  .pool-sidebar button{flex:0 0 auto;width:auto;max-width:220px;margin:0}
}
@media(max-width:560px){
  .lottery-stage{height:auto!important;aspect-ratio:auto;overflow:hidden;padding:20% 7px 8px}
  .stage-background{height:auto;max-height:none}
  .stage-title{left:8px;top:5px}
  .stage-title h1{font-size:14px}
  .machine{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .reel-row{padding-right:66px}
  .reel-wrap{height:64px}
  .reward{width:96px;height:50px;margin:6px 3px;padding:3px;font-size:10px}
  .reward-icon{width:25px;height:25px;margin-bottom:1px}
  .stage-command{width:61px;top:19px;padding:4px 3px;font-size:11px}
  .status{display:grid;grid-template-columns:1fr auto;gap:2px 6px;font-size:11px;padding:4px 1px}
  .status #pity{grid-column:1/-1;text-align:right}
  .campaign-description{height:38px;padding:4px;font-size:11px}
  .stage-bottom{position:relative;height:auto;min-height:55px;display:flex;align-items:flex-start;justify-content:center;padding-right:65px}
  .draw-actions{display:flex;justify-content:center}
  .draw-option{margin:4px 2px 0}
  .draw-option button{padding:4px;font-size:11px}
  .draw-option span{font-size:10px}
  .history-command{right:0;top:8px;bottom:auto}
  .machine #message{position:relative;bottom:auto;white-space:normal;min-height:18px;font-size:11px}
  .modal-panel{width:100%;padding:10px}
  .modal-panel table{min-width:560px}
}

/* Pending-prize player layout */
.framed-text,.campaign-description,.session-log{color:#fff;background:rgba(8,11,16,.84);border:1px solid rgba(224,230,238,.78);padding:5px 7px;text-shadow:0 1px 2px #000}
.machine{top:42%;bottom:2%;display:flex;flex-direction:column}
.campaign-description{height:47px;width:76%;margin:2px auto 0}
.stage-bottom{position:relative;left:auto;right:auto;bottom:auto;height:auto;min-height:88px;margin-top:auto;display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(100px,1fr);gap:7px;align-items:center}
.session-log{min-height:74px;max-height:88px;overflow:auto;text-align:left;font-size:10px}
.session-log b{display:block;color:#f2c14e;margin-bottom:3px}
.session-log div div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draw-actions{display:flex;align-items:flex-end;justify-content:center}
.claim-command{position:static;width:auto;min-width:105px;justify-self:end}
#pendingBadge{display:inline-block;min-width:20px;margin-left:3px;padding:1px 4px;background:#8b1f24;border-radius:50%}
.machine #message{position:relative;left:auto;right:auto;bottom:auto;min-height:22px;padding:3px 6px;white-space:nowrap}
.confirm-modal[hidden]{display:none}
.confirm-modal{z-index:40}
.confirm-panel{display:inline-block;vertical-align:middle;text-align:left;width:420px;max-width:94%;background:#171d26;border:1px solid #4d596a;padding:18px}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px}
.claim-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0}.claim-toolbar input{flex:1;min-width:140px}
.claim-quick-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}.claim-quick-actions button[hidden]{display:none}.jackpot-action{background:#9b6a13;border-color:#e0b755;color:#fff}.jackpot-action:hover{background:#b98017}
.table-scroll{overflow:auto}.claims-panel table{min-width:680px}
.fragment-exchange{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0;padding:10px 12px;border:1px solid #8d6e2e;background:#211b10;color:#f1ce75}
.danger-action{background:#7e252c;border-color:#bd4b54;color:#fff}.danger-action:hover{background:#9a3038}
.fragment-warning-panel{border-color:#bd4b54}.fragment-warning-panel h2{color:#ff8c93}
.claims-panel td:last-child{white-space:nowrap}.claims-panel td:last-child button+button{margin-left:6px}
.fragment-draw-option button{border-color:#d6a83c;color:#ffe08a}
@media(max-width:1000px){
  .machine{top:38%}
  .stage-bottom{grid-template-columns:minmax(125px,1fr) auto minmax(90px,1fr)}
  .session-log{max-height:70px;min-height:60px}
}
@media(max-width:560px){
  .lottery-stage{min-height:610px;padding-top:25%}
  .machine{top:auto}
  .campaign-description{width:100%;height:42px}
  .stage-bottom{display:grid;grid-template-columns:1fr;gap:5px;padding:0}
  .session-log,.draw-actions,.claim-command{grid-column:1}
  .claim-command{justify-self:stretch}
  .machine #message{white-space:normal}
}

@media(max-height:600px) and (min-width:561px){
  header{min-height:38px;padding:2px 8px}
  header img{width:30px;height:30px}
  .player-layout{display:block;padding:5px}
  .pool-sidebar{width:auto;border:0;padding:0;margin:0 0 4px}
  .pool-sidebar h2{display:none}
  .pool-sidebar nav{display:flex;gap:4px;overflow-x:auto}
  .pool-sidebar button{flex:0 0 auto;width:auto;margin:0;padding:4px 8px}
  .lottery-stage{height:calc(100vh - 86px)!important;min-height:270px;aspect-ratio:auto}
  .stage-title{top:4px;left:7px}
  .stage-title h1{font-size:14px}
  .machine{top:19%;bottom:1%;left:2%;right:2%}
  .reel-wrap{height:58px}
  .reward{width:108px;height:48px;margin:5px 3px;padding:2px;font-size:10px}
  .reward-icon{width:24px;height:24px;margin-bottom:1px}
  .stage-command{top:16px;width:65px;padding:4px;font-size:11px}
  .status{padding:2px;font-size:10px}
  .campaign-description{height:31px;padding:3px;font-size:10px}
  .stage-bottom{min-height:53px;grid-template-columns:minmax(110px,1fr) auto minmax(82px,1fr)}
  .session-log{min-height:47px;max-height:52px;padding:3px;font-size:9px}
  .draw-option{margin:1px}
  .draw-option button{padding:3px 5px;font-size:10px}
  .draw-option span{font-size:9px}
  .claim-command{min-width:82px;font-size:10px}
  .machine #message{min-height:17px;font-size:9px;padding:2px 4px}
}