*{margin:0;padding:0;box-sizing:border-box;font-family:Consolas, "Courier New", monospace;font-size:18px;}
html,body{width:100vw;height:100vh;overflow:hidden;background:#fff;}
#container{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
}
#drawPanel{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;}
canvas{width:100%;height:100%;display:block;}
#ctrlBar{
    position:absolute;
    top:20px;
    left:20px;
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
}
.btn-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}
button{
    padding:2px 4px;
    cursor:pointer;
    text-align:center;
}
.mode-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.mode-group label{
    padding:4px 6px;
}
#fisherLabel{
    position:absolute;
    bottom:36px;
    left:36px;
    z-index:10;
    color:#fa0404;
    pointer-events:none;
    font-size:18px;
    line-height:1.4;
    text-align:right;
}
#hintBar{
    position:absolute;
    right:24px;
    bottom:24px;
    z-index:10;
    max-width:60%;
    color:#0055cc;
    pointer-events:none;
    font-size:18px;
    line-height:1.4;
    text-align:right;
}
#mobileTip{
    position:absolute;
    top:20px;
    right:20px;
    z-index:10;
    color:#fa0404;
    pointer-events:none;
    font-size:15px;
    line-height:1.35;
    text-align:left;
    display:none;
    background:rgba(255,255,255,0.82);
    padding:4px 8px;
    border-radius:3px;
    border:1px solid #f8c0c0;
}
#watermark{
    position:fixed;
    right:20px;
    bottom:14px;
    z-index:999;
    text-align:right;
    pointer-events:none;
    line-height:1.5;
}
.wm-title{
    font-size:15px;
    color:rgba(40,40,40,0.78);
    font-weight:600;
}
.wm-copy{
    font-size:12px;
    color:rgba(130,130,130,0.7);
    margin-top:4px;
}
#homeLink{
    pointer-events:auto;
    display:inline-block;
    font-size:12px;
    color:rgba(130,130,130,0.8);
    text-decoration:none;
    margin-bottom:4px;
}
#homeLink:hover{color:rgba(40,40,40,0.95);text-decoration:underline;}
#infoPanel{
    width:100%;
    height:100%;
    padding:16px;
    overflow:auto;
    border-left:1px solid #ccc;
    min-width:0;
    min-height:0;
    font-family:Consolas, "Courier New", monospace;
}
pre{white-space:pre-wrap;font-size:18px;line-height:1.52;font-family:Consolas, "Courier New", monospace;}
.mono{font-family:Consolas, "Courier New", monospace;}
.info-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    position:sticky;
    top:0;
    background:#fff;
    padding-bottom:8px;
    margin-bottom:8px;
    z-index:1;
}
.info-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:8px;
}
.red{color:#f00;font-weight:bold;}
.blue{color:#0055cc;font-weight:bold;}
.grey{color:#666;}
.p1{color:#d82828;}
.p2{color:#2878d8;}
.p3{color:#28a848;}
.p4{color:#9c27b0;}
.p5{color:#ff9800;}
.orig{color:#999;}
/* 移动端控制条（默认隐藏，竖屏小屏显示） */
#mobileCtrl{
    position:absolute;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
    z-index:15;
    display:none;
    gap:6px;
    align-items:center;
    background:rgba(255,255,255,0.92);
    border:1px solid #bbb;
    border-radius:6px;
    padding:3px 8px;
}
#mobileCtrl select{padding:0.5px 1px;font-size:5.5px;font-family:Consolas,"Courier New",monospace;}
#mobileCtrl .mc-btn{padding:1.5px 4.5px;font-size:6.5px;line-height:1;cursor:pointer;min-width:13px;border:1px solid #999;background:#fafafa;border-radius:1.5px;}
#mobileCtrl .mc-btn:active{background:#e0e0e0;}
#mobileCtrl .mc-label{font-size:5.5px;color:#333;}
#mobileCtrl .mc-val{font-size:5.5px;min-width:25px;text-align:right;font-family:Consolas,"Courier New",monospace;}
/* 竖屏 + 窄屏（手机竖屏）响应式布局 */
@media (orientation:portrait) and (max-width:768px){
    #container{grid-template-columns:1fr;grid-template-rows:1fr 1fr;}
    #infoPanel{border-left:none;border-top:1px solid #ccc;padding:8px;}
    *{font-size:5.5px;}
    pre{font-size:5.5px;line-height:1.34;}
    button{padding:1.5px 3px;font-size:5.5px;}
    h4{font-size:6px;}
    #ctrlBar{top:6px;left:6px;gap:6px;}
    .btn-group,.mode-group{gap:5px;}
    .mode-group label{padding:2px 4px;font-size:5.5px;}
    #fisherLabel{display:none;}
    #hintBar{font-size:5px;bottom:42px;right:6px;max-width:58%;line-height:1.3;}
    #watermark{right:6px;bottom:4px;}
    .wm-title{font-size:4.5px;}
    .wm-copy{font-size:3.5px;}
    #homeLink{font-size:3.5px;margin-bottom:2px;}
    #mobileTip{display:block;top:6px;right:6px;font-size:5.5px;line-height:1.35;padding:2px 4px;border-radius:2px;border:0.5px solid #f8c0c0;}
    #mobileCtrl{display:flex !important;}
    .info-top,.info-cols{gap:8px;margin-bottom:6px;}
    .info-top{padding-bottom:6px;margin-bottom:6px;}
}