.rn-panel{overflow-x:auto}.rn-title{text-align:center;font-size:38px;margin:0 0 4px;color:#0b2545}.rn-subtitle{text-align:center;margin:0 0 16px;font-size:18px}.rn-toolbar-top{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}.rn-levels{display:flex;justify-content:center;margin:10px 0 22px}.rn-levels button{background:#fff;color:#111;border:2px solid #bbb;border-radius:8px 8px 0 0;min-width:120px}.rn-levels button.active{background:#23a440;color:#fff;border-color:#23a440}.rn-board-wrap{max-width:1120px;margin:0 auto}.rn-board{display:grid;grid-template-columns:repeat(11,54px);grid-auto-rows:46px;gap:7px;justify-content:center;align-items:center}.rn-cell{width:54px;height:46px;border:2px solid #c9ced6;border-radius:7px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.08)}.rn-op{font-size:22px;background:#fff;color:#000}.rn-num.given{background:#fff}.rn-num.missing{background:#ffe680;cursor:pointer}.rn-num.filled{background:#fff}.rn-empty{visibility:hidden}.rn-error{outline:3px solid #d00000;outline-offset:-3px}.rn-info{max-width:1000px;margin:18px auto 10px;border:1px solid #8ab6e8;background:#f5fbff;color:#174c88;border-radius:8px;padding:12px;text-align:center;font-weight:700}.rn-pool-box{max-width:1000px;margin:14px auto;border:1px solid #d6dbe3;border-radius:10px;background:#fff;padding:18px;text-align:center}.rn-pool-title{font-weight:700;margin-bottom:12px}.rn-pool{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.rn-token{min-width:58px;height:46px;border:2px solid #c9ced6;border-radius:7px;background:#ffe680;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;cursor:pointer;user-select:none}.rn-token.active{outline:4px solid #2d76d3}.rn-token.used{background:#fff;color:#999;cursor:not-allowed;text-decoration:line-through}.rn-help{max-width:1000px;margin:12px auto 0;border:1px solid #f1c232;background:#fff9db;border-radius:8px;padding:12px;text-align:center;font-weight:700;color:#7a5a00}@media(max-width:800px){.rn-board{grid-template-columns:repeat(11,34px);grid-auto-rows:34px;gap:4px}.rn-cell{width:34px;height:34px;font-size:16px}.rn-token{min-width:44px;height:36px;font-size:16px}.rn-title{font-size:30px}}@media print{.rn-toolbar-top,.rn-levels,.btn,header{display:none!important}.rn-panel{box-shadow:none!important;border:0!important}.rn-pool-box,.rn-help{display:none}.rn-board{gap:4px}.rn-cell{box-shadow:none}}

/* Mobile-Optimierung fuer ZahlenNetz / RechenNetz */
.rn-panel{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.rn-board-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 0 12px;
}
.rn-board{
  min-width:max-content;
}
.rn-token,
.rn-cell,
.rn-toolbar-top button,
.rn-levels button{
  touch-action:manipulation;
}

@media(max-width:700px){
  .rn-title{
    font-size:28px;
    line-height:1.1;
  }
  .rn-subtitle{
    font-size:15px;
    padding:0 6px;
  }
  .rn-toolbar-top{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .rn-toolbar-top button,
  .rn-toolbar-top .secondary{
    width:100%;
    min-height:44px;
    font-size:15px;
  }
  .rn-levels{
    gap:6px;
    padding:0 4px;
  }
  .rn-levels button{
    min-width:0;
    flex:1;
    min-height:42px;
    font-size:14px;
    padding:8px 6px;
  }
  .rn-board-wrap{
    width:100%;
    margin:0 auto;
  }
  .rn-board{
    grid-template-columns:repeat(11,42px);
    grid-auto-rows:42px;
    gap:4px;
    justify-content:start;
    padding:0 6px;
  }
  .rn-cell{
    width:42px;
    height:42px;
    font-size:18px;
    border-radius:6px;
  }
  .rn-op{
    font-size:18px;
  }
  .rn-num.missing{
    background:#ffe680;
  }
  .rn-pool-box{
    padding:12px 8px;
    margin:12px auto;
  }
  .rn-pool{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:4px 4px 10px;
  }
  .rn-token{
    flex:0 0 auto;
    min-width:50px;
    height:50px;
    font-size:22px;
  }
  .rn-info,
  .rn-help{
    font-size:14px;
    padding:10px;
  }
}

@media(max-width:420px){
  .rn-board{
    grid-template-columns:repeat(11,38px);
    grid-auto-rows:38px;
    gap:3px;
  }
  .rn-cell{
    width:38px;
    height:38px;
    font-size:16px;
  }
  .rn-op{
    font-size:16px;
  }
  .rn-token{
    min-width:48px;
    height:48px;
    font-size:20px;
  }
}